I was working on my personal blog and wanted to add the date or a date range to the top of each gallery when they are listed out. The blog I am speaking of uses WordPress, WP version 2.7, with the NextGen Gallery plugin, NGG version 1.2.1, for pictures. I list the all of the galleries by using the album compact function so the below howto relates to that function only. What it will do is simply print out anything in the description field right above the image you have highlighted for each gallery. Since I was not using the description for anything else I just add the date or a date range into that field such as 01-01-2009 or 04-16-2009 to 08-10-2009.  Follow the directions below and you can print out anything you like above each gallery listing.

The NextGen Gallery shortcode used to display the galleries:

[album=3,compact]

This shortcode spits out any gallery located in the album specified. By default each gallery will include a highlighted image, the title of the gallery, and the number of photos within that gallery as shown below.

The goal was to make each gallery look like the below. As you can see there are now dates above each gallery or in some cases descriptive text such as “Random Dates”.

This is easy to do however it is a hack so you have to be in a similar situation as I was where the Description field was not already used. Also make sure you are on the latest version of NGG (NextGen Gallery Plugin) because at some point prior to version 1.2.1 the CSS relating to this was moved from nggfunctions.php to view/album-compact.php.

So in the /wp-root/wp-content/plugins/nextgen-gallery/view/ folder there is a file called album-compact.php which is the file we will be adding a line of code to. Open up album-compact.php in your favorite text editor right after line 22 we will be adding a new line of code as shown below. Right before the new code I show line 22 to make it clear as to where the new line of code will go.

Line 22:

<div class="ngg-album-compact">

New Code: **NOTE** This will be line 23.

<center><a class="ngg-album-desc" title="<?php echo $gallery->galdesc ?>" href="<?php echo $gallery->link ?>"><?php echo $gallery->galdesc ?></a></center>

This code as you can see above takes the $galdesc variable and prints it out centered above the highlighted gallery image and it also make the description a link to the gallery itself. Again you can use any text you want  here but just make sure to test what it looks like so it doesn’t spill over the sides or cause issues with other galleries that show above or below this one in your album listing.

Now all you have to do to print out text above each gallery is go into your WP admin site, expand the Gallery Options in the left navigation, select Manage Gallery, click on the gallery you want to add text to, enter a date or other text into the Description field, and then save the update to the gallery. Now visit your album listing that uses the compact shortcode to display this gallery and the text you entered should display right above the gallery.

The book below is great book for customizing your WordPress blog. It will explain how to configure WordPress, various tips on setting things up, and basic information on plugins. It is a must have for a very solid introduction to WordPress.

WordPress for Business Bloggers

Paul Thewlis. Packt Publishing 2008, Paperback, 356 pages, $29.99

This entry was posted on Tuesday, April 14th, 2009 at 2:31 PM and is filed under Code Snippets. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.