The Divi gallery module comes in 2 sizes for your thumbnail images. You can either choose for landscape (400x284px) or portrait (400x516px). In this tutorial, I will be covering how you can change the Divi gallery thumbnail sizes for your site.
You will be learning:
- How to change the Divi gallery thumbnail from landscape to portrait
- How to make a square thumbnail image
- How to stop Divi from cropping the gallery thumbnail images
How To Change The Divi Gallery Thumbnail From Landscape To Portrait
This one is easy to do. Open your gallery module and go to the design tab. Under Layout > Thumbnail Orientation switch to Portrait.
How To Make a Square Thumbnail Image
The gallery module does not come with an option for a square thumbnail. However, we can easily achieve this with a little bit of CSS.
Open the Gallery module and go to the Advanced tab. Place in the CSS field the class mh-gallery-square.
Then go to Divi > Theme Options > CSS and place the following snippet:
.mh-gallery-square .et_pb_gallery_image {
padding-top: 100%;
}
.mh-gallery-square .et_pb_gallery_item img {
position: absolute;
height: 100%;
bottom: 0;
object-fit: cover;
}How To Stop Divi From Cropping The Gallery Thumbnail Images
The gallery thumbnail images are automatically being cropped by Divi. We can disable this function. This means the thumbnail image aspect ratio will be used.
Let me explain this.
When you upload a thumbnail gallery image, this image will be cropped to 400×284 this is an aspect ratio of 100:71. If you change to portrait this will be 400×516 with an aspect ratio of 100:129.
When we disable the cropping function we can upload any image size without being cropped. The important thing for this is that all the gallery images need to have the same aspect ratio. For example, I upload a thumbnail with a size of 400×267 this is an aspect ratio of 3:2. All of your thumbnails need then to have the same aspect ratio otherwise one thumbnail will have a different height than the other thumbnails on your site. So it is fine to have different image sizes, for example, you can also upload an image with 600x400px this is also an aspect ratio of 3:2.
If you need to figure out what aspect ratio you are using you can use the Aspect Ratio Calculator tool.
You can use this code to stop Divi from cropping the gallery thumbnails. Place this in your child theme’s function.php file. Follow this tutorial, how to create a blank Divi child theme to make a child theme.
function wpc_remove_height_cropping($height) {
return '9999';
}
function wpc_remove_width_cropping($width) {
return '9999';
}
add_filter( 'et_pb_gallery_image_height', 'wpc_remove_height_cropping' );
add_filter( 'et_pb_gallery_image_width', 'wpc_remove_width_cropping' );
Thanks!
I was annoyed by the cropped gallerie. Now it works as it should!
Thanks for this hack. I am working on the gallery module and noticed the image are blurred, the function code provided save the day. thanks.
Good to hear it worked for you.
Thank you, Mark! This also worked for me. Now… how do I do the same trick for blog posts?
Hi Mikey,
Follow the steps in this post https://www.markhendriksen.com/how-to-change-divi-featured-image-size-for-your-blog/