Displaying image titles in NextGEN Gallery for WordPress
One 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):
1 2 |
<!-- Thumbnails --> <?php foreach ($images as $image) : ?> |
Add the following code after the lines above:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?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 = "<b>" . $image->alttext . "</b>" . " :: " . $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 = "<b>" . $image->alttext . "</b>"; } // END HACK ?> |
PHP Code: Step 2
Replace the following line (line 42):
1 2 3 |
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> > |
With this:
1 2 3 |
<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.
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
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.
Thanks Roger. It looks like you got it working quite nicely on your site. I’m glad I could help.
Thanks for this solution!
Now the Thickbox exactly displays what I want, thank you very much!
Steffen
and how the show EXIF data?
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
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!
Hi, didn’t work for me, same as Robbie text shows behind images not below, what should i change to make it work. Thanks
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!
Thanks – just what I needed!
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?
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
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
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.
Thanks Jeremy! Worked perfectly! I used instead
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!
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!
Worked great for me.
Thanks Jeremy.
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
I confirm that this works in Lightbox (Balupton edition) too
Thanks for the hack!
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.
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
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!
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
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 🙂
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!
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?
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
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
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
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!
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 🙂
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!
Sorry I meant photo title / description disappears from the thickbox (not page title / description).
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!
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!!!!
Hi Pier. Thanks for the comment. I don’t really understand the problem you’re describing. Do you have a link to an example?
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
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
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?
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.
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
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
Great work! Thanks!
Thanks so much!!
Great stuff, worked perfectly.
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.
Michel —
I don’t know either. Did it only start after you implemented the workaround?
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.
Oh my fault.
The error comes from another hack I placed.
Sorry.
Great hack 🙂
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?
Actually, I figured it out. It was the Highslide plugin that’s duplicating the slideshow. I deactivated it, and now everything works! Thanks again!
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?
Oops, found the answer. De-activate colorbox plugin and choose thickbox for the effect in the gallery options.
Cool – glad you sorted that out. I only ever tested it with thickbox.
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!
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
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.
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 ?>]
I’m using NextGen Gallery version 2.0.21.
Can I apply the following code?
Thanks!
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?
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!
Ditto the comment from Ryan (Jan 2014) – how can you hack the current version of NextGen to get titles to show?
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.
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?
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
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…