NextGEN image gallery captions

Here are a couple of tricks for showing image captions under the thumbnail images in the standard NextGEN gallery view. These are probably available in various places, some here in the forum and others around the web; now they’re all in one place for us all!!!

ENABLING CAPTIONS BELOW GALLERY IMAGES

When you add a gallery to a post/page, you get this by default:

[nggallery id=1]

You need to add this:

[nggallery id=1 template=caption]

GETTING THE CAPTIONS YOU JUST ENABLED TO SHOW-UP

When importing an image to a gallery, NextGEN automatically adds the image filename (minus the ext) to the ALT/TITLE field of the image meta data.

However, the “template=caption” function is actually preset to call the DESCRIPTION field of the image. If you don’t have anything in the DESC field, you will not see any caption (even though it is technically working.)

You have two options: (a) add something to the description field of every image; or (b) change which field is being called.

You can add a value to image DESC fields manually in NextGEN or (probably) using any number of EXIF tools available.

However, suppose you want the image name to automatically appear as the image caption in your gallery. (Maybe you are creating a product gallery where the image names are also the actual product codes, and you want to display those codes below each thumbnail.) No problem –

Since NG automatically creates the ALT/TITLE from the image name on import, here’s how to call that field:

1. In your dashboard, click Pluginns > Editor from the left-hand nav
2. Select plugin to edit: NextGEN Gallery
3. From right hand file list, click:
nextgen-gallery/view/gallery-caption.php
4. Scroll down to this line:
php echo $image->caption
5. Change to:
php echo $image->alttext

Now, your default image galleries should automatically show the filename (minus ext) as the caption below every image.

STYLING YOUR IMAGE GALLERY CAPTIONS

1. In your dashboard, click Pluginns > Editor from the left-hand nav
2. Select plugin to edit: NextGEN Gallery
3. From right hand file list, click:
nextgen-gallery/css/nggallery.css
4. Scroll down to this line:
.ngg-gallery-thumbnail span
5. Add your CSS markup between the {}’s

STYLING YOUR IMAGE GALLERY THUMBNAILS

1. In your dashboard, click Pluginns > Editor from the left-hand nav
2. Select plugin to edit: NextGEN Gallery
3. From right hand file list, click:
nextgen-gallery/css/nggallery.css
4. Scroll down to this line:
.ngg-gallery-thumbnail img
5. Modify the CSS “background” and “border” properties between the {}’s to style the default gallery image container
6. To change the HOVER effect add this CSS immediately below the “img” definition
.ngg-gallery-thumbnail img:hover
7. Again add/modify the “background” and “border” properties for your desired hover effect.

I’ve personally tested these techniques using the latest versions of WP and NG (as of 03/09/11) and everything does work (assuming I didn’t get some of the steps wrong as I was documenting all this.) I hope these tips help save you time and frustration with NextGEN galleries.

If you have more to offer, please feel free to add your tips below. ??