NextGEN Gallery: Menu Link to Tag Gallery, Lightbox Effects, and Show Exif Data

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

Share this post:
This entry was posted in Web Development. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
  • Would you like to receive an email when a new post is added to this site? Click here.

7 Comments

  1. Renzo
    Posted December 23, 2012 at 12:41 am | Permalink

    I edited all php as per your instructions, but I only get a blank fileds instead od exif data,

    Can you upload a file that we can download to study the edits?

    Regards,

    Renzo

    • Joe
      Posted December 24, 2012 at 10:29 am | Permalink

      Sorry it didn’t work for you. I updated the post with a link to the modified gallery.php file. I hope it helps.

  2. Brett Wilson
    Posted August 7, 2014 at 2:05 pm | Permalink

    Any idea how to get this to work with the most recent version of NextGen Gallery. Did exactly what you said and it doesn’t work at all. Appears the NextGen gallery folks want it that way, have changed things and it no longer works.

    • Joe
      Posted August 13, 2014 at 6:13 pm | Permalink

      Brett: Sorry you had the issue. I too have a problem with the new versions of NextGen. Photocrati Media took over NextGen from its original developer (Alex Rabe). Photocrati then completely rewrote the software. This rewrite was, in my opinion, a complete disaster, and caused huge problems for thousands of NextGen users. Thousands of sites don’t work with the new version, and mine is one. You can go to the support page and see all the complaints. Many, many, sites have dropped NextGen or not updated because of this.

      Needless to say, I was very disappointed with this. I really liked NextGen, but Photocrati has broken it for me, and I now must find a new solution. I spent some time trying to get it to work with the Photocrati version, and made some progress, but I need more time to work on it. I submitted several issues on the NextGen support page, and none were responded to by Photocrati. They were so overwhelmed by all the complaints and problems that they can’t respond to them all. For now, I have just kept the old version that still works.

      I have three choices:
      1. Get the new version to work. This will take quite a bit of my time, I think. The reason that I chose NextGen was so I wouldn’t have to spend time on it. But, I may do this in the future.
      2. There is another version of NextGen gallery called NextCellent Gallery that has been created because of the Photocrati disaster. They started with the working NextGen version and are maintaining it and updating it. I could move to this version.
      3. Find some other gallery software. The problem is that I’d have to convert from NextGen to the new one. There are some I’ve found that will import from NextGen. I need to investigate this some more.

      It may be that if a person starts with the Photocrati version of NextGen, then they won’t have any issues. But those of us who used the old version are now in a bind since the new version has broken the customizations we made.

      Sorry I don’t have a good answer for you. I realize that going back to the last version isn’t a good solution. By the way, falling back to the old version isn’t so simple because they changed the database. I had to restore my site from a backed up version to make it work.

      As another note: I changed to a photo-browser approach after this blog post. See https://www.thelesters.net/2013/wordpress-tag-gallery-page-plugin-using-jstree-and-nextgen-gallery/. I will have to make this work with whatever solution I decide on.

    • Brett Wilson
      Posted August 13, 2014 at 6:46 pm | Permalink

      Joe,

      THANKS for the reply, didn’t’ figure there was a good solution but you certainly shed more light on the puzzle and I appreciate it. Not sure what the heck all do for now. I would like the EXIF data and also the ability to sell photos but there isn’t great solutions for either it seems.

      Thanks!

  3. maria
    Posted August 2, 2018 at 10:09 pm | Permalink

    Hi Joe,
    how do you get nextgen gallery options to display exif data (even if you didn’t achieve what you wanted this way) ? i have tried many things but couldn’t work it out!

    • Joe
      Posted August 4, 2018 at 2:59 pm | Permalink

      Hi Maria,

      I don’t have a good answer for you for a couple of reasons. One is that I haven’t used NextGen Gallery for quite a while (since Photocrati took over). I stayed on the old version for a long time, and then when to NextCellent Gallery. Another is that I don’t recall for sure how I got the Exif to show up, and I didn’t document it in my notes (darn!).

      However, I will try to give you some ideas. With the old NextGen gallery I used shortcodes to show the gallery, which I think you can still do. NextGen came with a template that shows EXIF data. To use it you put ‘template=exif’ in the short code as follows:

      [nggallery id=xxx template=exif] (xxx is the gallery id number)

      I think that the new NextGen supports the old shortcodes, or, you may be able to specify the template in another way (i.e. without shortcodes). I’m not that familiar with the new NextGen.

      Also, if I recall correctly, the different lightbox plug-ins that I tried (described in this post) displayed the EXIF data differently. Unfortunately, I didn’t document that well, and I don’t recall.

      Sorry for the vague response. Good luck to you. Let me know if the ‘template=exif’ works.

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*

  • Would you like to receive an email when a new post is added to this site? Click here.

  • Posts by Month

  • Categories


  • All Posts in Chronological Order: