WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery
[resolved] Vertical Aligning thumbnails in gallery (12 posts)

  1. dosuntai
    Member
    Posted 1 year ago #

    Is there a way to change the vertical alignment of the thumbnails? I have images that are of differing heights, and they keep "tucking" under the previous thumbnail, creating an awkward line (see http://www.todddawsondesign.com/test/silver/janes-work/).

    I've tried tweaking the code for "ngg-galleryoverview" and "ngg-gallery-thumbnail-box" but can't make anything work.

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

  2. DoubleSixx
    Member
    Posted 1 year ago #

    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.

  3. photocrati
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  4. DoubleSixx
    Member
    Posted 1 year ago #

    @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 :

    http://www.doublesixx.com

  5. DoubleSixx
    Member
    Posted 1 year ago #

  6. photocrati
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  7. DoubleSixx
    Member
    Posted 1 year ago #

    @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 100x75. I never know what size image I'll upload, but my alterations always prevents the sizes from affecting the rows and columns.

  8. dosuntai
    Member
    Posted 1 year ago #

    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 http://www.todddawsondesign.com/test/tbd-fineart/figurative-paintings/

  9. dosuntai
    Member
    Posted 1 year ago #

    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. :-)

  10. DoubleSixx
    Member
    Posted 1 year ago #

    @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.

  11. dosuntai
    Member
    Posted 1 year ago #

    Guys-

    As a way of learning, I've gone back to the original ng css and am trying to achieve the following: http://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?

  12. DoubleSixx
    Member
    Posted 1 year ago #

    @dosuntai

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

    Good luck.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic