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;
}Related Post: Adding CSS to the Divi Theme
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.
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.
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
Hey Mikkel, glad you were able to sort it out, and thanks for sharing your solution!
Mikkel, You just totally saved my bacon on a web project! Why can't we just change the quality in the module settings as surely makes sense on a lot of sites!…in the meantime, this worked a treat!
Thanks, Mikkel, for sharing this php code! It worked like a charme without modifying original theme files :-)
Hi Dan,
Thanks for this.
But shouldn't the formula be 4*width + 3*spacing <= 1080px?
Cheers
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… :)