Adding Title and Description to NextGen Gallery Thumbnails
Friday, 27 February 2009
So, in setting up a project for a recent client I came upon the question – what gallery do I use as a WordPress plugin to acheive my goals? After trying a few out, NextGen Gallery floated to the top of the list, but for the way I wanted to display the data it wasn’t perfect.
The primary issue was that on the view of an album where it shows all of the thumbnails in a grid, I wanted to see the title and description of the picture.
The fix is actually fairly simple.
In the nextgen-gallery/view folder is a file called “gallery.php”.
In that file, there is a little block of code which displays the thumbnails.
<?php foreach ($images as $image) : ?>
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $gallery->imagewidth ?> >
<div class="ngg-gallery-thumbnail" >
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" border="0" <?php echo $image->size ?> />
</a>
</div>
</div>
<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
<br style="clear: both" />
<?php } ?>
<?php endforeach; ?>
What we need to do is add this bit of code:
<p align="left" style="margin-left:0px;">
<strong><?php echo $image->alttext ?></strong>
<br />
<?php echo $image->description ?>
</p>
Right below the image tag.
Which is fine. For my template, I also wanted the top of all captions to be at the same height, even though I don’t use cropping on my thumbnails so that images are different heights (by default, this will display the text right under your image). So, I also created a little css and put it in NextGen’s style sheet:
.ngg-gallery-imagewrap {
height:175px;
}
And then wrapped the image in a div with the class of ngg-gallery-imagewrap.
My final code looked like this:
<?php foreach ($images as $image) : ?>
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $gallery->imagewidth ?> >
<div class="ngg-gallery-thumbnail" >
<div class="ngg-gallery-imagewrap">
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" border="0" <?php echo $image->size ?> />
</a></div>
<p align="left" style="margin-left:0px;"><strong><?php echo $image->alttext ?></strong><br />
<?php echo $image->description ?></p>
</div>
</div>
<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
<br style="clear: both" />
<?php } ?>
<?php endforeach; ?>
And you can see the result here.
Post a comment if you have any questions – I’m happy to help!
No. 1 — March 10th, 2009 at 12:03 am
I added the code into my gallery.php and it worked with my thumbnails but the spacing is all out of wack and the sidebar is way at the bottom of the page.
http://www.davidmeyerdesign.com/?page_id=65
Please help. I really want to have this feature work.
Thanks in advance,
David
No. 2 — March 11th, 2009 at 12:28 am
Just posting this to resolve the question – I emailed back and forth with David regarding his page, and he wrote this back “I think i fixed it today…I found a note that the latest version of the nggallery has a caption for thumbnail option as a template. Just using that for now.” I haven’t seen that solution yet, and otherwise it is just about playing with the CSS styles to make sure the work matches your template, and making sure all divs are opened and closed properly. If anyone else has trouble please post and I’m happy to look at it with you.
No. 3 — April 2nd, 2009 at 2:03 pm
Thanks for this tweak, it’s almost exactly what I need. Do you know if there is anyway of adding an e-mail link into the alttext? I’m trying to build a list of artists where the thumbnail is an example of their work. I’m using the title for the artists name and the alttext to describe the picture but I need to include contact information for each artist.
No. 4 — April 3rd, 2009 at 3:01 pm
Hey Dave… Now you’ve got me. The problem here is that the description field is used not only for the description, but also for the alt text of the image. You can’t put a link in without a bit of a serious rewrite, probably adding another description field to each image. I don’t have anything for you yet, but as soon as I come up with an answer I’ll post it here.
No. 5 — September 10th, 2009 at 11:52 am
I’m using the latest version of Nextgen Gallery and there are two issues that you could clear up for this dummy.
The shortcode is [ nggallery id=x template=caption ].
1)Where do I enter the various captions, are they in the alt description?
2)when I try this, the page shows up blank, no thumbnails.
TIA for any help.
Lew
No. 6 — September 11th, 2009 at 3:43 pm
Hey – I think your issue is the space between [ and ng.. try no spaces like this:
[nggallery id=x template=caption]
If you go to Gallery > Manage Gallery and click on the gallery, there are two boxes per picture – Alt & Title Text and Description – you put captions in the description field.
Let me know if this helps!
No. 7 — November 8th, 2009 at 2:13 am
Hi Justin – I finally found your help page today after 3 days of searching. Your example website is exactly what I have been trying to get nextgen gallery to do. ie display thumbnails AND large image when clicked, with captions.
I’ve tried image browser on/off – ON I get a caption with the large picture but thumbnails disappear. Off and no captions and a sort of light box effect where large picture displays and rest of screen goes dark.
I will try your captioning code, but please can you tell me the basic settings to get thumbs AND larger picture? I understand CSS/HTML but I have a feeling it’s in the settings of nextgen as well as perhaps two columns, one for thumbs one for large pic?
Rob Healey
Cairns
Australia
No. 8 — December 31st, 2009 at 12:21 pm
This tweak was awesome! Thanks for sharing it. I used it on a site I am working on for a furniture store and it made NextGen Gallery work so much better.
Thanks,
No. 9 — January 14th, 2010 at 3:41 pm
Hi there, to take the image title a little further do you know how I can display the image titles outside of the image browser, so the title for each image appears in my lefthand sidebar?
This is what I’m using but don’t know whats needed to add to this:
description ?>
Thanks
No. 10 — January 14th, 2010 at 3:43 pm
The code didn’t appear in the last post, it’s this inside php tags:
echo $image->description
No. 11 — January 14th, 2010 at 4:10 pm
Hi There…
Off the top of my head I’m not sure what you would need to do for that – I have programmers who can take a look at it if you want for $25 an hour (don’t imagine it would take more than that) and then if you wanted to be nice you could post the solution back here, or it would just be yours… I hate to have that as the only option, but I have a couple of big projects on my plate right now and just don’t have the time to sit down and troubleshoot it. Send me an email from the contact form (top right of page) if you want me to go ahead and take a look. Otherwise – any other readers have a good answer?
No. 12 — January 14th, 2010 at 4:14 pm
Hi there, thanks for the fast reply.
The site needs to go live by tomorrow so I’m frantically searching out a solution.
If I can’t get one I will definately get back to you
Thanks again
No. 13 — January 15th, 2010 at 12:27 am
Thanks for this! How do I get everything to line up though. I also tried to get all my thumbnails the same size but that didn’t work either.
No. 14 — January 20th, 2010 at 4:44 am
Hey!
It works great although i can not add links or format text off the description it displays all html.
Is there a way to properly format the text box
No. 15 — January 20th, 2010 at 6:19 pm
Hey Patrick,
I’m not sure I understand – I think that you can just edit the CSS of the text elements (find out what tags they have, and look it up in your CSS) and if not you could add your own css to format it. Is there something I’m missing?
Justin
No. 16 — January 21st, 2010 at 1:22 am
Thanks.
Depending on how much of a description there is (i have some quite long ones) some of my thumbs dont appear one after the other, left to right. I might have a row of 3, then only one on the next row might appear on the right etc. I pretty sure it has to do with the length of the description that is directly above a certain thumb.
Setting heights doesn’t really work, as i have huge gaps and so forth. I would like them just to run on.
No. 17 — January 25th, 2010 at 6:52 pm
Hello, what you have on your example website has a section of “additional views” — how did you go about doing this? I’m a sculptor trying to get a gallery of works online and am using wordpress and nextgen, but the problem I keep having is I want to show a gallery of primary images with the ability to look at secondary/etc images… was adding the “additional views” a straightforward task for someone with some basic coding ability?
No. 18 — January 25th, 2010 at 6:54 pm
er, on second thought, it doesn’t look like the additional views has the functionality I had thought it had.
No. 19 — February 1st, 2010 at 10:50 am
So, I couldn’t get my code to post correctly in comments, but if you are looking for the answer to Freaq’s question above about putting Nextgen Gallery image descriptions in the sidebar of of a site instead of inside the gallery code you embed on a page, I’ve posted the solution here:
Moving the Description in NextGen Gallery
No. 20 — February 1st, 2010 at 11:15 am
[...] this is in response to Freaq’s question on the post Adding Title and Description to Nextgen Gallery Thumbnails. He had a site and he wanted to display the image description in the sidebar, not in the main [...]
No. 21 — February 2nd, 2010 at 8:35 am
Can you tell me how you changed the pop-up image gallery, adding the thumbnails on the side, and the email and print links? Or is this an alternate plugin? thanks. Ken
No. 22 — February 8th, 2010 at 4:20 pm
Hey – I did that so long ago I can’t remember and I can’t be bothered to go in to the code and find out – if you want, what I can do is – you send me a request through the contact link on the top of the site and I’ll send you a zip of the plugin code that is doing that, and you can deconstruct it yourself? Does that work?
No. 23 — February 22nd, 2010 at 9:36 am
Hi there…
I just tried to add the title and decription like your example.
Unfortunately when I add a description it doesn’t wrap beneath the thumbnail on the page… and therefore pushes the next thumbnail along.
Am I doing something stupid???
No. 24 — February 22nd, 2010 at 10:51 am
First make sure your div and /div tags are all there – if that isn’t working, I’d use something like Firefox’s Webmaster Toolkit to examine your CSS – sounds like you have something in the style of your theme that might be messing up the CSS layout?
Justin
No. 25 — February 22nd, 2010 at 11:12 am
in my page I have:
<div id="ngg-image-pid ?>” class=”ngg-gallery-thumbnail-box” imagewidth ?> >
<a href="imageURL ?>” title=”description ?>” thumbcode ?> >
<img title="alttext ?>” alt=”alttext ?>” src=”thumbnailURL ?>” border=”0″ size ?> />
alttext ?>
description ?>
columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
(feel free to delete this if its making your page too messy!)
No. 26 — March 3rd, 2010 at 3:53 pm
I’m going to play around with this, it will be my 4th try at getting something I’m looking for in my gallery. Thanks for this info!
No. 27 — March 23rd, 2010 at 8:45 am
This is just what I was looking for, but how do I get it to work in the sidebar widget?
No. 28 — March 23rd, 2010 at 9:15 am
Thanks! This just came in handy for a project that I am working on. I generally don’t need to see the alt titles, but this one did and it was a quick fix. Thanks again!
No. 29 — March 23rd, 2010 at 10:33 am
I figured it out. It is in widgets/widgets.php
After this(line 328 in my file):
[code]echo $out . ''."\n";[/code]
Put this:
[code]echo "\n";
echo "$alttext\n";
echo "\n";[/code]
No. 30 — March 23rd, 2010 at 10:45 am
Hey – thanks for posting the fix!
No. 31 — April 27th, 2010 at 10:52 am
Massive thank you, did exactly what I was looking for. A life saver!
http://www.coops-photo.co.uk to see how it was used
No. 32 — April 29th, 2010 at 9:35 am
Hello Justin,
I am not a php pro like you but I want to output a next gen pic on a page who’s pic id was passed from another page who’s gallery id was passed from yet another page (whew!)
I don’t have any templates. just the nggallery.php and basic files.
can you tell me what code to write and where to place it?
specifically I need this page’s green links:
http://whatsnewonsale.com/fs_wp/collections-2/
to pass an id to this page:
http://whatsnewonsale.com/fs_wp/collections-2/collections-index/
who’s thumbnails pass a pic id to this page to display the pic with the pass id:
http://whatsnewonsale.com/fs_wp/detail-page/
or maybe you have better ideas.
again, I don’t know what to write in my code or where to place it.
thanks and any help would be greatly appreciated
BZ
No. 33 — May 25th, 2010 at 5:46 pm
[...] http://narasopa.com/seoblog/2009/02/adding-title-and-description-to-nextgen-gallery-thumbnails/ <h1><?php if($_GET['nggpage'] == “”) {echo $gallery->title;}?></h1> http://narasopa.com/seoblog/2009/02/adding-title-and-description-to-nextgen-gallery-thumbnails/ [...]
No. 34 — May 25th, 2010 at 7:02 pm
Thanks for the code, excellent work.
We are using the gallery to display products, and each product has a few options, we can write this in the description box, but this doesn’t format correctly, we tried using HTML but this doesnt parse using the code you suggested.
How would I get the HTML to render in the description field?
No. 35 — May 26th, 2010 at 1:50 pm
Can you post a link to the page this is happening on? Have you tried CSS styling for the text?
No. 36 — May 27th, 2010 at 5:25 pm
Question: I use nextgen for manage & upload my pictures and with each post i link it with Custom field.
ID, “newsPix”, true) != “”) { ?>
<img src="ID, “newsPix”, true)?>” alt=”"/>
Now im strugle to insert picture description?
No. 37 — June 26th, 2010 at 12:34 am
Thank you for this. I have been searching for just this solution all day!
No. 38 — June 26th, 2010 at 12:26 pm
Just found the solution to one of the questions I emailed you about – adding html to the description. Found it on the wordpress support site at http://wordpress.org/support/topic/393980. I still would love to know how you put the thumbnails on the right side in the popup. Thanks!
No. 39 — July 3rd, 2010 at 3:49 pm
Hey Annette – http://narasopa.com/downloads/nextgen-gallery.zip is an archive of the entire modified nextgen plugin that is running in the example – I don’t have time to dissect what I did to the code right now, but you should be able to pull it from this. This is quite an old version of nextgen as well – I should probably update this for the most recent version.
No. 40 — July 19th, 2010 at 9:16 pm
Thank you! Great post!
No. 41 — July 20th, 2010 at 1:09 am
Hi I added the code and it works, however; how can I get the description text to wrap?
Thks
No. 42 — July 20th, 2010 at 2:14 am
Can you send me a link to the page you are having trouble with? It should wrap – sounds like maybe a div is missing?
No. 43 — July 20th, 2010 at 6:32 pm
Hi Justin, here is the link. http://activewebdesign.com.au/wordpress/?page_id=6
No. 44 — July 21st, 2010 at 12:18 pm
It looks like you’ve put the code outside the imagewrap div – try putting it inside.
No. 45 — July 25th, 2010 at 8:14 am
thank u for the great idea that u shared, captions are seen below the thumbnail pics but in the picture in full size it doesn t appear.. how>?
is there any fix to it?
No. 46 — July 27th, 2010 at 11:02 am
Hi,
How would I control the color of the title? via css?
At the moment it’s white, but I need it to be black.
thanks
Sam
No. 47 — July 28th, 2010 at 4:52 am
All of the display can be edited using CSS, you’d just need to ad a class to the title tag in your code and then modify it via CSS.
No. 48 — July 29th, 2010 at 2:54 am
hi, thank you for the tip.
i just put ur code into css thumbnail. And, i can see the captions and descriptions in the thumbnail pics but in larger pics it disappears.. How to fix this?
No. 49 — July 29th, 2010 at 7:38 am
Hi,
Thanks for the reply. It seems it was handled by the post-page p in my themes css.
cheers
Sam
No. 50 — August 24th, 2010 at 3:49 pm
hi can you let me know how to change the size/colour of the font under the thumbnail, you help would be greatly appreciated Best Donna
No. 51 — August 26th, 2010 at 1:41 pm
[...] Il semble qu’il faille modifier le code du plugin. Voici l’article qui en parle: http://narasopa.com/seoblog/2009/02/adding-title-and-description-to-nextgen-gallery-thumbnails/ Pas besoin d’être un expert web pour le comprendre, don’t [...]
No. 52 — August 30th, 2010 at 8:12 pm
Hi thank you for this code it worked out of the box for a client site Im working on..
I just cut and pasted it looked at the results and was HAPPY..:)
Thanks again you da man!
DANNY
No. 53 — November 6th, 2010 at 6:59 pm
thanks a lot, this trick has really helped me a lot.!!
No. 54 — January 19th, 2011 at 12:28 pm
Brilliant! In-depth and at the same time simple explanation. Worked like a charm on my next-gen, and I really liked the CSS style addition!
No. 55 — February 10th, 2011 at 1:22 am
Outstanding!
My client HAD to have a description under his images at http://www.yosemitenatlparktours.com and I spent hours looking for a solution – yours is perfect! Thank you for helping to solve what one would think would be a natural part of the plugin right from the author.
I took your fix and altered it to fit my clients’ needs and he loved it!
You rock!
No. 56 — March 12th, 2011 at 4:15 pm
Thank you so much for this post. This saved me from searching out another plugin or doing another custom, time consuming solution. My issue was creating an inventory for a clients website I am building. This worked out PERFECT!
One thing I had to do was have the description of the image be on seperate lines. For instance:
Size: 4 in.
Product #: 24351346
Value Here
Value Here
To do this, I had to add some CSS to the paragraph tag: white-space: pre-wrap;
Thanks again!
No. 57 — March 13th, 2011 at 1:09 am
No problem – happy to help!
No. 58 — March 18th, 2011 at 5:12 pm
Heyyo!
Thanks so very very much. Wonderful bit of a rework here. One problem, if the caption is long, it doesn’t wrap to another line. Suggestions on how to do this??
Here’s the page : http://lonophoto.com/custom-prints/
thanks so much
Ashley
No. 59 — March 19th, 2011 at 11:25 am
Hey Ashley – so, I looked at your site, and without knowing how much you know about design I’ll give a short answer, if it doesn’t work let me know and we can look at other solutions – short answer – make sure the nng wrapper div is fixed width. Try that and see if that fixes the issue – it looks like it is just expanding out at this point. Just adjust the style with something like width:40px; (or whatever is relevant). Let me know if it works!
No. 60 — April 2nd, 2011 at 3:36 pm
Hi. I’m trying to do the same but on the albums, I want to display a description of each, below the image, but i don’t know how. Please help. Thanks.
No. 61 — April 5th, 2011 at 7:09 pm
Hey Javier – I’m really sorry – I am slammed for the next week and then am on vacation for two weeks so it would be May before I could look at this more closely!! Anyone else on this thread that can give a quick answer?
No. 62 — May 13th, 2011 at 3:15 am
I’ve took a look at the site you give for example and the Lightbox effect is broken on FF4 for me.
No. 63 — May 13th, 2011 at 9:27 am
This fix is a couple of years old at this point – I’ve just relaunched my company and branding at http://www.narasopamedia.com and am probably going to move this info over to http://wordpresshowto.org – when I do that I’ll update it and make sure it works…
No. 64 — June 29th, 2011 at 7:20 am
That was extremely handy, many thanks Justin!
No. 65 — July 4th, 2011 at 4:43 am
Thanks Champ!!
No. 66 — July 15th, 2011 at 6:05 pm
Thank you, this was very helpful!
No. 67 — August 15th, 2011 at 12:59 pm
Hi,
I am trying to find a way of displaying captions (description text) when people click on the image (large view) or during slide show BUT NOT under thumbnails.
Anyone know best way of doing this?
I have zero php code knowledge but i can copy and paste : )
marc
No. 68 — September 1st, 2011 at 3:16 am
this was really helpful!
thanks for this article 
No. 69 — September 7th, 2011 at 2:16 pm
Hi,
I’ve tried this a few times now. But no luck. Not sure what to say as I’ve followed your instructions exactly. I tried it a a few months ago and it worked then it disappeared as I was working on the site!!
I tried re-creating the thumbs to see if that was it but no luck. Am I missing anything?
Feel free to email if you can help, need a link etc.
any help is greatly appreciated.
Adam
No. 70 — September 7th, 2011 at 2:26 pm
If you need a link please email me as it is a private gallery on a wedding photographers site.
Thanks again.
No. 71 — September 7th, 2011 at 3:09 pm
Apologies!!
I’m using the gallery-caption.php template, I should have made the changes here rather than in gallery.php. must’ve done this right last time then lost the changes in an update.
Excellent tutorial!! thanks very much.
P.S. I do have another problem with the gallery which I’ve been trying to solve for a couple of months, it’s off this subject heading so I won’t post it here. I wondered if you might help me with it (you seem code savvy!). If your willing please email me and I’ll get back to you with problem.
No. 72 — November 26th, 2011 at 6:06 pm
Thank you so much for posting this! It worked for me!
Perhaps soon NextGen will include a back end option to display title and/or description in the thumbnail view. It seems like a rather glaring omission in what is otherwise a fabulous plugin.