If you use Divi as your page builder, you must be familiar with the Blog module. This module allows you to place your “blog” anywhere in various types on your website. For example, if you want to create a Posts page, you can combine it with another module, such as Post Title and Sidebar modules.
However, although the Divi Builder Blog module offers plenty of customizations, we found an issue you may notice. The problem is the appearance of the featured images on the posts is cropped. The aspect ratio of featured images on every post is automatically adjusted by default.
This article will show you how to display the featured images in the original aspect ratio in the Divi Blog module.
Steps to Display the Featured Images in Original Aspect Ratio in Divi Blog Module
Step 1: Add a Divi Blog Module
Go to your Divi editor, and we will start everything from scratch, so create a section with a single column, select the Blog module, and insert that module into the column. Once you’ve added the Blog module, you can edit and style up the module to your preference. Don’t forget to save your project by clicking the Save Draft button.
Note: Please ensure you’ve already posted some posts on your site with various aspect ratios and orientations of featured images on each post.
Step 2: Add the Code Snippet to the functions.php File
Here, we will add the simple PHP snippet into the functions.php file to display the featured images in the original aspect ratio in the Divi blog module.
Note: If you are afraid of breaking your site after adding the new function to the functions.php file, you can use the Code Snippets plugin to add a custom function in WordPress. Read here to learn more.
On your WordPress dashboard, go to Appearance -> Theme File Editor.
Once enter the Theme File editor page, select the functions.php and paste the code snippet below:
function ld_blog_crop_image_width($width) {
return 9999;
}
function ld_blog_crop_image_height($height) {
return 9999;
}
add_filter( 'et_pb_blog_image_width', 'ld_blog_crop_image_width' );
add_filter( 'et_pb_blog_image_height', 'ld_blog_crop_image_height' );
Note: Paste the code snippet at the end of the functions file content.
Once you’ve added the code snippet, update the theme file by clicking the Update File button.
That’s it. To see if the PHP snippet you’ve added to the functions.php file works, you can return to the project you created in Step 1.
The Bottom Line
This article shows how easily you can display the featured images in the original aspect ratio in the Divi Blog module. Adding a simple PHP snippet to the functions.php file allows extra flexibility in designing your blog, and working with Divi is more enjoyable.
If you often create WordPress websites with Divi, you can use Divi Cloud for time efficiency. You can store your Divi assets (layouts, theme builder templates, code snippets, etc.) in the cloud, and you can access that from any website you create.
