Use Any Image Size or Shape In The Divi Blog Module!
Change Divi Blog Images to Square or Any Other Proportion
Welcome to our fourth and final (we think) tutorial in our “change image aspect ratio” series. Today, we will be using the same math, same code, and the same process as before to change the Divi Blog Module featured image aspect ratio. You can do this by a snippet of CSS code to your Divi website. Be sure to follow along the video to help you easily understand how this works!
▶️ Please watch the video above to get all the exciting details! 👆
NOTE: You might want to also check out a similar but very different tutorial called How To Stop Divi Image Crop. That one actually make the blog use the original uploaded image aspect ratio instead.
Explanation & Calculations
How To Force Divi Blog 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 Blog Module featured image 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 Blog Module so that it can change to the desired aspect ratio. In this tutorial, I kept it very simple! (Just take out the period at the beginning.)
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the PHP tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the functions.php file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Code Snippet Plugins
Otherwise, install a dedicated code snippet plugin, create a new snippet, and paste this code into the PHP code editor.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom PHP code snippets in Divi.
Square 1:1
/*blog image aspect ratio square 1:1*/
.pa-blog-image-1-1 .entry-featured-image-url {
padding-top: 100%;
display: block;
}
.pa-blog-image-1-1 .entry-featured-image-url img {
position: absolute;
height: 100% !important;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 16:9
/*blog image aspect ratio landscape 16:9*/
.pa-blog-image-16-9 .entry-featured-image-url {
padding-top: 56.25%;
display: block;
}
.pa-blog-image-16-9 .entry-featured-image-url img {
position: absolute;
height: 100% !important;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 4:3
/*blog image aspect ratio landscape 4:3*/
.pa-blog-image-4-3 .entry-featured-image-url {
padding-top: 75%;
display: block;
}
.pa-blog-image-4-3 .entry-featured-image-url img {
position: absolute;
height: 100% !important;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Landscape 3:2
/*blog image aspect ratio landscape 3:2*/
.pa-blog-image-3-2 .entry-featured-image-url {
padding-top: 66.66%;
display: block;
}
.pa-blog-image-3-2 .entry-featured-image-url img {
position: absolute;
height: 100% !important;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 9:16
/*blog image aspect ratio portrait 9:16*/
.pa-blog-image-9-16 .entry-featured-image-url {
padding-top: 177.77%;
display: block;
}
.pa-blog-image-9-16 .entry-featured-image-url img {
position: absolute;
height: 100% !important;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 3:4
/*blog image aspect ratio portrait 3:4*/
.pa-blog-image-3-4 .entry-featured-image-url {
padding-top: 133.33%;
display: block;
}
.pa-blog-image-3-4 .entry-featured-image-url img {
position: absolute;
height: 100% !important;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}Portrait 2:3
/*blog image aspect ratio portrait 2:3*/
.pa-blog-image-2-3 .entry-featured-image-url {
padding-top: 150%;
display: block;
}
.pa-blog-image-2-3 .entry-featured-image-url img {
position: absolute;
height: 100% !important;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
Hi, I have used this turorial and the How To Stop Divi Image Crop – Blog, Portfolio, and Gallery Modules tutorial on this page: https://staging.paulinehoogweg.com/blog/
I did use the How To Stop Divi Image Crop – Blog, Portfolio, and Gallery Modules code because the images on the blog tiles were unsharp. It seems to work except for the drawing of the blog Test met glas energie.
I am a bit lost as to why this image is so unsharp. Any thoughts?
Kind regards,
Margreit
Hi Agnes!
Can you please share the URL of the page to check further?
Hi Margriet!
Can you please regenerate the images using reGenerate Thumbnails Advanced plugin and see if it helps?
I have the same issue, and regenerating images does not help.
Haha! I knew if I looked long enough through your notes I’d find what I was looking for. I still say you should incorporate all of these style settings into one Ultimate Divi Blog Module (you can have the name if it’s not already being used… 😉 ) Thank you for taking the time to publish these blog articles for us!
John F.
I would consider it, but I know Divi is redoing the blog so I have decided not to make any plugin for it.
This tutorial has saved my bacon a couple of times! I will never know why Divi doesn’t include these options in the blog module, but this post is extremely beneficial. Thank you!
Hey Spencer,
If you check my Divi past, present, and future post it will explain why they havn’t yet. Glad you find it helpful!
Awesome, super helpful for equalizing the ratio when you have a mixture of video and text articles pulling into a blog feed. Used the Landscape 16:9 option and it lined up almost perfectly. As the videos are fluid iframes I utilized the following code:
/* Blog Page */
/* Article */
.your-chosen-class .entry-featured-image-url {
padding-top: 56.25%;
display: block;
}
.your-chosen-class .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
}
/* Video */
.your-chosen-class .fluid-width-video-wrapper {
padding-top: 56.25% !important;
display: block;
}
Thanks for sharing, James!