Divi Blog Module and Image Sizes
So I have been thinking about this for awhile and finally will do something with it… Having used Divi for awhile now, I have discovered some things that I use routinely and thought I would post them here – for me to look back on as well as for others to learn from. I may or may not have created the code for the hacks, nor do I remember where they came from, but I find them useful nonetheless. I take no credit for ones that I did not create, nor can I support them – I just found that they work and wanted to compile them in a place I could easily find them again.
Blog Images Are Different Sizes After Upgrading to Divi
This was part of a thread I was on where the user had changed themes and was having issues since all older blog posts had different image sizes than those new ones which were created since Divi was installed.
The image size used by the blog module is 1080 : 400 if it’s full width and 675 : 250 with the grid layout. When you switch themes, you’ll have to regenerate the thumbnails so old posts will also use the new image size. You can also override those values by adding this code in your child theme functions.php file:
add_filter( ‘et_pb_blog_image_width’, ‘blog_size_w’ );function blog_size_h($height) {
return ‘500’;
}
function blog_size_w($width) {
return ‘500’;
}
This will create an image size of 500 : 500 and of course you are free to change the values as needed. After that, please make sure you regenerate your thumbnails with the Force Regenerate Thumbnails plugin.
How to Set All Blog Images to the Same Size in Grid Display Mode
It seems by default the images in the blog module’s grid display show up in random sizes. I am sure they aren’t really random, but they certainly are not uniform. By adding this you can set them to all be the same.
Add the following to your Divi > Theme Options – Custom CSS
.et_pb_blog_grid .et_pb_image_container img {width: 225px; height: 225px;}
You can modify the height and width to suit your needs.
