NextGEN image gallery captions

  • klynam

    (@klynam)


    13 years, 1 month ago

    Here are a couple of tricks for showing image captions under the thumbnail images in the standard NextGEN gallery view. These are probably available in various places, some here in the forum and others around the web; now they’re all in one place for us all!!!

    ENABLING CAPTIONS BELOW GALLERY IMAGES

    When you add a gallery to a post/page, you get this by default:

    [nggallery id=1]

    You need to add this:

    [nggallery id=1 template=caption]

    GETTING THE CAPTIONS YOU JUST ENABLED TO SHOW-UP

    When importing an image to a gallery, NextGEN automatically adds the image filename (minus the ext) to the ALT/TITLE field of the image meta data.

    However, the “template=caption” function is actually preset to call the DESCRIPTION field of the image. If you don’t have anything in the DESC field, you will not see any caption (even though it is technically working.)

    You have two options: (a) add something to the description field of every image; or (b) change which field is being called.

    You can add a value to image DESC fields manually in NextGEN or (probably) using any number of EXIF tools available.

    However, suppose you want the image name to automatically appear as the image caption in your gallery. (Maybe you are creating a product gallery where the image names are also the actual product codes, and you want to display those codes below each thumbnail.) No problem –

    Since NG automatically creates the ALT/TITLE from the image name on import, here’s how to call that field:

    1. In your dashboard, click Pluginns > Editor from the left-hand nav
    2. Select plugin to edit: NextGEN Gallery
    3. From right hand file list, click:
    nextgen-gallery/view/gallery-caption.php
    4. Scroll down to this line:
    php echo $image->caption
    5. Change to:
    php echo $image->alttext

    Now, your default image galleries should automatically show the filename (minus ext) as the caption below every image.

    STYLING YOUR IMAGE GALLERY CAPTIONS

    1. In your dashboard, click Pluginns > Editor from the left-hand nav
    2. Select plugin to edit: NextGEN Gallery
    3. From right hand file list, click:
    nextgen-gallery/css/nggallery.css
    4. Scroll down to this line:
    .ngg-gallery-thumbnail span
    5. Add your CSS markup between the {}’s

    STYLING YOUR IMAGE GALLERY THUMBNAILS

    1. In your dashboard, click Pluginns > Editor from the left-hand nav
    2. Select plugin to edit: NextGEN Gallery
    3. From right hand file list, click:
    nextgen-gallery/css/nggallery.css
    4. Scroll down to this line:
    .ngg-gallery-thumbnail img
    5. Modify the CSS “background” and “border” properties between the {}’s to style the default gallery image container
    6. To change the HOVER effect add this CSS immediately below the “img” definition
    .ngg-gallery-thumbnail img:hover
    7. Again add/modify the “background” and “border” properties for your desired hover effect.

    I’ve personally tested these techniques using the latest versions of WP and NG (as of 03/09/11) and everything does work (assuming I didn’t get some of the steps wrong as I was documenting all this.) I hope these tips help save you time and frustration with NextGEN galleries.

    If you have more to offer, please feel free to add your tips below. 🙂

Viewing 15 replies - 1 through 15 (of 16 total)
1 2
  • Thread Starter klynam

    (@klynam)

    13 years, 1 month ago

    Ooops – I just remembered one more tweak…


    TO DISPLAY THE SAME ALT/TITLE IN YOUR CLICKED (ENLARGED) PHOTOS

    1. In your dashboard, click Pluginns > Editor from the left-hand nav
    2. Select plugin to edit: NextGEN Gallery
    3. From right hand file list, click:
    nextgen-gallery/view/gallery-caption.php
    4. Scroll down to this line:

    <?php echo $image->pidlink ?>” title=”<?php echo $image->description ?>

    5. Change to this

    <?php echo $image->pidlink ?>” title=”<?php echo $image->alttext ?>

    pyrov

    (@pyrov)

    13 years, 1 month ago

    Thanks so much for sharing this! I really know nothing about the backend of WordPress, but I’m learning as I go. How do I go about position the image captions beneath the thumbnail images so that the caption does not extend beyond the thumbnail and break up the page?

    For instance, I have a NextGen gallery page with three thumbnails per row. When I activate the caption shortcode, the longer captions run all the way across the page and force the other images on that row down to the next row so that there are some rows with 1 image and others with 3.

    Any suggestions?

    Thread Starter klynam

    (@klynam)

    13 years, 1 month ago

    I’m not much further ahead of YOU in all this “backend” stuff…LOL!!!

    First thought: You could probably play with the CSS margins to keep the caption contained within the thumb border. (Using FireFox and the FireBug plugin makes finding and tweaking CSS settings SO much easier!!!)

    But this could still have problems as captions of differing lengths will create different height thumbs. That could also mess up the clean, even thumbnail grid appearance.

    A better option may be adding code that limits the number of characters shown in the displayed caption of the thumbnail.

    That way every thumb retains the same X-Y dimensions, regardless of displayed caption length, and makes a nice clean grid of images.

    I have no idea how to do this but there are some pretty smart cookies on this forum. Maybe someone will jump in and help… 🙂

    giorgiogs

    (@giorgiogs)

    13 years, 1 month ago

    Great 🙂

    [nggallery id=1 template=caption] is working for me 🙂

    Just one question, is it possible to add the caption above the thumb and not below it?

    Thanks

    Giorgio

    banamazon

    (@banamazon)

    12 years, 11 months ago

    thank-you for your original posts–very helpful
    Does anyone have an idea as to how I would get the captions to appear in the slideshow?
    I have used the directions and got captions on the thumbnails and on the manual larger images but is there a way to get the caption on the image in the slideshow?

    Thanks for your help

    Bananna

    bizint

    (@bizint)

    12 years, 9 months ago

    Hi….thanks for he update, but for some reason my nextgen is not showing any captions…I’ve done it right…and filled in all the descriptions too…but I’m not getting any captions…do I have to put a special code in the description or something? This is really frustrating me….so any help appreciated….

    See my images (as logos) towards top….I want to put a caption under logo..possible with a link to case Study….

    http://www.businessinteriors.co.uk/betatest/wordpress/portfolio/clients

    Thanks for help!

    Thread Starter klynam

    (@klynam)

    12 years, 9 months ago

    bizint – first of all you have a very nice looking site 🙂 I really appreciate WP sites that don’t “look” like WP sites!

    NextGen has been updated a few times since I made the original post. So it’s possible something changed that rendered the code tweaks unusable.

    Also, if you updated NextGen after making the tweaks, it may have overwritten your changes (???)

    I just checked it on one of my sites that has the most recent nextgen version and it worked fine.

    Did you mark your gallery shortcode correctly?

    [nggallery id=1 template=caption]

    Also, I see you are using the “black minimalism” style setting. That shouldn’t matter, but you may want to double check the code references in the original post to be sure your style isn’t calling some other code. Maybe try changing back to the default style and see if the captions show up…???

    zarza

    (@zarza)

    12 years, 7 months ago

    I have a really basic question. Where do I have the option of adding [nggallery id=1] ?
    thanks

    zarza

    (@zarza)

    12 years, 7 months ago

    Okay, I see. edit page, html view. lol.

    nishajagpal

    (@nishajagpal)

    12 years, 5 months ago

    Hi Klynam,

    Thanks for all the info. I have implemented the changes to call the alt text rather than the description underneath the image when clicking to enlarge.

    It doesn’t seem to be working. Will this change all existing galleries? I I have a number of galleries I would like to make this change with?

    I was wondering if maybe I need to use a different shortcode?

    Regards

    rx

    (@roximarsen)

    12 years, 5 months ago

    I am trying to get the caption to read in the NGGallery when it is accesed via the Album. I have no trouble with the caption showing in nggallery when viewed as a single page, just when I link it with a album. I tried changing the code from from “caption” to “alttext” as described by klynam, but no luck. Any follow up? thanks.

    placemat

    (@placemat)

    12 years, 5 months ago

    #nishajagal,

    Like you, I am trying to figure out something to see the description under the enlarged image.

    The solution Klynam came up with (replace <?php echo $image->pidlink ?>" title="<?php echo $image->description ?> with <?php echo $image->pidlink ?>" title="<?php echo $image->alttext ?> does not seem to work because there is no pidlink anymore in the gallerycaption.php anymore.

    Someone? Thank you in advance

    yodielay

    (@yodielay)

    12 years, 5 months ago

    I figured out how to add the title below the image along with the caption.

    With the template=caption in place on the gallery page, open view/gallery-caption.php in the plugin editor. Find
    <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >

    and replace it with <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->alttext ?><br /><?php echo $image->description ?>" <?php echo $image->thumbcode ?> >

    So you’re just adding the echo alttext to the title area. I also tried using a php line break but couldn’t get it to work, so if you’re more clever than myself please improve upon this past midnight fix from a non-coding designer.

    The most elegant solution would be to alter the javascript in shutter-reloaded.js which appears to write all this stuff. But I’m not that good at coding. So while it would be nice for the title of the image to appear above the picture, I’m not sure how to do that. Here is something to use until that nicety gets developed (hint, hint).

    To prove it works (at least for me.. on my computer.. ) here is a link to the site I’m working on, example in dev.

    yodielay

    (@yodielay)

    12 years, 5 months ago

    If you want your title and description to show up on top, and you’re using shutter (I didn’t try it with anything else), find your shutter-reload.js and change the showImg function to swap the title info and the image info. 

    showImg : function() {

		var t = this, S = t.I('shShutter'), D = t.I('shDisplay'), TI = t.I('shTopImg'), T = t.I('shTitle'), NB = t.I('shNavBar'), W, WB, wHeight, wWidth, shHeight, maxHeight, itop, mtop, resized = 0

    to this:

    showImg : function() {

		var t = this, S = t.I('shShutter'), D = t.I('shDisplay'), T = t.I('shTitle'), TI = t.I('shTopImg'),  NB = t.I('shNavBar'), W, WB, wHeight, wWidth, shHeight, maxHeight, itop, mtop, resized = 0;

    You’ll likely have to add some margin to the top of the image to allow for the description to show up. I added 40 pixels to img#shTopImg in shutter-reloaded.css, but then I also hid the counter so I made it a bit less.

    Anonymous User 6077519

    (@anonymized-6077519)

    12 years, 3 months ago

    I seem to have a problem,

    I have about 10 photos in 1 gallery, all my captions are showing, but only one thumbnail is appearing :s

Viewing 15 replies - 1 through 15 (of 16 total)
1 2
  • The topic ‘NextGEN image gallery captions’ is closed to new replies.