Change Divi Image Portfolio Grid Thumbnail Sizes

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

The Divi Themeโ€™s portfolio module gives you the option of displaying your projects as a series of thumbnails (grid view). To adjust the size and spacing of the images in your thumbnail grid, you can use the following CSS:

/* Set the image widths */
.et_pb_portfolio_grid .et_pb_portfolio_item,
.et_pb_portfolio_grid .column_width,
.et_pb_portfolio_grid .et_pb_portfolio_image,
.et_pb_portfolio_grid .et_pb_portfolio_image.portrait img
{
    width: 250px !important;
}
.et_pb_portfolio_grid .et_pb_portfolio_image img
{
    min-width: 250px;
}

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

/* Set the spacing between images */
.et_pb_portfolio_grid .et_pb_portfolio_item { 
	margin-bottom:26px !important; 
	margin-right: 26px !important; 
}
.et_pb_portfolio_grid .et_pb_portfolio_item.last_in_row {
	margin-right: 0 !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 adjacent images to be 26px.

The width normally available to the portfolio images is 1080px and if the images are taking 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.

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

28 Comments

  1. Hi. Thanks a lot for the tutorial. When using this, the images are looking very low quality like. Is there something I can do to show the images in higher quality, as it seems like it just shows the photos in the same quality as the standard 4×4 portfolio grid layout and just upscales them.

    Thanks in advance.

    Reply
    • I found out how to do it myself using the code below:
      // Begin custom image size for Portfolio Module
      add_filter( 'et_pb_portfolio_image_height', 'portfolio_size_h' );
      add_filter( 'et_pb_portfolio_image_width', 'portfolio_size_w' );

      function portfolio_size_h($height) {
      return '400';
      }

      function portfolio_size_w($width) {
      return '400';
      }

      add_image_size( 'custom-portfolio-size', 400, 400 );
      // End custom image size for Portfolio Module

      Reply
      • Hey Mikkel, glad you were able to sort it out, and thanks for sharing your solution!

        Reply
  2. Hi Dan,
    Thanks for this.
    But shouldn't the formula be 4*width + 3*spacing <= 1080px?
    Cheers

    Reply
    • Hey Clay, the formula was correct as the spacing was being added to the last item in the row too, though that meant the original padding amount of 25px wasn't correct (since 4*250 + 4*25 > 1080)… I've updated the code to remove the spacing on the last item in the row, so now your formula is the correct one. This means the 25px of padding if now okay, though I've bumped it up to 26px to make more full use of the space available in the row. Technically, of course, there are still a couple of extra pixels of room in the row left over since 4*250 + 3*26 is only 1078… ๐Ÿ™‚

      Reply

Submit a Comment

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