Forums

make all nextgen gallery thumbnails same size (7 posts)

  1. sunethj
    Member
    Posted 2 years ago #

    Hi,

    I have installed nextgen in a site and in one page all thumbnail images display neatly in same size (http://www.grace-decor.com/birthday-cake-gallery/). However in the other gallery the images are in different sizes so the thumbnails are not displayed in a proper grid (http://www.grace-decor.com/celebrations-cake-gallery/).

    Any idea how to display thumbnails in a same size grid?

    (I have already tried different options in the next-gen without any luck).

    Thanks

  2. hhattemer
    Member
    Posted 2 years ago #

    How did you solve this issue? I have the same problem...

  3. Andreas Norman
    Member
    Posted 2 years ago #

    i also have the same problem. Max size on thumbnails isn't good enough to create a nice layout. We need to be able to set the EXACT size.

    Any luck yet solving it?

  4. ekawaii
    Member
    Posted 2 years ago #

    Hello~

    I was having the same problem so I added the exact width and height into the Gallery CSS which changed all my gallery thumbnails to the exact same size.

    1. Log into your WordPress Admin
    2. Click on Gallery then Style
    3. Search for .ngg-gallery-thumbnail img {
    4. Your code should look something like this:

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

    Simply add the width and height here, it should now look like this:

    .ngg-gallery-thumbnail img {
    	background-color:#FFFFFF;
    	border:1px solid #A9A9A9;
    <!-- Start Thumbnail Exact -->
            width: 75px;
            height: 75px;
    <!-- End Thumbnail Exact -->
    	display:block;
    	margin:4px 0px 4px 5px;
    	padding:4px;
    	position:relative;
    }

    I hope this helps!

    ~Renee

  5. ekawaii
    Member
    Posted 2 years ago #

    P.S: Make sure when copying the code above that you remove the tags:
    <!-- Start Thumbnail Exact -->
    and
    <!-- End Thumbnail Exact -->

    You should only have the width and height values in the CSS. The code above messes with the width/height if it's not removed. I put it there as an example to show you where I've added the width & height into the CSS.

  6. Andreas Norman
    Member
    Posted 2 years ago #

    The CSS changes doesn't crop and resize. By doing that my photos will look weird. The thumbnails needs to be reisized and croped first.

  7. ekawaii
    Member
    Posted 2 years ago #

    The OP asked for "Any idea how to display thumbnails in a same size grid?" which I explained above. It simply makes all image thumbnails the exact same size so they display nicely in a grid.

    I'm using this on my website and the image thumbnails look fine.

Topic Closed

This topic has been closed to new replies.

About this Topic