How To Add A Title To Images In The NextGEN Gallery Plugin

So as I’m modding Gwen’s site, I had a problem: In the lightbox for each page, the art was displayed when you clicked on it, but with only a description, not a title.

A few years back, I had made a mod to the NextGEN gallery plugin to manage it, but with WordPress plugin updates, it had been wiped out; as well, the plugin seems to have been rewritten, making the issue moot.

The key to fix it is to make sure the tag in the galleries includes a title along with the description – the file I modded was found in

/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/nextgen_basic_gallery/templates/thumbnails/index.php

And the actual change I did was found in here:

<div class="ngg-gallery-thumbnail">
  <a href="<?php echo esc_attr($storage->get_image_url($image, 'full', TRUE))?>"
    title="<?php echo esc_attr($image->description)?>"
    data-src="<?php echo esc_attr($storage->get_image_url($image)); ?>"
    data-thumbnail="<?php echo esc_attr($storage->get_image_url($image, 'thumb')); ?>"
    data-image-id="<?php echo esc_attr($image->{$image->id_field}); ?>"
    data-title="<?php echo esc_attr($image->alttext); ?>"
    data-description="<?php echo esc_attr(stripslashes($image->description)); ?>"
    data-image-slug="<?php echo esc_attr($image->image_slug); ?>"
    <?php echo $effect_code ?>>
      <img
        title="<?php echo esc_attr($image->alttext)?>"
        alt="<?php echo esc_attr($image->alttext)?>"
        src="<?php echo esc_attr($storage->get_image_url($image, $thumbnail_size_name, TRUE))?>"
        width="<?php echo esc_attr($thumb_size['width'])?>"
        height="<?php echo esc_attr($thumb_size['height'])?>"
        style="max-width:100%;"
    />
  </a>
</div>

I changed line #03 to add the title:

title="<?php echo esc_attr($image->alttext),": ",esc_attr($image->description)?>"

Voila – a title below each lightbox image – as the screen shot below shows.

I even tried with with <strong> (or <b> if your theme handles it properly) to bold the title:

title="<?php echo "<strong>",esc_attr($image->alttext),":</strong> ",esc_attr($image->description)?>"

But in the end, adding html within a <img> tag parameter didn’t feel right, so I went back.

Some caveats with this method:

  • It works because the title= parameter in the <img> tag is used by the FancyBox lightbox code to caption the images. If you use one of the other lightboxes in NextGEN, this may not work.
  • Likewise, it’s for the Basic Gallery display – if you want it to work for another type of gallery and this doesn’t work, then plan to spelunk your way through the code looking for the appropriate place to patch.
  • And of course, patches will disappear with the new update. So make the change, check it out, and then backup the file (maybe even the whole plugin.) And plan to fix it every update.

Enjoy!

2 thoughts on “How To Add A Title To Images In The NextGEN Gallery Plugin

  1. Hi, would this work to display a caption under the thumbnail image in the basic gallery, not only when in lightbox effect view?