Change Divi Image Gallery Grid Thumbnail Sizes

|

The Divi Theme comes with a gallery module which gives you the option of displaying your image gallery as a series of thumbnails (grid view).

Changing the Gallery Grid with Divi Booster

Divi Booster adds options to the Divi Gallery module settings for controlling the number of images per row, as well as their size, spacing and scaling:

To use these settings, first set a value for the "Images Per Row". Even if you want to keep the default number of images per row, enter it here to activate the other Divi Booster added settings.

Use the "Image Area Width" to control the width of the images (which will also control the gap between them). A width of 100% will mean the images touch with no gaps, while an image width of 80% would leave a gap between the images equal to 20% of the area occupied by a 100% width image. I hope that makes sense!

Changing the Gallery Grid with Divi Booster (Site-wide)

There is also an option in Divi Booster (under "Divi > Divi Booster > Modules > Gallery") for controlling the number of images per row and their size on a site-wide basis – i.e. it'll apply to all gallery modules on the site:

Changing Gallery Grid Image Sizes with CSS

To manually adjust the size and spacing of the images in your thumbnail grid, you can use the following CSS.

/* Set the image widths */
.et_pb_gallery_grid .et_pb_gallery_item,
.et_pb_gallery_grid .column_width,
.et_pb_gallery_grid .et_pb_gallery_image,
.et_pb_gallery_grid .et_pb_gallery_image.portrait img
{
    width: 250px !important;
}
.et_pb_gallery_grid .et_pb_gallery_image img
{
    min-width: 250px;
}

/* Set the image heights */
.et_pb_gallery_grid .et_pb_gallery_image,
.et_pb_gallery_grid .et_pb_gallery_image.landscape img
{
    height: 250px !important;
}
.et_pb_gallery_grid .et_pb_gallery_image img
{
    min-height: 250px;
}

/* Set the spacing between images */
.et_pb_gallery_grid .gutter_width { width: 25px; }
.et_pb_gallery_grid .et_pb_gallery_item { margin-bottom:25px !important; }

It looks complex, but it's very simple to change it to suit your needs. There are three parts. First we set the image width to 250px. Then we set the height to 250px (to get square images, in this case). Finally we set the space between side-by-side images to be 25px.

The width normally available to the gallery images is 1080px and if the images are take up too much space the ones on the end will be pushed down to the next row. So if you want 4 images per row, make sure that 4*width + 3*spacing <= 1080px.

Divi 2.4 Update

Some extra CSS is required to make it work with Divi 2.4. You need to add the following, changing the bits in bold to suit your needs. The "4n" and "4n+1" parts should be changed to "Xn" and "Xn+1" where "X" is the number of images you want per row, and the "24px" part should be changed to your desired margin width minus 1.

.et_pb_gallery_grid .et_pb_gallery_item { clear:none !important; }
.et_pb_gallery_grid .et_pb_gallery_item:nth-child(4n) { margin-right:0 !important; }
.et_pb_gallery_grid .et_pb_gallery_item:nth-child(4n+1) { clear:both !important; }
.et_pb_gallery_grid .et_pb_gallery_item { margin-right:24px !important; }
.et_pb_gallery_grid .et_pb_gallery_image img { min-height: 0 !important; }
.et_pb_gallery_grid .et_pb_gallery_image,
.et_pb_gallery_grid .et_pb_gallery_image.landscape img
{
    height: auto !important;
}

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

