Here’s a simple way to change the size of the thumbnail that appears on index pages when using the Divi Theme by Elegant Themes

Index pages are the pages that are displayed when you select a category, e.g. here’s a link to this site’s WordPress Tips Category

No php or HTML coding involved and we won’t be making a child theme.

This method is a much safer alternative to messing about with your core WordPress files and will not interfere with your theme’s code at all.

Elegant Themes have produced a superb theme in Divi but judging by the requests I get, the thumbnail options aren’t quite right for a lot of people. I still recommend Elegant Themes and the lifetime licence package is superb value in the long run. I really like the way that the masonry blog module displays a page of posts and shows a nicely sized thumbnail of the featured image, but that isn’t so great on the index pages – the thumbnails fit the width of the page by default and this can make your thumbnail enormous.

You can choose to turn the post thumbnails off on these pages using the theme options panel, but that may not give you the appearance you desire. The quickest way to fix this is to add a simple CSS rule that will tame the images.

Below, I’ll tell you what I did, but first, a couple of disclaimers:

This worked for me, today with my plugins, theme and setup – you may be using a different combination of things and it may not work for you (but it probably will).

Always, always take regular backups of your database and files.  If you don’t know how, then please google it today. There are many methods so just choose one that works for you.

Let Us Begin

Login to your WordPress dashboard and use the sidebar to navigate to: Divi >> Theme Options

On the General Settings Tab scroll right down to the Custom CSS box.

Type in the following CSS (it must be exact):

.et_pb_post a img {height: 250px; width: auto;}

Click on Save

Of course you can change the height of the image to whatever value you wish but somewhere between 150px to 250px is probably about right.

Visit your site and reload the page.  You may need to refresh your browser’s cache by hitting Ctrl and F5. If you’re using a caching plugin, you will almost certainly need to purge your cache.

NB – This may affect the size of your avatar images on the post comments – here’s a fix:

Add this line of CSS following the same procedure as above:

.et_pb_post .comment_avatar > img {height:80px; width:auto;}

Again, visit your site and reload the page.  You may need to refresh your browser’s cache by hitting Ctrl and F5. If you’re using a caching plugin, you will almost certainly need to purge your cache.

Jump up and down and wave your knickers in the air – You’ve Fixed It!

This code is a piece of style information that doesn’t affect how your site works, it only affects how it appears in a browser.  Because I used the custom CSS box built into Divi, it shouldn’t be affected by a theme update unless ET go and change their CSS, in which case I’ll try and post an update here.

I hope it works for you.  If you appreciated this, please share the good news with a tweet:

I just found this great Divi tip from @mikeycampling - you might find it useful too: https://mikeycampling.com/how-to-change-the-post-thumbnail-size-on-index-pages-using-the-divi-theme-by-elegant-themes/ Click To Tweet

 

%d bloggers like this: