Vertical Aligning thumbnails in gallery

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.

I’m not sure if you’ve adjusted anything on your site, and I’m exactly sure what look you are going for, but the thing to keep in mind is that thumbnails are floated left. When thumbnails are all cropped to the same size and aspect ratio (default behavior), they line up perfectly.

If you are not going to crop thumbnails, you can also play with the sizes so that all thumbs are at least the same HEIGHT. That way, again, they line up properly.

In your case, all your thumbs are different sizes and aspect ratios, so there’s no obvious way to control their alignment.

We haven’t looked at Doublesixx’s solutions, but that may work.

Doublesixx – thanks very much for jumping in and providing assistance. You do that often and it’s always welcome.

I’m going to mark as resolved for now. I’ll change it’s status back if needed.

@photocrati

No problem happy to help out when I can.

My solution provides space around the thumbnails. So regardless of the size you’ll have rows and columns. Otherwise they are so close to one another that irregular sized thumbnails can cause gaps and thumbnails will scatter.

My site is all about galleries. You can see my solution in action :

https://www.doublesixx.com

@photocrati

Here’s a good example :

https://www.doublesixx.com/2013/06/10/olivia-munn-throwing-opening-pitch-dodger-stadium-june-10-2013/

Looking at your example, would your solution still work if the images were dramatically difference sizes? Say some images are twice as tall as others? One is 100X100 and the next is 200X200 and the next is 60X180, etc. Right now, the difference look fairly minimal. You don’t need to test it or anything, just wondering if you know off the top what behavior you’d expect with that.

@photocrati

The link I provided seems to do what you ask.

The gallery has images that aren’t the same height or width. No matter what the don’t affect one another. Which I think is the initial problem people are always expiriencing.

Currently my thumbnails are 100×75. I never know what size image I’ll upload, but my alterations always prevents the sizes from affecting the rows and columns.

DoubleSixx-

Thanks SO much for your help. While I don’t quite understand all the details in your code, it does seem to do the trick (my thumbs are larger than yours, so I fiddled with the sizes).

Now I’m wondering how to change the vertical alignment… various attempts have yielded no luck. Any thoughts?

See the results at https://www.todddawsondesign.com/test/tbd-fineart/figurative-paintings/

BTW-I’m using the Atahualpa theme, which has a custom CSS component. If I simply tweak the NG Gallery code there, it overrides the default css, and I don’t have to worry about updates. ??

@dosuntai

That’s the point of putting a copy of the nggallery.css in your theme directory. Any time nggallery gets updated you won’t have to alter the nggallery.css. The one in the theme directory overrides. Glad it all works.

Guys-

As a way of learning, I’ve gone back to the original ng css and am trying to achieve the following: https://todddawsondesign.com/test/tbd-fineart/gallery%20I’m%20shooting%20for.jpg

Note the vertical alignment in the horizontal images. This is a more compact version of what DoubleSixx did, and it **looks** like it should be easy to code… can’t for the life of me make it work though.

Thoughts?

@dosuntai

If you go one step at a time and start at the top of my explanation you should be fine.

Good luck.