OK let’s try the easy fix first.
Goto Gallery->Options
Thumbnails Tab and try changing the sizes.
Otherwise I have a longer solution I usually post, but many have found that changing the size solves their problem.
Good luck.
Lenny,
Assuming you don’t/can’t reszize your variable size thumbnails to be all the same size you can bring a semblance of order to the gallery by using height and width settings in your css.
.ngg-gallery-thumbnail-box { height: 115px; }
OR
.ngg-gallery-thumbnail-box { height: 115px; width: 200px; }
depending on which layout you prefer.
Often the best way to cater for variable sized thumbnails is to draw attention away from the thumbnail itself by using a consistent background such as this gallery.
@toshi,
I’ve often seen that layout and wondered how it was done, I think it would be useful.
Could you explain please ?
Thanx in advance.
Thread Starter
kapara
(@kapara)
really cool. how do you do that?
I posted details on the gallery thumbnail css changes required to produce a similar effect here – http://wpbugs.com/2013/05/nextgen-gallery-thumbnail-centering.
The album thumbnails work (a bit) differently and I’d need to do another post if you’re after that as well. Although the albums look like they’re derived from the compact shortcode its actually using the extend shortcode.
I’m having the same problem as the OP
see
how can this bee fixed? i tried going into thumbnail sizes and im not to good with css codes
@tmeadows34
I solved it on my site: http://www.doublesixx.com
You’ll have to edit your nggallery.css
You can really screw things up by playing around with the file.
I suggest you back it up first before making any changes.
You can edit by going to Gallery – Styles
I made change to mine. I think what you want is in the :
/* ———– Gallery style ————-*/
Try replacing .ngg-gallery-thumbnail and .ngg-gallery-thumbnail img with mine. See if that does what you want.
.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
hahhahah
I honestly have no idea how that worked but it did!
thanks DoubleSixx!
