I updated the way I show photographs on the Website. This post is for those who are interested in the technical details of how this was done.

I’ve been using the free plug-in for WordPress called ‘NextGEN Gallery’ to display photographs on the website. A ‘plug-in’ is a piece of software that you can download and activate, and it adds more capabilities to your WordPress site. The NextGEN Gallery is a very popular WordPress plug-in with over 5 million downloads. I’ve made a few improvements related to the NextGEN gallery that I will document in this post.

Update

I changed the way I link to tag galleries – I don’t use menus anymore. I posted about it here.

I also quit using NextGen Gallery. The plugin was rewritten and it no longer worked with my site (see comment and replies on this post). I moved to the NextCellent gallery, which maintains the legacy Nextgen Gallery software. It is working very well.

Menu Link to a Tag Gallery

I wanted to find an easy way to link my photographs to menu items. For example, I could have a menu item called ‘Photographs’ with a sub-menu called ‘Birds’, and it would show all the bird photos. I stumbled upon a way to do this that is pretty easy and it uses the NextGEN gallery. I haven’t seen this described anywhere. Maybe it’s obvious to WordPress and NextGEN experts, and it’s the expected solution. Or, maybe there are much better ways to do it. I’ll describe what I did.

The NextGEN galley supports what they call a ‘Tag Gallery’. Each photo that is uploaded to NextGEN can be tagged with one or more text fields. For example, I can write the text ‘Bird’ in the tag field for all my bird photographs. I can then display a gallery with the following short code:

<nggtags gallery=bird> (replace <> with [])

This displays in the post a gallery of all photographs with the word ‘Bird’ in the tag field.

The NextGEN gallery also supports a ‘tag cloud’. This displays all of the tags used by NextGEN, where the size of the text for each tag represents the relative popularity of the tag. For example, the tag Bird would be written in larger text than all the other tags if the number of photos with the tag Bird is larger than all the others. The NextGEN tag cloud is displayed by using the following shortcode:

<tagcloud> (replace <> with [])

To link tag galleries to menu items I did the following:

1. Create a new page with the title ‘Photographs’, and with a short code of the following: <tagcloud> (replace <> with []). Don’t show this page on any menu. I noticed that the default setting is that if you add a new page it automatically adds it to the site’s menu. I had to remove it from the menu (just go to Appearance -> Menus and remove the menu item).
2. I changed the ‘permalink’ for the page to cc-ng-tagcloud. This is done using the ‘edit’ button right under the page title.
3. Go to Appearance -> Menus and create the menu structure that you like. I found that if you want a menu that doesn’t have a URL you can type anything in the URL field, add it, and then remove the text in the URL field after that. If the URL field is blank, then it doesn’t let you add the menu item. For example, I created the menu item ‘Photographs’ with no URL. Under that I put ‘Birds’ with no URL. Under ‘Birds’ I put sub-menus for different bird types. For each of those I used a URL as described below.
4. For menu items that you want to link to a tag gallery, put the following in the URL field:<link to the tag cloud page>/?gallerytag=<tag name>
   <link to the tag cloud page> is a link to the page created in step 1. For example, for me it is the following: https://www.thelesters.net/cc-ng-tagcloud. By the way, if you want to see what the NextGEN tag cloud looks lkie, then click on the link to the left.
   <tag name> is the name of the tag you want the gallery for. For example, I have a tag called ‘Bird Favorite’. For <tag name> I use ‘bird-favorite’. Note that you don’t need capitalization, and that spaces are replaced by dashes.
   You may be wondering what the ‘?’ is for in the URL. This is a standard syntax used by PHP to pass arguments to a function. A PHP function can use the ‘get’ routine to retrieve data after the ‘?’.

That’s it. Now when you click on the menu item, you’ll go to a page that displays the gallery for that tag. If I upload a new photo and tag it with an existing tag, it will automatically show up in the tag gallery. For example, if I tag a newly uploaded photo with ‘Bird Favorite’ it will show up automatically when the user chooses the Bird Favorites menu item. You can see it in action on this website.

One improvement I’d like to do is replace the page title ‘Photographs’ with the name of the tag. For example, it would say ‘Bird Favorites’ instead of ‘Photographs’. That’s not a big deal, and maybe a future improvement.

Lightbox Effects

I noticed on other sites that used the NextGEN Gallery plug-in, the way that the photographs are displayed is different, and I liked it better. However, I couldn’t make it work on my site, and couldn’t find a good explanation anywhere. So I found the solution by trial and error. I will document it here.

Go to Gallery -> Options -> Effects (this assumes that the NextGEN gallery plug-in is downloaded and activated). There’s a drop down with 6 options, but the comments say that only Thickbox and Shutter come with the NextGEN download.

