Pictures with captions are ordered with blank spaces

I believe this may have been resolved in a different thread.

Hello, not completely solved.
If you are referring to this thread:
Thumbnail Captions (8 posts)
https://www.ads-software.com/support/topic/thumbnail-captions?replies=8
I have yet to figure out how to make the changes.

Thank you

I have just discovered one of these.

Second row there are 2 blank spaces

I would say this is not resolved as yet. See this.

Picasa Express x2 Shortcode Method Gallery with Caption 170 x 127 Thumbnail with Version 2.0.3
Everything sat nicely until I added a caption on Picasa. When I reloaded the page we now have blank spaces.
Prior to me adding a caption the file name was showing as the caption.

Looking at that last post, it appears to be related more to the styles than the plugin. What I’m seeing is this:

* Album images styled using “float: left” so they stack nicely next to each other
* An image with a two-line caption consumes more vertical space than an image with a one-line caption
* Because of the differences in object height due to differing caption lengths, the browser floats the next image after a two-line caption in the next available vertical spot – in your example this is the 3rd column because the 2nd column has a two-line caption.

Now, with this problem in mind, I’m not certain how this plugin could be modified to solve this issue. The “class” and “style” options in the preferences are intended to help assist with any tweaking you need to make, so in your example you might be able to set a static height for the caption box.

If an additional class/style option needs to be added specifically for captions, I could probably do that, and from there you could possibly set a static height for every caption box. Let me know your thoughts.

Also, I resolved this topic because of the related post you have still open:

https://www.ads-software.com/support/topic/thumbnail-captions?replies=8

so in your example you might be able to set a static height for the caption box.

Hello Geoff, that sounds like a reasonable idea. Should this be added to the Gallery properties style box and what do you think it would it need to be?
This plugin has so much potential for me in the future and I appreciate the help so thank you.

I just added caption container class/style settings and caption p tag class/style settings in the latest 2.0.5 version. I’m hoping one of these two options might allow you to do what you need to set a static height.

Thank you for that. I am not quite sure how I should be using this facility to make it work with what I am trying to achieve.
Do you have some suggested code that you think might be applicable?

There might be a few options:

Caption P Style: white-space: nowrap;
The above would prevent character returns on the caption. But that might blow your table out of whack.

Caption P Style: height: 50px; display: block;
The above (or something similar) would set a static height for all caption elements, making single line captions taller than they need to be, but keeping the height of each cell the same, so there would be no differing heights causing the missing space on the taller ones.

Give those a try and let me know if something works.

Bingo!

The second option has done the trick. I had to add some custom code to the alignleft code because it reverted back to 2 columns. This cured it and I am also able to use the 175px wide thumbnails.

.alignleft {
    float: left;
    margin: auto;

The code ended up looking like this.

Caption P Style: height: 60px; display: block; width: 165px;

Here it is working as I want it, at last.

Many thanks for your help with this. I will mark the other thread as resolved as well.

I was paying so much attention to getting the gallery to work with 3 columns I now find all my images have the caption on the left………………

I just looked at your “here it is working as I want it, at last” link, and everything looks fine. I guess I don’t see where your caption on the left problem is, but I would assume it must be related to CSS changes for the image and/or the caption P tag.

The thumbnails are fine, its all the normal ones which seem to have been affected as well.

Scroll down the main page on this link.

I have been able to replicate this issue myself. This is related to the width that is defined for the caption <div> in correlation with an image thumbnail scaling dimension of “height” or “square”.

I’m currently working on version 2.1, and in this version I have the fix for dimension of “square”, plus a JavaScript that can figure out the image width and set the caption width appropriately if the image thumbnail scale dimension is “height”.

Don’t have a timeline for 2.1 yet, as there are a few other things that need to be finished, but hopefully by week’s end.