Use Any Image Size or Shape!
Change Divi Gallery Images to Square or Any Other Proportion
Everyone seems to love our other post on changing the image aspect ratio of Divi images, but that tutorial only shows how to do it on the Image Module. In this tutorial, we will be using the same math, same code, and the same process to change the Divi Gallery image aspect ratio using the Divi Gallery Module. You can soon be adding any combination of landscape, portrait, or odd sizes images to the gallery and they will automatically become uniform.
NOTE: You might want to also check out a similar but very different tutorial called How To Stop Divi Image Crop. That one actuallyy make the gallery use the original uploaded image aspect ratio instead.
Explanation & Calculations
How To Force Divi Gallery Image Aspect Ratios
Most of us are familiar with image or video aspect ratios. Lots of times our devices are made to these proportions as well. The first number in the ratio is the width, and the second number is the height. As you can see in the CSS examples below, the CSS trick works with padding and uses a percentage. Basically, the percentage is the height divided by width. To calculate what percentage to use in the CSS for the Divi image gallery item aspect ratios, just use this math formula.
- Divide the second number by the first number
- Move the decimal over two places to the right
- Add a percent sign
Square 1:1 – 1 / 1 = 1.00 = 100%
Landscape 16:9 – 9 / 16 = 0.5625 = 56.25%
Landscape 4:3 – 3 / 4 = 0.75 = 75%
Landscape 3:2 – 2 / 3 = 0.6667 = 66.67%
Portrait 9:16 – 16 /9 = 1.7778 = 177.78%
Portrait 3:4 – 4 / 3 = 1.3334 = 133.34%
Portrait 2:3 – 3 / 2 = 1.5 = 150%
Now you can use this formula for other sizes as well!
Examples & CSS Snippets
NOTE: Always be sure to add the correct class to the Divi Image Gallery Module so that it can change to the desired aspect ratio. In this tutorial, I kept it very simple! (Just take out the dot at the beginning.)
As usual, you can copy and paste these CSS snippets into the Divi>Theme Options>Custom CSS box.
Square 1:1
Landscape 16:9
Landscape 4:3
Landscape 3:2
Portrait 9:16
Portrait 3:4
Portrait 2:3
Like these photos?
Join us on Instagram!
Those images were all taken by myself in Pennsylvania. If you happen to like that sort of thing, follow my Instagram pages for more photos!
there is no logical reason why “padding-top” works for that…but it does I guess…very weird, but thank you! Somebody is a CSS master!
Hi Donna,
Haha, I agree it seems odd, but it actually does make sense if you go deep into the logic of the heights and widths.
That’s a little bit of awesome right there!
Trying to do this with the Fullwidth Portfolio with the Square 1-1 Option. What do I need to add to the 1-1 CSS to fix?
Thanks for any help you can addd here!
Hey Paul, I do have another tutorial for the Portfolio and Filterable Portfolio, so you can try those. https://www.peeayecreative.com/change-the-divi-portfolio-image-aspect-ratio/
However, I do not use nor do I recommend using the Fullwidth Portfolio (or any “fullwidth” modules) because they are not up to date and are very awkward to customize. I suggest using a regular Portfolio and making the row fullwidth instead.
Hi, Im getting “expected RBRACE” shown below. THANKS!
.pa-image-gallery-1-1 .et_pb_gallery_image {
EXPECTED RBRACE
padding-top: 100%;
display: block;
Hi Doug,
You are missing the curly brace } at the end. Give that a try and let me know how it goes!
You fixed my issue with the different thumbnails sizes. Thanks!
Hi Juan,
So glad for that! You are welcome! 🙂
Hi There,
When I add this into the Main Element box under Custom CSS of my Divi Gallery Module, I get EXPECTED colon between lines 2 & 3 and well as UNEXPECTED token “}” at the end.
Here is what I am pasting (and removing the . at begining):
/*image gallery item aspect ratio square 1:1*/
pa-image-gallery-1-1 .et_pb_gallery_image {
padding-top: 100%;
display: block;
}
pa-image-gallery-1-1 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Am I putting it in the wrong box? Which . do I remove? I’d really appreciate any feedback you can give. Thanks!
Hi Laurie,
You need the . at the beginning. You only need to remove the period in the Divi module when you paste just the class there, like “pa-image-1-1”
Bro, this Gallery module was killing me! But then I found your Tutorial.
THANK’S mate!!! Solved all my problems.
Hi Jan, I’m so glad you found it! We have lots of fun solving problems here as you can see! 🙂
Hi, thanks for sharing this code. I am having the same issue as some of the others.
I paste the code and double checked it. this is what my main element in divi shows once I do. It throws in Expected RBRACE and Unexpected Token ‘ } ‘/
/*image gallery item aspect ratio square 1:1*/
.pa-image-gallery-1-1 .et_pb_gallery_image {
padding-top: 100%;
“Expected RBRACE.”
display: block;
}
.pa-image-gallery-1-1 .et_pb_gallery_item img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Unexpected Token ‘ } ‘.
Hi Benjamin,
You can’t place CSS like this in the module. You need to add the class “pa-image-gallery-1-1” to the module, then add the CSS snippet in Theme Options.