52 Comments

  1. Hi, I'm looking to do an image gallery module where it's different classes from a school. The image will say the year it is in the grid view. When you click on it it will show the caption, which for this instance, would be the list of who is in the front/middle/back row. If I want that to show up when it's clicked on, I also have to have it showing in the grid view. Then there's just an overabundance of text. Does your booster fix this?

    Reply
    • Hi Kyle, I don't think there's anything in Divi Booster that will help with this. But if you are able to share a link to the page, I'd be happy to take a look and see if I can figure out a way to do it.

      Reply
    • Custom CSS for Gallery resizing.. Okay where? That's what I thought I bought Divi Booster for..

      The CSS additions above don't detail exactly where they are supposed to be added.

      Reply
      • Hi gbanta1109, in Divi Booster, you can find the option under "Modules > Gallery" on the settings page. There is no need to add the CSS if you have Divi Booster (as Divi Booster adds it for you).

        For anyone without Divi Booster, there are various options for adding the CSS. This post summaries them:

        https://divibooster.com/adding-css-to-the-divi-theme/

        Reply
    • sorry could you send me that

      Reply
      • Sorry aleks, send you what? Not sure I understand…

        Reply
  2. For some reason the code works well on desktop browsers but gets wonked up when you see it on iOS safari or mobile chrome… I can not figure out why

    Reply
    • I am using 2.6.1 divi on WP 4.4.2

      Reply
      • Hi Justin, are you able to share a link to the page you are testing on? It should help me track down the problem quicker.

        Reply
  3. Hi Dan,
    I've purchased the Divi Booster, but am still have issues getting my images to show up properly in the Portfolio. They are coming in HUGE and cropped. Is this more about the image size in my media library? I have tried everything to get this to work. Can you please take a look and let me know?
    http://redesign.sweetboodesign.com/the-work/

    Thanks so much!

    Reply
    • Hi Cheryl,

      ​Divi Booster didn't previously have options to do what you want with fullwidth portfolios, so I've added them. If you update to the latest version (1.8.6), you should see new options under "Modules > Portfolio (Full Width)". I think the combination of the two of these together should do what you need. I've also put up a couple of posts describing the effect the options aim to achieve:

      https://divibooster.com/stop-fullwidth-portfolio-images-from-being-cropped/
      ​​https://divibooster.com/add-space-between-fullwidth-portfolio-items/

      Reply
    • Hello Dan,
      I try to make a gallery that have different thumbnails then images. I don't know what is wrong at my site but I can't see gallery options , the gallery always is showing a thumb of the image, even if I try to crop manually the thumbnail in image edit mode. Any ideea? I run the latest Divi and your latest version of pluggin.
      Thank you!

      Reply
      • Hi Adrian, I don't think Divi has any way to use different thumbnails for the images. The way the gallery works, I believe, is that it takes the full-size images and shrinks / crops them to the right size for the gallery. It doesn't use the "thumbnail" size from image edit mode, which is why your manual cropping won't show up. I'm not aware of any easy way to use different thumbnails, I'm afraid. Is there a particular effect you are trying to achieve?

        Reply
  4. Hi there,
    I am new to the wp development environment.
    Should I just copy these code to the style.css file to make it work?
    For some reason, it does not work in my case. My gallery just keeps the same :(

    Reply
    • Hi feng, that's right you should just need to copy them to the style.css file. If you're not seeing any change the first thing I'd check is that it's not a caching issue. This post should help you check for that (note: I wrote it about my plugin, but the same applies to the code when added manually):

      https://divibooster.com/divi-booster-and-caching/

      If that doesn't help, send me a link (if you can) and I'll see if I can figure out what's going on.

      Reply
      • hi , i put the code on the custon css of my gallery and nothing happens… how can i make it work?

        Reply
  5. Thank you Dan for the updates for Divi 2.4.!!! Priceless!

    Reply
  6. Hi, I've implemented this code, and it is working nicely…however, when I resize the window to about 1260px…the wrapping isn't playing nicely. I get 3 rows: 3 items (top row), 1 item (middle row), and 2 items (bottom row)

    instead: I would expect 2 rows of three items. Help!

    Reply
    • Hi Janet,

      Are you using Divi 2.4? I just noticed I hadn't updated the code on this post to include the Divi 2.4 compatibility fixes I added to my plugin. Specifically Divi 2.4 starts a new row after every fourth image, which I think will be why you are seeing the layout you are.

      I've now updated the post with a Divi 2.4 section with the extra code needed to get fix this. Hopefully that will get things working correctly for you, but let me know if not.

      P.S. I've removed your email / site address as asked.

      Reply
  7. Hi there,
    Sorry for the second comment :)
    If using your css above is there a way of adding a CSS Class to the code?

    The reason, I can have various galleries different sizes rather than them all looking the same.
    Trying variations on adding a css class and I'm not getting anywhere with it :)

    Many thanks, Pete

    Reply
    • Hey Pete, if you've got a CSS class called "my_gallery_class", for example, you should just need to replace every instance of ".et_pb_gallery_grid" in the code with ".my_gallery_class". Everything else should stay the same.

      Reply
  8. Hi there,
    Love your plugin however bits of it simply don't work, or don't for me.

    If I go to modules > gallery and then change the Grid Layout images sizes noting happens.
    If I use you css it does.

    Certain things seem to work with your plugin like Center the images in grid view.

    It's really odd. Not got an issue using the css you kindly offer to sort these issues but was hoping your plugin would do all this anyway.

    Any thoughts would be great.

    Thanks, Pete

    Reply
    • Hey Pete, looks like I screwed up on this one! I was making a copy of the gallery feature in my plugin to add something similar for portfolios and ended up getting confused and making changes to the gallery feature instead of the portfolio feature! I've fixed it in the latest version of the plugin (to be released in the next day or so. Thanks for catching it and letting me know!

      Reply
  9. Just popped this code in and perfecta!

    I've been putting in tons of hours trying to figure out how to alter the code to suit my site and here you are doing the heavy lifting. Will be getting your plugin asap. Many thanks for doing this – it was really needed and is much appreciated.

    Reply
    • Hi Natalie, looks like the code didn't work quite right with the latest version of Divi. I've updated it so that it should work correctly now. Seems like you managed to fix it on your own though :)

      Reply
  10. Awesome thanks so much! Just what I needed.

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.