Tutorials

Print Friendly and PDF
To keep the COLORED words, you can also copy the whole text and paste it into a Word doc

NextGen custom templates & CSS Decorative Gallery

Published on February 12, 2012
Last update : October 10, 2012

I’m not greatly skilled in coding and I struggled quite a  bit before I got this to work. Thanks to Alexrabe’s pages (NextGen), Nick La’s page CSS Decorative Gallery and various discussions on the WordPress forums, I gathered bits of information here and there and I finally found my way through. Obviously I’m not the only one having struggled with this.

Both NextGen Gallery and CSS Decorative Gallery (web designer wall) are such great tools, I think it’s a pitty if some people give up before they manage to get them to work together. That’s why I decided to write this tutorial as a contribution.

Note: NetxGen Gallery has recently (2012) been acquired by Photocrati Media. The good news is that they are on their way to improve the NextGen Gallery documentation, on top of improving the features…


I propose a AT A GLANCE section for those who might not need more than that and a STEP BY STEP section for those who are not used to fiddling around with file locations and coding.

Sources

 

 

LET’S START!
Let’s say we want to add a paper-clip to our thumbs when displaying a gallery image list in a page or a post.
This is what we want to achieve : (don’t take the background into account)

Click here to see this gallery web page

A. AT A GLANCE

(You might want to skip this part if you choose the “Step by step” procedure)

The main things to know are …

  • The gallery template files (default and others) that are originally part of the NextGen plugin sit in ../wp-content/plugins/nextgen-gallery . In there, the PHP files sit in the View folder and the CSS files sit in the  CSS folder. nggallery.css is the one to be copied and modified.
  • The custom gallery template files that you add will have to sit in ../wp-content/themes/ your WP theme . In there, the PHP files (one per template) have to sit in a new folder named nggallery and the CSS file (one for all custom templates) has to sit in the root of your WP theme and has to keep its name nggallery.css
  • For modifying the PHP and CSS files, refer to sections B5 and B6.
  • The shortcode to be used in your pages or posts (section B8) is

XXX being your gallery ID, Y being the string of characters following “gallery-” in your PHP file’s name.

 

B. STEP BY STEP

1. Prepare folders on your hard disc

This is just for making foders and files easier to handle, also for possible future custom templates.

  • Somewhere on your hard disc, create a folder called nextgen-custom-templates (for instance)
  • Within that folder, create a sub folder called caption-paperclip (for instance)
  • Within the caption-paperclip folder, create a sub folder named nggallery (mandatory because ultimately, on your server, the template PHP file will have to be in a folder named that way and no other)

At this point, your folder tree should look like this :

nextgen-custom-templates

caption-paperclip

nggallery

 

2. Download and unzip gallery-decorative-demo.zip

  • Download it from CSS Decorative Gallery and place it within the nextgen-custom-templates folder
  • Unzip it and delete the remaining zip file. Now your folder tree should look like this

nextgen-custom-templates

caption-paperclip

nggallery

decorative-gallery-demo

images

sifr (we’ll never need this one, you could as well throw it away)

 

3. Upload the paper-clip image onto your server

Within ../decorative-gallery-demo/images , choose paper-clip.png
Personally, I like to upload that kind of image files in my WP media library so they’re all gathered there. I use the plugin Media Tags to group them with some appropriate tags. However you can upload this image to some other place like your NextGen gallery or even anywhere on your server. All we’ll need later is its URL.

 

4. Download the needed default php and css files

Use your best FTP software ( FileZilla for instance) in order to download those files from your server onto your hard disc.

  • Download gallery-caption.php which is here –> .. /wp-content/plugins/nextgen-gallery/view/
    and place it on your hard disc,  into the nggallery folder
    Note that I chose this file because that template allows captions below the thumbs (caption desplays if your image description field was filled). You could as well choose another php file (depending on the gallery template you want tu use) or else the default one : gallery.php (no possible caption with this one).
  • Download nggallery.css which is here –> .. /wp-content/plugins/nextgen-gallery/css/
    and place it into the caption-paperclip folder
  • Change the name of gallery-caption.php to gallery-caption-paperclip.php   (while the css file HAS TO keep its original name)

So now your folder tree should look like this :

nextgen-custom-templates

caption-paperclip

nggallery.css

nggallery

gallery-caption-paperclip.php

decorative-gallery-demo

images

sifr

5. Modify the php file

  • Open gallery-caption-paperclip.php in a text editor like Notepad++ (much easier than just Notepad)
  • Scroll down to the part that’s shown below
    The pieces of code you need to add are blue highlighted
    The <em> tags do replace <span> tags that were there originally. That replacement is important!
    Note that if you used the default gallery template ( gallery.php ), you woudln’t have that line concerning “caption” at all, thus no span tags to replace.

 

Note that on Nick La’s web page  CSS Decorative Gallery , it shows the span tags (here blue highlighted) before the img tags but if you do that, the paper-clip image would show behind your thumb instead of in front (or am I missing something here ? )

  • Save the file

 

6. Modify the css file

  • Open nggallery.css in a text editor (Notepad++ or else)
  • Copy the following code and paste it at the very bottom of your CSS sheet

You have to replace the background image URL   (here in line 14) with your image URL depending on where you uploaded it to.

If you happen to do this with another image than paper-clip.png, height and width (here in lines 8 and 9) have to be exactly those of the image
Other than that, just for your info, Nick La says on his website :

Then in the CSS, the key point you have to remember is: specify the div element to position:relative and the span element to position:absolute . You can position the span element anywhere you want by using the top and left property.

  • Now (only if you had to replace the span tags with em tags in your PHP file) scroll up to the part shown below (or find it with the Notepad++ Search function) and in the 1st line, replace span with em

Note that the em tag makes the default font style italic . I personnally like it for captions but if you prefer normal style, add the following line anywhere in the above piece of code :

  • Save the file

 

Note that if/when you add other custom templates, which means repeating the whole same process with other images than paper-clip.png, you have to keep adding their own piece of CSS code at the end of the one CSS sheet. As long as the added codes refer each time to a new class name (here .paperclip) it’s the right way to assign styles to your NextGen gallery custom templates.  Opposedly, you’ll need to make a new php file for each template though.

 

7. Upload both files onto your server

Use your FTP software (FileZilla for instance) in order to upload those files from your hard disc onto your server.

  • Upload both the folder nggallery (which contains nggallery-caption-paperclip.php ) AND the file  nggallery.css onto –> .. /wp-content/themes/ your WordPress theme

Have you guessed why these files have to sit within your WordPress theme and not within the NextGen Gallery plugin ? If it was no so, your new files would be lost each time you would update Nextgen.  That’s the reason why Alexrabe (because he is so smart  ;-) ) did set things that way.

However, if you update your theme, you will probably have to upload the folder and the file onto it again. That’s why it is wise to keep them on your hard disc.

 

8. Insert the right shortcode into your page or post

In your page or post, insert the following shortcode :

(XXX being the id of your gallery)

 

9. Open your page and enjoy the sight

 

C. COMMENTS & SUGGESTIONS

If you have any trouble or if you notice any mistake  or something missing in my tutorial,
please leave a message in this WordPress Forum Thread

If my tutorial helped you, a message in my GuestBook   will be appreciated :-)