One 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.
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 )
{
$newdesc = "" . $image->alttext .
"" . " :: " . $image->description;
}
// 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 (except exif data; you’re on your own there).
Feel free to share any improvements, limitations, etc. in the comments.
This is the personal website of Jeremy Modjeska.
Most code, content, and design, including custom WordPress theme
bartlet 1.0
are © 2009 by Jeremy.
License and copyright for all original material is at
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!