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!