Change Divi Image Gallery Grid Thumbnail Sizes

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

The Divi Theme's image gallery module gives you the option of displaying your image gallery as a series of thumbnails (grid view). I've added an option into Divi Booster (under "Modules > Gallery") to easily control the number of images per row and their size:

Technical Details – Changing Gallery Grid Image Sizes

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;
}

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

50 Comments

  1. I've tried changing the ratio on the gallery thumbnails, but my thumbs are still cropped. Also, when I try to change the max height, it doesn't seem to affect anything.

    I've reloaded the images after changing the cropping in . All software up to date.

    Reply
    • Hi dave, is there any chance you're able to send me a link to the page you're working on so that I can take a look? Thanks!

      Reply
  2. Is there any way to display 2 images instead of 1 in the "slipped" (not grid) option of the gallery?

    Reply
  3. I've been unable to create a gallery with DiviBooster customizing the image size and images per row (the reason I purchased DiviBooster). I've tried manually with code provided as well.

    Is this feature of DiviBooster not compatible with Divi 3?

    Reply
    • Hi Grant, yes the feature should work correctly with the latest version of Divi (it is on my test sites at least). Looking at the source code of the gallery in the page you've linked in your comment, it looks like you've got the following settings:

      Gallery Module Settings > Layout > Images per row: 3
      Gallery Module Settings > Layout > Image max width: (not set)
      Gallery Module Settings > Layout > Image max height: (not set)

      I'd expect that changing these will let you control the images per row and image width / height. Note that the image width is a percentage of the space available to the image given the images per row setting. For example, with 4 images per row, setting this to 100% would cause each image to take up the full 25% of the page width available to it, while setting it to 80% would make the image take up 20% of the page width, with the remaining space being margin. The height is given as a percentage in the same way.

      If you're still having trouble with it, perhaps you can let me know what settings you've applied / what you're trying to do that isn't working? Thanks!

      Reply
  4. Posted this in the wrong discussion – the code is working well for me, so far. I'm sure this will be a very basic question, but need to make sure I'm getting it right in the code. I'm making the row wider, with 5 images in each line, but there seems no way to make the module align centred in either the row or module settings. Assume I need to add it to the css? Any thoughts on what I need to add and where?

    Reply
    • Hey David, in recent versions of Divi there's an option in the row settings that should help you. Go to "Row Settings > Design > Sizing > Row Alignment" and set it to centered (by clicking the "centered alignment" icon). This centers the row, so if you have an 90% width row, it will put 5% margin on each side, with the 90% row area centered. The gallery, however, will be left-aligned within this row area, and so might appear uncentered. The easiest solution, if it works for you, is to set the row width equal to the width of the gallery. That way, the gallery will appear centered. If that doesn't work for any reason, let me know (and if you're able to share a link showing how things are currently set up, please do). Also, I'll delete the comment posted in the other discussion. Thanks!

      Reply
  5. Hello,

    I get a Expected RBRACE. error with the code below

    Reply
    • Hi Nico, that error means that there is a right brace symbol "}" missing. I've checked the code and it is validating / seems to have all the required braces. Two things I can think of that might cause this are:

      1) A brace missed when copying the code from this post. Can I suggest deleting what you previously copied and copy the code across again? That might be all it is.

      2) An error elsewhere in your CSS file (i.e. an opening brace with no corresponding closing brace).

      If you still can't track down the issue, is there any chance you could send me a full copy of your CSS code (via the contact form) so that I can take a look?

      Thanks!

      Reply
  6. If you don't want to break the layout of the image grid when viewed on a smaller viewport use following CSS:

    .et_pb_gutters3 .et_pb_column_4_4 .et_pb_grid_item {
    width: 24.2%;
    margin: 0 1% 1% 0;
    }

    @media all and (max-width:980px) {
    .et_pb_column .et_pb_grid_item:nth-child(n) {
    width: 32% !important;
    margin: 0 1% 1% 0 !important;
    }
    }

    @media all and (max-width:767px) {
    .et_pb_column .et_pb_grid_item:nth-child(n) {
    width: 49%!important;
    margin: 0 1% 1% 0!important;
    }
    }

    This example is optimized for 4 pictures in a row and will minimise the image spacing.

    Reply
    • Thanks for sharing, Vladimir!

      Reply
    • Very handy, Thanks Vladimir!

      Reply
    • This doesnt seem to be working anymore

      Reply
      • Thanks for the update, Etu. Is there any chance you're able to post a link to the page you're working on so that I (and possibly Vladimir if he sees this) can take a look and see if it can be fixed? If the link is private, please feel free to send it to me through my contact form. Thanks!

        Reply
  7. Hi! thanks for the posts but I d like to know how to center the gallery as it stays on the left margin

    Reply
    • You're welcome, pilar. Any chance you're able to send me a link to the page with your gallery, so that I can check it out and make sure I'm giving you the right advice?

      Reply
  8. Thank you works great! DiviVersion: 3.0.34

    Reply
  9. This works perfectly on the new Divi 3.06 too. Thank you so very much!

    Reply
  10. Hi Dan
    Is there a way of not showing the photo name in a gallery, I'd like the comment/caption to show but not the name of the pic.

    I'm playing with a gallery at the bottom on this page and can't remove the title.
    http://www.wsf.wales/junior-squad/
    Thanks
    Andy

    Reply

Submit a Comment

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