Captions for gallery thumbnails ruin spacing

@jamminjames – Unfortunately “preview” posts are not visible to the general public, but as is it seems you may need to adjust the “captions” template (read: create your own custom template) and/or add some different custom CSS to achieve the aesthetics you are looking for in this case.

– Cais.

Okay, but I don’t understand why a template called the “Caption template” wouldn’t set up the captions correctly. In fact, it looked no different than using no template. Can you tell me how that template is supposed to work?

As for CSS, I tried every option I could see using Firebug, and nothing seems to work. I’ll see what I can do with the template, but do you have any clues for me?

Thanks.

@jamminjames – I really cannot say why the caption template if used on that specific display is not showing the image captions. Did you ensure the setting was correctly saved when you inserted the display via the IGW?

– Cais.

The captions are showing, but as I noted in the original post, it does it no better than without the template, ie, the text goes far beyond the column the thumbnail is in, pushing the next column over, and destroying the layout.

Is the IGW the green button above the editing window? Yes, the settings are correct there.

I tried creating a new template, with no luck getting the captions to stay within the bounds of the thumbnail width.

Does anybody have any idea how to do this? I’m surprised it’s not standard behavior for a caption template.

No CSS changes seem to do anything either, other than the {display: table-caption;} I mentioned in the initial post. And for some reason, that squishes the caption into about a third of the width of the thumbnail.

There must be a gallery out there with captions that work properly in a thumbnail template, no?

Okay, figured this out.

In the template, I created a new div, ngg-gallery-thumbnail-caption, and put it right after the closing ngg-gallery-thumbnail div.

Then I added this css to the theme (my thumbnails are 170px wide):
.ngg-gallery-thumbnail-caption { position: relative; width: 170px; top: 0px; left: 10px; right: 10px; text-align: center; line-height: 1.2em; margin-bottom: 10px;}

Works perfectly.

@jamminjames – Great! Well done … and thanks for sharing!

– Cais.

Yw! Do you think it would work with a <span> instead of the new <div>?

Also, maybe you folks should change your gallery-caption.php and CSS files to reflect these fixes? Otherwise, I don’t understand what good the gallery-caption.php template is, unless I’m missing something…

@jamminjames – Although we are looking at the NextGEN Legacy templates that are bundled with NextGEN Gallery to improve their look they are basically included as a backwards-compatibility function more than anything else … and as examples for custom templates to be built from as well.

– Cais.

Hi and yes,

I am having the very same problem of not being able to affect the css, in addition to not being able to change the thumbnail sizes as is offered in the “override thumbnail size” option for each gallery.

@jamminjames was this the template file that you adapted Jgallery-caption.php ?

Thanks

Ps. Where is the file located in the plugin’s folder please and thanks.

@boplinger – I added this for the div:

<div class="ngg-gallery-thumbnail-caption" >
   <?php if (!$image->hidden) { echo $image->description; } ?>
</div>

… right after the closing ‘ngg-gallery-thumbnail’ div at line 56, using the gallery.php file found in the /wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ngglegacy/view/ folder.

After making the changes, I renamed it and put it in a ‘nggallery‘ subfolder of my child theme. You must do this to keep it from getting written over in the next update.

@jamminjames – Thanks for sharing those details!

– Cais.