Full Text

NextGEN imageOne of the hacks I put in place for my new site design was to get image titles to display when you click on an image in the gallery. This isn’t out-of-the-box functionality for the NextGEN plugin; the description (which you set manually in the gallery manager) is populated, but the image title is not. The solution lies in modifying the title attribute of the a tag generated by gallery.php. To see an example of this hack in action for images with and without descriptions, visit the Space Needle pictures gallery and click on the last two images in the set. One shows only the image title, the other shows title and description. Code after the fold.

Update 11.19.2010: Now with EXIF! (maybe)

 

Caveats/Notes:

  • This works for the thickbox effect. I don’t know if will work for other effects.
  • Directly editing the PHP files of plugins may cause problems when you update WordPress or the plugin itself. Do so at your own risk.
  • The bold tags look great, but I’m not sure how compatible they are; your mileage may vary.
  • Successfully tested on Firefox, IE8, Chrome (webkit).

PHP Code: Step 1
Find this code in wp-content/plugins/nextgen-gallery/view/gallery.php (line 38 in unmodified original version 1.3.5):

	
	<?php foreach ($images as $image) : ?>

Add the following code after the lines above:

    <?php 
    // BEGIN HACK

      // Case if description present
      if ( strlen($image->description) > 1 ) 
      { 

        // NEW EXIF hack  (11.19.10) 
           require_once(NGGALLERY_ABSPATH . '/lib/meta.php');
           $meta = array();
           $pdata = new nggMeta($image->path);
        // End EXIF hack 

        $newdesc = "" . $image->alttext .
        "" . " :: " . $image->description;

       // 11.19.10 -- append some EXIF data
         $newdesc .= " (" . substr($pdata->get_date_time(),0,10) . ")";
       // end append EXIF

      } 

      // Case if no description
      else { 
        $newdesc = "" . $image->alttext . "";
      }

    // END HACK	
    ?> 

PHP Code: Step 2

Replace the following line (line 42):

          <a href="<?php echo $image->imageURL ?>" 
          title="<?php echo $image->description ?>"
          <?php echo $image->thumbcode ?> >

With this:

          <a href="<?php echo $image->imageURL ?>"
          title="<?php echo $newdesc ?>"
          <?php echo $image->thumbcode ?> >

Explanation:
thickbox.js, a WordPress include, is the javascript that generates the image popup for NextGEN’s thickbox effect. It gets its information from the thumbnail href in the gallery and uses that information to populate picture data in the popup’s caption area beneath the picture. Specifically, the picture’s description is pulled from the title attribute of the image’s a tag which is, in turn, generated in gallery.php by the code above. Unmodified, the code only pulls the description, which you can set in the gallery manager area. By adding this code, you’re prepending the image name to the description and passing that to thickbox.js via the thumbnail title text. If no description is present, only the image title is passed to thickbox.

You can see how the new variable $newdesc can be manipulated to include any other data you want. For example, you could also append exif data and image size by appending $exif['created_timestamp'] and $image->size to $newdesc. To see what information is available to you, add the PHP function <?php var_dump($image) ?> inside the foreach loop and it will output all of the attributes of each image.

EXIF Update 11.19.2010:
After some messing around, I’ve sorted out a way to access the EXIF data, since the method provided by the developer doesn’t work. Let me know how this goes for you. The new code required to add EXIF data is now included above. The sample EXIF data I appended to $newdesc on line 18 is the date information. Here is the key for other data:

  • title: $pdata->get_META(‘title’)
  • caption: $pdata->get_META(‘caption’)
  • keywords: $pdata->get_META(‘keywords’)
  • timestamp: $pdata->get_date_time()
  • date stamp only: substr($pdata->get_date_time(),0,10)

Feel free to share any improvements, limitations, etc. in the comments.

  • Digg
  • del.icio.us
  • Google Bookmarks
  • Reddit
  • StumbleUpon
  • Technorati
  • Facebook
  • LinkedIn
  • Twitter
Posted in Code  |  71 Comments

