A few days ago I decided that my pictures in posts needed captions. For all my images I use the excellent plugin NextGen Gallery. In the forums a few times the question had popped up on how to add captions, so I decided to write a little how-to. I had already heavily modified some of the ngg-files, so I thought this one shouldn’t be too hard. Turned out I was right. God, Allah and Buddha know that doesn’t happen too often…
Download The Files
Alright, open your favorite FTP program and download from your ../wp-content/plugins/nggallery/ folder the file nggfunctions.php and from the ../wp-content/plugins/nggallery/css/ folder the CSS file that you specified under the admin-tabs gallery - style. If you haven’t already renamed that file at some earlier point then I suggest you do that now, so it doesn’t get overwritten when you upgrade nggallery. You could use something like mydomain.css. Now upload that new CSS file and set it as your new stylesheet in the admin area.
Modifying The Files
Open nggfunctions.php and search for the function nggSinglePicture. Now look for this bit:
case 'left': $float=' style="float:left;" '; break; case 'right': $float=' style="float:right;" '; break;
and change it to this:
case 'left': $float=' style="float:left;width:'.$width.'px;" '; case 'left': $caption='<p class="singlepic-caption" style="width:'.$width.'px;" '.stripslashes($picture->description).'</p>'; break; case 'right': $float=' style="float:right;width:'.$width.'px;" '; case 'right': $caption='<p class="singlepic-caption" style="width:'.$width.'px;">'.stripslashes($picture->description).'</p>'; break;
This makes sure that captions get only added when the picture has a float attached to it. I didn’t want any captions on my centered images. If you do then just change it to:
case 'left': $float=' style="float:left;width:'.$width.'px;" '; break; case 'right': $float=' style="float:right;width:'.$width.'px;" '; break;
So far so good. Now look for this bit:
// add fullsize picture as link $content = '<a href="'.$picture->imagePath.'" title="'.stripslashes($picture->description).'" '.$picture->get_thumbcode("singlepic".$imageID).' >'; $content .= '<img class="ngg-singlepic" src="'.NGGALLERY_URLPATH.'nggshow.php?pid='.$imageID.'&width='.$width.'&height='.$height.'&mode='.$mode.'" alt="'.stripslashes($picture->alttext).'" title="'.stripslashes($picture->alttext).'"'.$float.' />'; $content .= '</a>';
and change that to:
// add fullsize picture as link $content = '<div'.$float.'><a href="'.$picture->imagePath.'" title="'.stripslashes($picture->description).'" '.$picture->get_thumbcode("singlepic".$imageID).' >'; $content .= '<img class="ngg-singlepic" src="'.NGGALLERY_URLPATH.'nggshow.php?pid='.$imageID.'&width='.$width.'&height='.$height.'&mode='.$mode.'" alt="'.stripslashes($picture->alttext).'" title="'.stripslashes($picture->alttext).'" />'; $content .= $caption; $content .= '</a>'; $content .= '</div>';
Here I put the picture and the caption in a < div >, moved the float from the image to the < div > and added the caption.
UPDATE: Moved the $caption into the link. Mainly, this is useful if you’re running Highslide.
Exchange $caption with:
'<p class="singlepic-caption" style="width:'.$width.'px;">'.stripslashes($picture->description).'</p>';
if you want to add a caption to every singlepic and not just the ones with a float attached.
The only thing left to do is adjust the CSS so the caption looks good. Open the CSS file and look for Single picture. Add this bit:
.singlepic-caption{text-align:center;padding:3px 0 3px 0;margin:0 0 4px;color:#fff;background:#999;font-size:80%;border:1px solid #999;} a:hover .singlepic-caption{text-decoration:none;}
Change the colors to your liking. You might want to set the bottom margin in .ngg-singlepic to 0 so there is no gap between the image and the caption.
Now upload all the files and you should be all set. If you run into any trouble then let me know. Enjoy!!
Tags: Caption, NextGen Gallery, Tutorial
Alex Rabe - 7 January 2008 @ 2:52 PM
Mhh, könnte ein Kandidat für die nächste Version sein. Die Caption Sache ist auch jeden Fall ne gute Idee. Danke für den Beitrag…
traveljunkie - 8 January 2008 @ 12:22 AM
Das waere fantastisch Alex!
nelson d'aires - 5 February 2008 @ 8:23 PM
Hi!
do you know if in the beta 0.80 version this exact modify is still correct?
i ask this to you because now (0.80) i notice the code is different:
case ‘left’: $float=’ ngg-left” ‘;
break;
case ‘right’: $float=’ ngg-right” ‘;
break;
thanks!
traveljunkie - 9 February 2008 @ 7:38 AM
No, in 0.80 things are different. I am still modifying things and it’s a bit harder now. Once I have things sorted I might post an update on my blog. Not sure though as I have loads of work right now and not really enough time for anything, let alone travel-junkie.com. You might want to subscribe to my RSS feed…
nelson d'aires - 15 February 2008 @ 3:31 PM
thanks for the reply!
(yup, i will subscribe)
Martyn - 28 February 2008 @ 10:28 PM
I also can’t get version 8.0 working, i’m trying to add captions/links to go underneath my gallery pictures and followed your tutorial… if you don’t have the time, maybe i should ‘downgrade’, what version of NextGen do you use?
traveljunkie - 29 February 2008 @ 11:10 AM
As I said before, Martyn, this tutorial won”t work with version 0.83 of nggallery. I’ve been working on it and maybe I”ll post it here in a week or so. I”ve got too much work on my hands right now to think about that on the weekend really. You”ll just have to wait and see…
Martyn - 29 February 2008 @ 11:47 AM
ok, I understand, but what version are YOU running?
traveljunkie - 29 February 2008 @ 10:37 PM
I’m still on a pre 0.8 version, Martyn
traveljunkie - 9 March 2008 @ 2:32 AM
I have just upgraded to 0.83 and so far everything seems to work fine. I will do some more testing and once that is done I will post a new tutorial… (next weekend, hopefully)
traveljunkie - 16 March 2008 @ 10:12 AM
Alright, go to the new tutorial on captions for NextGen Gallery version 0.8 and higher if you want to upgrade…