I investigated the ‘Lightbox’ option. I didn’t know what a Lightbox was. I found out that it is free jQuery software for displaying images. See http:\\lightbox.net. I searched in the WordPress plug-ins and found quite a few for Lightbox. I tried the following plug-ins: Easy Fancybox, Fancybox, Fancybox for WP, Fancyboxify, Lightbox Plus, Pinterest, Nexgen Gallery Optimizer. For each one I did the following:

1. Download and activate.
2. Select the ‘Lightbox’ option in Gallery -> Options -> Effects. I found that with ‘Fancybox Plus’ I could select ‘Lightbox’ or ‘None’, and both worked the same. I currently have it set to ‘None’. I didn’t try this with the other plug-ins.
3. Note that I would only activate one of the plug-ins at a time.

Here are the results

Easy Fancybox: This one works well. By default, the description is overlaid on the picture. There are options for where to put the description. You can configure it in Settings -> Media. This plug-in works for gallery, tag gallery, and albums.

Fancybox: The description is outside the picture. I don’t care for the look of it. It works with the tag gallery. I didn’t find a way to configure anything with it.

Fancybox for WP: This is nice with a lot of options. It would be great except for one showstopper: it doesn’t show the description of the photo. Instead, it shows the title. So, all of the description info that I have in NextGEN, and also the EXIF display (see below) doesn’t work.

Fancyboxify: It dosen’t integrate well with NextGEN. It just shows one picture. There is no ability to navigate between pictures, and it doesn’t show the description. I didn’t find the GUI for configuring it. When hovering over the picture there is a ‘+’ sign, and clicking results in zooming the photograph.

Lightbox Plus: The picture is much too large, and I didn’t find any GUI settings to configure it. I think it requires sizing the picture correctly before downloading, whereas the others resize automatically. Some of them have a GUI input that allows you to change the size of the photo.

Pinterst: This one is nice, except the picture is too large. I didn’t’ find a way to configure it.

Nexgen Gallery Optimizer: Same as Fancybox. Doesn’t work with the tag gallery. For $15, you can get a version that works with all shortcodes.

CONCLUSION: I decided to use ‘Easy Fancybox’.

The next thing I will do, when I get around to it, is figure out how to make the ‘Highslide’ effect work, and decide whether I like that better.

EXIF Data on NextGEN Gallery Images

I wanted to show some of the exif data for the photographs, such as the date, focal length, shutter speed, and aperture. ‘exif’ stands for ‘exchangeable image format’, and its a standard format for including a bunch of data with your photograph. You can configure NextGen Gallery to show exif data by using the plugin options, but the results aren’t what I wanted. Instead, I customized the Clearcreek theme so that it will show the exif data. Here’s what I did:

1. Create a directory under themes/clearcreek called nggallery
2. Copy gallery.php from nextgen-galllery/view to the new directory.
3. Edit gallery.php in the Clearcreek as shown below

In gallery.php there is a loop that goes through all the pictures. I added the following code (I highlighted the added/changed code):

<?php foreach ( $images as $image ) : ?>
<?php
// 2012.08.29. Joe Lester. Add these lines for exif data. For the options look in meta.php function ‘get_common_meta()’
$meta = new nggMeta( $image->pid );
$exif = $meta->get_EXIF();
//if ($exif[‘flash’] = “Fired”) {$flash = “, Flash Fired” }
//else {$flash = “”};
$text_display = $image->description.”  “.$exif[‘created_timestamp’].”, “.$exif[‘camera’].”, “.$exif[‘aperture’].”, “.$exif[‘shutter_speed’].”, “.$exif[‘focal_length’].”, ISO “.$exif[‘iso’].”, Flash “.$exif[‘flash’] ;
?>

Then I used $text_display for the image description:

<!– 2012.08.29. Joe Lester. Use $text_display instead of $image->description –>
<a href=”<?php echo $image->imageURL ?>” title=”<?php echo $text_display ?>” <?php echo $image->thumbcode ?> >

NextGen provides a standard mechanism to customize it for a particular theme. Unfortunately, it didn’t work, so I resorted to the above. The standard way provided by NextGen is to create a custom php for your template, and name it gallery-clearcreak.php. Typically you would copy over gallery.php, rename it to gallery-clearcreek.php, and then add the customization. Then, in the shortcode that adds the gallery to the post you include the line ‘template=’. For example:

<nggallery id=x template=clearcreek> (replace <> with []).

This worked great for the gallery, but it didn’t work for the tag gallery or albums. For the tag gallery I found a link that described how to fix the problem (http://wordpress.org/support/topic/plugin-nextgen-gallery-nggtags-caption ). I did what it suggested and it worked. It requires modifications in the NextGen Gallery code (rather than in my theme code). However, I tried various things for the album, and never got it to work. In the end, I just used gallery.php. It is fine for me since I want the exif in all my photos regardless of the theme. The concept of using ‘template=’ would be needed if I wanted to sell my theme and make millions. I’m not doing that, so it’s OK. I would settle for a few thousand though.

If you are interested, here is the complete gallery.php file: gallery.php