71 Responses to “Displaying image titles in NextGEN Gallery for WordPress”

  • Tom says:

    Great work! Thanks!

  • Trip! says:

    Thanks so much!!

  • Great stuff, worked perfectly.

  • Michel says:

    Hey,

    Great Hack.
    I get an notice when I load the page.
    I don’t really know how to fix this.

    Maybe some help please!

    Notice: Trying to get property of non-object in /home/…/wp-content/plugins/nextgen-gallery/lib/meta.php on line 41

    No idea what this is and does!

    thnx.

    M.

  • Jeremy says:

    Michel –

    I don’t know either. Did it only start after you implemented the workaround?

  • Michel says:

    Jeremy -
    Yes right after.
    What I notice is that my footer div is now in my containter div and it copies the last image of the gallery 4 times and places it right after every other div.

  • Michel says:

    Oh my fault.
    The error comes from another hack I placed.

    Sorry.

    Great hack :-)

  • Thornton says:

    Hello,

    Just found this tip. I tried it, and it works. But now whenever I click on an image in a gallery, two slideshows pop up (one without the descriptions, and another with the descriptions). How do I get rid of the extra unwanted one?

  • Thornton says:

    Actually, I figured it out. It was the Highslide plugin that’s duplicating the slideshow. I deactivated it, and now everything works! Thanks again!

  • Curt says:

    I have tried to use this as it’s exactly what I want to do. I cannot get it to work though. I am using NextGen Version 1.9.8 and WordPress 3.4.2. Using jQuery library version 1.8.2 from Google instead of the one that comes with WordPress. No difference whichever jQuery I use. I have also deactivated all other plugins. Any ideas what could be wrong?

  • Curt says:

    Oops, found the answer. De-activate colorbox plugin and choose thickbox for the effect in the gallery options.

  • Jeremy says:

    Cool – glad you sorted that out. I only ever tested it with thickbox.

  • Ben says:

    Oh man, it took me about an hour to figure all this out. And then I couldn’t figure out why it wasn’t working, but then noticed that the part of your code that was

    $pdata = new nggMeta($image->path);

    Should have been

    $pdata = new nggMeta($image->pid);

    I guess maybe they updated the path image variable to be something else… anyhow, thanks for the hack!

  • Henry says:

    I have got the descriptions appearing on the larger image OK but the descriptions are coming up under the thumbnails too. Because they are more than several words long, the description is displacing the thumbnails. When the cursor hovers over the thumbnail the short title appears as the alt_text which is great.

    How can I not have the longer description under the thumbnails but still appear on the larger image?

    I am sure that this is an isty bitsy change in the code, but what is it I should alter?

    Thanks for all you have done, I (and many others) appreciate it.

    Henry

  • Jeremy says:

    Not sure, Henry; I don’t remember encountering that problem. I don’t have any titles on my thumbnails at all (see, e.g., http://j.modjeska.us/?page_id=70&album=public&gallery=larrabee-state-park-07-11-2009).

    Do you have an example you can share?

    Glad this code continues to be helpful.

  • Temitope S says:

    hey guys, as of the date of this comment try this.

    1. go to plugins, and choose the editor (from dashboard)
    2. choose this plugin and go to the following file – nextgen-gallery/view/gallery-caption.php

    3. (not sure if html shows up) replace [caption ?>]
    with [<?php echo "".$image->alttext."". $image->caption ?>]

  • Robertino says:

    I’m using NextGen Gallery version 2.0.21.

    Can I apply the following code?

    Thanks!

  • Hana says:

    Hi everyone,

    I would like to try your way to solve this problem, but I have no folder named view. And a file named gallery.php does not exist.

    I am using the latest version of both, Plugin and WordPress (2.0.0.33/3.7.1), so I think thats the point. But how can I make the same thing happend with my versions?

    Can you help me?

  • ryan says:

    i don’t suppose you want to update this to work with the latest version of nextgen….? it looks like they reworked some stuff and the basic hack doesn’t seem to work anymore; i’m sure it’s something minor that i can’t figure out…

    a thousand thanks if you do!

  • Sheona says:

    Ditto the comment from Ryan (Jan 2014) – how can you hack the current version of NextGen to get titles to show?

  • Jeremy says:

    New version looks really nice; it appears they’ve done a complete overhaul. I’ll have to check it out and see if there’s a way to get titles in there. I’m really surprised that isn’t supported out-of-the-box. Seems like such a simple and obvious feature.

Leave a Reply