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.

  • Google Bookmarks
  • Reddit
  • Facebook
  • LinkedIn
  • Twitter
Posted in Code  |  73 Comments

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

  • 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

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

  • Jeremy says:

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

  • Sadie says:

    Thanks for this solution!

  • Steffen says:

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

  • kaze says:

    and how the show EXIF data?

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

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

  • 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!

  • 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

  • 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!

  • Laura says:

    Thanks – just what I needed!

  • 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?

  • Jeremy says:

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

  • 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

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

  • 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

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

  • Yihan says:

    Thanks Jeremy! Worked perfectly! I used instead

  • 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!

  • 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!

  • yourtd says:

    Worked great for me.
    Thanks Jeremy.

  • 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

  • Sol says:

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

    Thanks for the hack!

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

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

  • 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

  • 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!

  • 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

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

  • 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!

  • 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

  • Nelson says:

    Thank you very much for sharing this hack =)

  • 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 << Gallery 1 << Photos") you can edit that code, for example by changing 'Album' to 'Library' on line 187. My guess is you want to do more than that; perhaps display the album name instead of the album number. If that's what you're after, it will require adding a query to pull the gallery name, similar to the queries ending at line 173. Unfortunately I can't tell you off-hand what that query would look like, but I'll try to remember to take another look next week if I have time. Looks like the plugin author left a "TODO" for himself on line 175 to add that functionality. I am using an older version of NGG, so it's possible there are more queries available now.

  • 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!

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

  • Gemma says:

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

  • 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!

  • Jeremy says:

    Hi Gemma. I’ve never used the PayPal cart plugin, so unfortunately I haven’t got any idea how to help with that. You might try the WordPress support forums though (http://wordpress.org/support/). Good luck!

  • […] . $image->alttext . "</b>"; } // END HACK Inspiriert durch: http://j.modjeska.us/?p=113 Live Beispiele: GalerieKategorie: Photographie, WordPress — Von: adminTags: Exif, Geotag, […]

  • 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?

  • 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

  • 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?

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

  • 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

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

    #TB_caption {
    height: 35px !important;
    }

    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:

    $newdesc = "<b>" . $image->alttext . "</b>"

    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

  • 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

Leave a Reply