Displaying image titles in NextGEN Gallery for WordPress

NextGEN imageOne of the hacks I put in place for my old site design showing image titles 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.


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):

Add the following code after the lines above:

PHP Code: Step 2

Replace the following line (line 42):

With this:

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.


73 Comments » for Displaying image titles in NextGEN Gallery for WordPress
  1. Roger Moffat says:

    Thank You Thank You Thank You!!!!!!!!

    I’ve made one small change to the above

    “” . ” ” . $image->description;

    instead of

    “” . ” :: ” . $image->description;

    to put the Title on the first line, and the description on the next line(s).

    Again THANK YOU!!!!!

    Roger

  2. Roger Moffat says:

    OK that didn’t work out – instead of the :: I used a break

    br / with the brackets around it

    to put the title onto its own line.

  3. Jeremy says:

    Thanks Roger. It looks like you got it working quite nicely on your site. I’m glad I could help.

  4. Sadie says:

    Thanks for this solution!

  5. Steffen says:

    Now the Thickbox exactly displays what I want, thank you very much!
    Steffen

  6. kaze says:

    and how the show EXIF data?

  7. Jeremy says:

    Thanks Sadie & Steffen. Glad to help.

    kaze — not sure about EXIF data. I was not able to get this to work using the method supplied by the plugin’s author. You might check on the wordpress support forum (maybe this one: http://wordpress.org/support/topic/241988) to see if anyone else has had success with this.

  8. My descriptions are displaying behind the images? Any idea how to fix this?
    http://rcpopart.com/blog/?p=993

  9. Dennis says:

    Wow – you made my day. I’ve been wanting to make this modification. And by dropping the “::” and adding a break tag, I was able to have the title on the top line and description underneath. Thanks so much!

  10. Leo says:

    Hi, didn’t work for me, same as Robbie text shows behind images not below, what should i change to make it work. Thanks

  11. Jeremy says:

    Robbie, Leo: Sorry guys, I’ve been super busy recently. Robbie’s link is 404 now so I can’t see what’s going on. Still, I can almost guarantee it’s a stylesheet issue. Post a link or email one to me (email link is in the footer) and I’ll take a look.

    Dennis: Glad it worked for you!

  12. Laura says:

    Thanks – just what I needed!

  13. Michael Miller says:

    Do you suppose it would be possible to have the descriptions pop up only in the thickbox popup, not under the image thumbnail when normally viewing it?

  14. Jeremy says:

    Michael: Try using $image->alttext for the thumbnail caption. That should only include the title.

  15. Hi,

    Done all the code which has worked great, but my client is adding loadsa of images at once, and I didn’t really want him going through and adding a description to each image.

    Is there any way the it can automatically pull through the alt text / image title automatically insteda of the description. Have a look here. The first image has a description written to prove that the hack is working, but I need the image title really http://jackeames.com/client-area/new-shoot/

    cheers for your help and thanks for the hack

  16. Jeremy says:

    James: I’m not sure what you’re trying to do. Either way, doesn’t the client have to manually enter the data for the description somewhere? NextGEN can pull some data directly from the image without any manual setting in the gallery manager, but I am not clear on how a description would be part of that dataset.

    At any rate, Description (image->description) is exclusively a gallery manager field. Title and Alt Text (image->alttext) will use the user-set title, or if none exists, the name of the image (e.g., 12345.jpg).

    There are other data available to NextGEN and you can use the var_dump($image) function to see them. I don’t know if any of them will achieve what you’re asking for. Here’s a sample data dump from one of my images.

  17. Cheers Jeremy, I’ll try and be a bit clearer, sorry.

    Basically, my client is going to uploading loads of images at once and so I didn’t want him to have to do anything.

    Ideally, I want him to upload his images and beneath each thumbnail, it displays the image title.

    And also, as people view the image in Lightbox mode, for it to display the image title there as well.

    Your hack makes it so that is brings the description through automatically, but I didn’t want my client to have to go through each image adding a description.

    Any clearer?

    Cheers

  18. Jeremy says:

    James: I think I understand what you’re asking. I still don’t see any way to pull a description from the image data itself (where would it come from?). The only fully-automated option (no manual input) is to allow NextGEN to pull the image name as the title, which is what the above solution does if no custom title exists.

    See, for example, the third image in the set at: http://j.modjeska.us/?page_id=70&album=1&gallery=9. On that image, I entered no manual title or description, so with the hack in place the title is displayed as “img_2750”. Since the image extension (.jpg) is removed automatically, that means if you give your images good names before uploading them, you’ve got the solution you’re after. Right?

    I can’t speak to whether it works in Lightbox; I have not experimented with that mode. In theory it should though.

  19. Yihan says:

    Thanks Jeremy! Worked perfectly! I used instead

  20. nerdnerd says:

    Hi there,

    First of all, thanks for the tip! I have implemented this, with success, with Shadowbox 3.0.3.2. It works splendidly with galleries. However, I have a small problem. When I use nextgen gallery to insert a SINGLE picture instead of a gallery into a post, the title does not appear, only the description does (i.e. default behavior)

    Clearly the mod works only for galleries and not single pics, so my question is, where is the location of the coding for “single pic”, and is it possible to apply the same steps as above to the coding for “single pic” so that the title can appear as well.

    Thanks in advance!

  21. nerdnerd says:

    Okay, cancel that. I’ve managed to solve the problem myself! But if anyone wants to know (and I imagine it MIGHT come in handy, for uniformity in presentation of both galleries and single pictures in posts)

    The php file in question is singlepic.php

    Basically, apply code in Step 1 after the line

    so it appears like

    description) > 1 )

    yadayada

    and as Step 2: edit

    title=”linktitle ?>

    to

    title=””

    And it SHOULD work.

    Sorry if I sound noob, I’m kinda lousy at web designing :X

    Right, I’m off!

  22. yourtd says:

    Worked great for me.
    Thanks Jeremy.

  23. carsten says:

    hello Roger,

    I have a other problem and I can’t find a solution!!!
    I just want that my user can download the fullsize photo if they click on the thumbnails photos … is there a simple solution ???

    Thanxx
    Carsten

  24. Sol says:

    I confirm that this works in Lightbox (Balupton edition) too

    Thanks for the hack!

  25. Derek says:

    The exif data is not directly available. However the following code will obtain it for you:

    // let’s get the meta data
    $meta = new nggMeta($image->pid);
    $exif = $meta->get_EXIF();
    if(!$exif)
    $exif = $meta->get_saved_meta();

    You can then do something like:

    $newdesc .= $exif[‘created_timestamp];

    Hope that helps.

  26. Fantastic put up, appreciate the style of your blog as well.

  27. Brett says:

    Derek,

    Can you be more specific on the EXIF data? Where do you put that code? Do you have the exif data displaying/working for you?

    Brett

  28. Jeremy says:

    EXIF Update

    For Brett & anyone interested in EXIF, I tried to implement Derek’s code but was not successful. This undoubtedly says more about me than about him. Anyway, I was able to get something different to work, at least enough to pull the timestamp information. I’ve added the additional “exif hack” to the code above. It amounts to three lines of code I swiped from the NGG’s /admin/functions.php file.

    Note the “key” I included below the code for how to access the various EXIF data points. So, for example, if you want to append the entire timestamp, you could do:

    $newdesc .= $pdata->get_date_time();

    Good luck!

  29. Roger S. says:

    Just a quick (I hope !) question-is there anyway of styling the now supplied title in just the Thickbox? I wasn’t sure that I saw the div tags for that-

    Thanks

  30. Jeremy says:

    Hi Roger. I was able to add bold tags to it, as shown in the example, so it seems like you could probably swap those out for div tags and define a style for it. Easiest way is to try it! Good luck 🙂

  31. Roger S. says:

    Jeremy-
    Thanks for the quick response. I didn’t even see those! You know you’ve been writing CSS too long when you can’t even see the inline styling-lol. Thanks for pointing out my oversight. This code is awesome and does exactly what I was looking to do-many thanks!

  32. Greg says:

    Hi Jeremy,

    Thanks for these hacks! They work great. I do have a problem with displaying the EXIF data though.

    When I follow your code the date is displayed but it is always 1970-01-01. In NextGen interface I can also see the META data and none of my images has this date. So something is still not ok with me when trying to access the EXIF data. Do you have any idea what can be wrong?

    • Jeremy says:

      Hi Greg. Thanks for the comment. I honestly have no idea about the EXIF data; I haven’t worked with it at all, but just cobbled that code together from other sources. If you want to send me a sample image with EXIF data I’ll take a look, but it might take me a while to get around to it. Lots of stuff going on, hence the utter neglect of this blog for several months 🙂

      Cheers,
      Jeremy

  33. Nelson says:

    Thank you very much for sharing this hack =)

  34. Hi Jeremy,
    Maybe you could help us. We would like to change our title as it explained on this topic http://wordpress.org/support/topic/plugin-nextgen-gallery-page-title-picture-1-etc we have tried to put the code on line 198 but it doesn’t, do you have any solution ?
    Thanks

    • Jeremy says:

      Hello Tablette Tactile. Page titles (which is what that thread is about) are generated by the function “rewrite_title” in /lib/rewrite.php around line 178-193. If you just want to change the way they are displayed (e.g., “Album 1

  35. Joyce Reyes says:

    Hello Jeremy! I’ve been trying to make my wordpress page more dynamic and I have absolutely NO IDEA how to even customize my page. I just type, then add it to my page. Whatever style I chose from the themes, that’s the totality of my BLOG STYLE. I guess what’s written is the main feature of my blog so I don;t really focus on anything else. Plus, I just like writing. Do you have a guide for blog dummies like me???? Please help. Just simple modifications, you know that kind of stuff. Please??? Thank you!

  36. Gemma says:

    Thank you so much… worked a treat.

    For example when creating a page [nggallery id=36] – the page title / description shows up in the thick box 🙂

    However I am also using wordpress simple paypay shopping cart,
    for example [nggallery id=36 template=wp-eStore])
    as soon as I add this.. the page title / description disappears from the thickbox.

    Any idea on how the title / description can be displayed whilst also using the wordpress simple paypal cart, your help would be very much appreciated.

    Thank you very much 🙂

  37. Gemma says:

    Sorry I meant photo title / description disappears from the thickbox (not page title / description).

  38. Jeremy says:

    Joyce, you may want to start with this: http://codex.wordpress.org/Site_Design_and_Layout. You may also want to look at WordPress support; there are lots of knowledgeable people there: http://wordpress.org/support/. I haven’t personally created any guides or anything beyond what’s on my sad little neglected blog here. Good luck!

  39. Pier says:

    Thank you Jeremy, it was exactly what I needed and it works perfectly.I’m very new at this but it is a first step, there is one thing with which you maybe can help me, the last line”image is half out of the box. Can that be a justed or left out completly.If you can help me great, if not thanks a lot anyway!!!!

    • Jeremy says:

      Hi Pier. Thanks for the comment. I don’t really understand the problem you’re describing. Do you have a link to an example?

    • Jeremy says:

      Thanks for the continued comments, guys. Some quick replies and updates:

      Pier‘s issue with the lost text was solved by enlarging the whitespace in the ThickBox caption area, thereby allowing more space in which to display EXIF data. Since the CSS for that whitespace below the image is auto-generated, the solution was to add this style to his main stylesheet with the “!important” marker:

      Matt: I haven’t played with the Widget. If you find a solution, please post it here and I’ll include it in the main post!

      Chris: Thanks for the tip. I’ll give this a try when I get a chance. It would be nice if WP plugins respected manual code changes by the user, the way phpBB does.

      Massimo / Max: Not sure I understand the question. If you just want to get rid of the caption and keep only the title, you can cut out the $image->description bit. So, change lines 14-15 of my code above to this single line of code:

      I’ve just verified that this hack continues to work with the new version of NGG, 1.8.3. Don’t forget to update your NGG database after upgrading the plugin!

      Cheers,
      Jeremy

  40. Pier says:

    Hi Jeremy, I can’t send you a link because I’m not finished yet with my new site and because I can’t add an image here, how it looks like, I sent an email to the adres below with a screen image attached. I hope thats Ok and thanks again

  41. Matt says:

    Do you know if it’s possible to achieve a similar effect with the widget part of NextGen? Specifically, how to go about showing the gallery title when using nggDisplayRandomImages?

  42. Chris Hunt says:

    Thanks for figuring out how to do this, it’s amazing that such a full-featured plugin doesn’t offer a way of doing this out of the box.

    However, I’m always nervous of editing the files in a plugin’s directory in case they get overwritten when the plugin is upgraded. Fortunately, I’ve discovered that you don’t have to! What you need to do is this…

    Create a new directory in your wordpress theme called “nggallery”, so the full path will be something like:

    wp-content/themes/my_theme/nggallery

    Copy the original gallery.php file discussed in the article above into this new directory

    Edit your new copy as described – Nextgen will use this copy in preference to its own.

  43. Massimo says:

    HI j!
    This hack works very well, even for me (I’m a newbie of php)
    I would like to display the title instead of caption, but only whe the image pops up after you click on it.
    Do you think is possible?
    thanks.

    Max – Italy

  44. Akh says:

    Hi Jeremy,
    Is it possible to change position of the Image description to the left- or right side of the image(in Single-Mode, not Thumbs) ….
    ….and how…where?

    Thanks

    Arch

  45. Tom says:

    Great work! Thanks!

  46. Trip! says:

    Thanks so much!!

  47. Great stuff, worked perfectly.

  48. 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.

  49. 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.

  50. Michel says:

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

    Sorry.

    Great hack 🙂

  51. 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?

  52. 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!

  53. 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?

  54. Curt says:

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

  55. 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!

  56. 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

  57. 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 ?>]

  58. Robertino says:

    I’m using NextGen Gallery version 2.0.21.

    Can I apply the following code?

    Thanks!

  59. 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?

  60. 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!

  61. Sheona says:

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

  62. 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.

  63. Brett says:

    Jeremy,

    Would be cool if you could get the EXIF data to display with the new version. Your correct on a complete overhaul and all my old data doesn’t work anymore since I updated to the most recent NextGen version. I’ve tried everything to get it to work and no luck. Agreed sure seems simple and obvious?

  64. Tripura says:

    I had a problem at one vitegtne. I made the change on the file gd.thumbnail.inc.php. I still have the same problem. With the error message: Fatal error: Allowed memory size of 33554432 bytes exhausted (tried to allocate 920 bytes) in / htdocs / wp-content / plugins / nextgen-gallery / lib / gd.thumbnail.inc.php on line 436

  65. jzb says:

    I know this is very old but it is seemingly the exact information I need and can’t find anywhere else. Only, I followed your instructions and it didn’t work. Are they still valid and I made a mistake or is it outdated and I should move on in my search? PS. I am not a coder so I was really hoping it would be this easy…

1 Pings/Trackbacks for "Displaying image titles in NextGEN Gallery for WordPress"
  1. […] . $image->alttext . "</b>"; } // END HACK Inspiriert durch: http://j.modjeska.us/?p=113 Live Beispiele: GalerieKategorie: Photographie, WordPress — Von: adminTags: Exif, Geotag, […]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.