Thumbnails not floating properly

This problem occurs when not a thumbnails are not the same height.

This image “https://www.green-onion.co.uk/wp-content/gallery/dessert-sandstone-patio/thumbs/thumbs_0011.jpg” has a height of 94 while all others have a height of 93.

I would also like to know how to fix that so it all aligns correctly.

Thanks for the response there Kevin, I’ll look into that. Surely people must have run into this before? I have with another site, albeit there was never a real solution for it, just either moving images around or changing the height of all images globally occasionally.

This is the 2nd time this has happened, so I suspect it’s a bug?

I have this problem too and I was and still am looking for a solution.

A similar problem with a thumbnail view of galleries (single and double line text) has been fixed in this version (2.0.0).

Hi there!

Are you having this problem with NextGEN Gallery 2.0.0 installed?

Thanks,
Mike

I might have a similar problem after upgrading to 2.0. Mine is connected to page width – NextGEN things that the gallery space is narrower than it actually is.

See my gallery here.

When I changed to 3 pictures in a row layout, it still showed 2 pics and one on the other line.

Thanks for help

@jan Mi?acky It not related with page width. You have the same problem we do. Difference in thumbnail height causes this behaviour.

This problem exists for me in 1.9.13 and 2.0.0.

WordPress: v3.5.2
NextGEN: 2.0.0
Upgrade from: 1.9.13

MySQL: v5.5.32
PHP: v5.3.10
mod_rewrite: Activated
PHP Safe Mode: Off

Hi all,

It appears I’ve sorted a work around this issue, albeit I don’t know if it’s permanent? Here were my steps:

Changed the .ngg-gallery-thumbnail img in CSS from 125px width to 120 by 94px.

This was just from Chrome inspector, but seemed to work.

So I updated NextGen Gallery to the latest 2.0, and changed the global width/height for thumbnails via the NextGen admin. Then I regenerated ALL thumbnails throughout the galleries.

This seems to have worked? The problem occurred randomly so I don’t know whether this is a temporary or permanent solution?

@velvet_grooves That solution will only work when all images are of the same format (landscape) and aspect ratio without distorting the image (stretching etc). That would not work for someone who also has portrait images for instance.

Ugh seems like I post this solution often.

Have you made a custom nggallery.css in your theme directory ?

Otherwise just use the following, if you have a nggallery.css in your theme directory can use the following but you’ll have to edit manually since you won’t be able to alter the style via WordPress.

A .css in your theme directory take priority over the one in the nextgen-gallery/css

First off back up your nggallery.css file, located in :

/wp-content/plugins/nextgen-gallery/css

Then you can use :

Gallery->Style

Search for the following and change it to what I paste below :

.ngg-gallery-thumbnail {
/* float: left; sixx */
/* margin-right: 5px; sixx */
/* padding-top:10px; -sixx- row space in gallery */

height:86px;
margin:0pt 0pt 6px !important;
padding:0px 0pt 0pt 0px; /* -sixx- 12px 0pt 0pt 7px !important; */
padding-top:10px;
padding-bottom: 5px; /* -sixx- */
width:120px;
}

.ngg-gallery-thumbnail img {
background-color:#FFFFFF;
border:1px solid #A9A9A9;
display:block;
/* -sixx margin:4px 0px 4px 5px; */
margin-left: auto; /* -sixx- */
margin-right: auto; /* -sixx- */
padding:4px;
position:relative;
}

Good luck.

This worked for me (using 150×150 thumbnails).

.ngg-gallery-thumbnail {
height:180px;
margin:0pt 0pt 6px !important;
padding:0px 0pt 0pt 0px;
padding-top:10px;
padding-bottom: 5px;
width:180px;
}

.ngg-gallery-thumbnail img {
background-color:#FFFFFF;
border:1px solid #A9A9A9;
display:block;
margin-left: auto !important;
margin-right: auto !important;
padding:4px;
position:relative;
}

.ngg-gallery-thumbnail-box {
width:180px !important;
height:180px !important;
}