Solution for messed up thumbnails

Lumbermatt
(@lumbermatt)

10 years, 8 months ago
We have been experiencing a very hard update to NGG 2.0. One of the main issues was that the gallery thumbnails were messed up like this :
http://imageshack.us/a/img845/8971/v3p7.png
Even with 5 images per columns, there is one image which is “pushed” to next line (this happens with any number of images per columns, the last one is always on next line).

The problem seems to be related to a conflict between the ngglegacy (which we use actually) and the css of the thumbnails.

In ngglegacy, the gallery thumnails are rendered in gallery.php. Each image is displayed with this type of line
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >

The <?php echo $image->style ?> directive gives style="width:xx%"; with xx 100 dived by the amount of images per columns : so splitting up the space equally for each thumbnail picture. This worked nice with NGG 1.9.5.

But if you look at the non-legacy code modules/nextgen_basic_gallery/static/thumbnails/nextgen_basic_thumbnails.css there something interesting.
```
.ngg-gallery-thumbnail-box {
    float: left;
    margin-right: 5px;
}
```
On each thumbnail picture, a 5px margin is added. So you end with 100% + number of images * 5px with is larger than the page width and the last image goes under the line.

To solve this, just go to WP Admin Panel, Gallery > Other Options > Styles > (Show Customization Options) and add this to the file :
```
.ngg-gallery-thumbnail-box {
    margin-right: 0px;
}
```
After this, everything should come back normally (i.e all pictures fits in their columns) like that : http://snag.fr/?p=509 or http://snag.fr/?p=389

Hope this can help anybody

http://wordpress.org/plugins/nextgen-gallery/

Viewing 11 replies - 1 through 11 (of 11 total)

jesse mini shred
(@jessemini-shredcom)

10 years, 8 months ago

Pasting the CSS fixed some of my problems. Using 2 columns everything looks good now. However when I move to 3 I still have the issue of the 3rd column wrapping. Any ideas?
Thread Starter Lumbermatt
(@lumbermatt)

10 years, 8 months ago
Other information for those who might be interested.

When mixing landspace and portrait pictures, the portrait pictures are not centered but on the left of the thumbnail div which doesn’t look very nice.

To center everything, just go to WP Admin Panel, Gallery > Other Options > Styles > (Show Customization Options) and edit the css file :
```
.ngg-gallery-thumbnail-box {
    margin: 0px auto;   <-- For the previous edit in the first post
    text-align: center;
}

.ngg-gallery-thumbnail {
    float: center;
    display: inline-block;
}
```
Note : This actually works in Safari en IE *but* not Firefox. We are working on it to get this to work.

The thumbnails have a fat white border around which looks really ugly. To get ride of them, just add following code to the same file :
```
.ngg-gallery-thumbnail img {
    padding: 0px;
    border: 1px solid #1d1d1d;
    margin: 4px auto;
}
```
In this example, the border is reduced to a very thin 1 pixel border with the color #1d1d1d. To customize the color juste change #1d1d1d to what ever you want. To get ride of the border, change 1px to 0px.
Thread Starter Lumbermatt
(@lumbermatt)

10 years, 8 months ago
Here is the definitive code to :
1 – Get all thumbnails on one line (to avoid the last thumbnail being “pushed” to next row)
2 – Get ride of the (ugly) big white borders around the thumbnails
3 – Center the thumbnails (when mixing landscape and portrait thumbnails, or with different aspect ratio).

Tested in Firefox 22, Safari 5 and Chrome 28 (not in IE… if somebody want to test it).
```
.ngg-gallery-thumbnail img {
    padding: 0px;
    border: 1px solid #1d1d1d;
    margin: 4px auto;
}

.ngg-gallery-thumbnail {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.ngg-gallery-thumbnail-box {
    text-align: center;
    margin: 0px;
}
```
Thread Starter Lumbermatt
(@lumbermatt)

10 years, 8 months ago

I forgot : The color #1d1d1d is the color of the very thin 1px border around the thumbnails. To get the border away, just change the line to border: 0px;

Here are two examples of usage of this css :
http://snag.fr/?p=389
http://snag.fr/?p=312

Hope that this help anybody.

sneader
(@sneader)

10 years, 8 months ago

Lumbermatt: You, sir, are my hero!

I’ve been searching through all the complaints about NextGen 2.0.0, trying to find a fix for this thumbnail layout issue, but nobody else seemed to be talking about it.

Your fix is brilliant and worked great. Many thanks for sharing!

– Scott

jesse mini shred
(@jessemini-shredcom)

10 years, 8 months ago

I finally started playing with this again and now I can’t get more than 2 columns to display at once. If I set the columns to 2 or more it displays 2 regardless. Do you have any other ideas?

Here is an album I created:
http://wendthome.com/august-2013-albums/nggallery/pid–073-jpg/page/1/

jesse mini shred
(@jessemini-shredcom)

10 years, 8 months ago

I ended up figuring this out. There was something messed up with all of the CSS in my theme.

Swarthydog
(@swarthydog)

10 years, 4 months ago

Weird possible solution…i typed the word “auto” with no quotations into the column number field and the images automatically fill to the page rotation. I needed this to show on ipad portrait and landscape and after much frustration gave it a try and it worked. hope that helps someone else.

Ffgrf
(@grouchyturtle)

10 years, 3 months ago

Lumbermatt, does that code need to go in a specific place or file?

I tried adding to to live CSS in Headway, but it didn’t change anything.

Ffgrf
(@grouchyturtle)

10 years, 3 months ago

I figured it out. Needs to go Nextgen’s custom CSS. Does this get overwritten on upgrades to the plugin?

tizz
(@tizz)

10 years, 3 months ago

Does this get overwritten on upgrades to the plugin?

No