This an update to my previous post, How to Customise the Divi Theme Blog Layout, with some additional code that enables you to customise all Divi thumbnail sizes, not just the blog module images.

As this is an update, I’ve left out a lot of the detail that’s in the original tutorial so unless you’re comfortable making changes to your theme files, I recommend you read that one first.

 

A better way to customise Divi’s blog module thumbnails

Originally, the code we used to customise Divi’s blog module thumbnails was a bit like using a sledgehammer to crack a nut. We used this method because, at the time, we couldn’t get the images to hard crop without it, and that’s the design we wanted for the blog.

Since then, we’ve been able to work out what was causing the problem with the help of Robert Staddon from Abundant Designs. If you check out the comments for the original tutorial, you’ll see how Robert’s input helped us come up with this new, improved solution so thanks again, Robert!

The old method replaces the entire blog module shortcode with a customised version, which is fine if you want to full control over the layout, but a bit complicated just to change the image sizes. The new method uses WordPress filters, which Elegant Themes built into the original shortcode, to change the image sizes with a simple function.

 

Updated code to customise all Divi thumbnail sizes

This new method can also be applied to customise the index and archive page, as well as single post thumbnails using different filter tags, which I’ve included in the code below. Just remove or comment out the filters if you don’t want to use them.

Note that the filters for the index and archive page thumbnails have to be applied conditionally so they don’t interfere with the single post thumbnail.

 

How to style the index and archive page thumbnails

To get the same styling on the index and archive pages as on the blog page, you just need to add body.archive .et_pb_post a img to your CSS code from the original tutorial:

.blog-page .et_pb_post a img, body.archive .et_pb_post a img {
float: left;
margin-top: 0.6em;
margin-right: 1.2em;
border: solid 1px #ccc;
padding: 3px;
}

Let me know in the comments if you have any trouble getting this to work, or have any questions or feedback about the tutorial.

Share This