Changing the Featured Blog Post Image Size in Divi 2.0

WordPress Tweaks

The popular Divi 2.0 WordPress theme from Elegant Themes includes a really nifty Page Builder that makes creating custom layouts simple and easy for anyone. The built-in Blog Module for the Page Builder allows you to quickly set up a nice Blog page for your WordPress site with a listing of your blog posts. Unfortunately, it only has two layout options: Fullwidth or Grid.

What if you want to change the size of your featured post thumbnail image in the blog layout so that it floats to the left or right of the post excerpt instead of full width above it?

Featured-Image

I was surprised to find that achieving this basic blog layout was not clearly documented. Fortunately, it was easy to do, thanks to the many built-in WordPress filters that Divi utilizes.

Create a Custom Featured Post Image Size

To create a smaller featured image size and cause the Blog Module to use it, all I had to do was add the following code to my functions.php file:

Now WordPress generated a custom featured post image that was the correct width and height dimensions (e.g. 320px by 260px) and the Blog Module used it as the featured image! (You may have to to Regenerate Thumbnails if you are working with images that have already been uploaded).

Style the New Image

All that remained was styling the image to float to the left and have a right-side margin (or I could just as easily have floated it the right with left-side margin). Because Divi 2.0 is a responsive theme, I chose to only do this on widths that were greater than 768px (e.g. non-mobile). I added the following code to my custom CSS file:

It was a surprisingly simple fix and worked beautifully!

****** Update 10/28/2014 ******

Change Layout on Default WordPress Blog Pages

The above code only applies to the Divi Blog Module in the Divi Page Builder. However, many people utilize the built-in WordPress option to create a static front page with a separate blog page. If you are using the Divi theme, this default blog page and all of the blog archive and category pages will display images full width.

To fix these blog and archive pages to also use a smaller featured image floated to the left or right, you will need to add filters for et_pb_index_blog_image_width and et_pb_index_blog_image_height in your theme’s functions.php file.  So the revised code in your functions.php file would look like this:

You will also want to modify the CSS code given earlier to include styles for these pages to float the image to the left or right:

(Update 12/27/2014: Added “.search .post img” and “.search article:after” below to also make the display work correctly on the search page.)

(Update 7/23/2015: Added “.blog .post img” and “.blog article:after” below to also make the display work on the default blog page in Divi 2.4).

 

68 Comments

  1. DJ Seroton

    Thanks. Just what I needed. It’s amazing how simple things can be hard to change in Divi (like font size!) and how hard things are made easier with the whole page builder thing.

    Reply
  2. Andars

    Somehow it doesn’t work.

    I put the lines in functions.php (in the child theme dir), put in the css code in the stlyes.css, uploaded a featured image and nothing happened.

    Questions:
    – What sizes do you have set in settings > Media?
    – In the css code: is it .et_pb_posts or maybe it should be .et_pb_post (without ‘s’)?
    – In the css code: you say you style the image, but the class tags are generic, not for pics. Isn’t there an ‘img’ missing, i.e. .et_pb_posts img { … }

    Thanks!

    Reply
  3. Robert Staddon

    @Andars, you are correct that the CSS code is for “.et_pb_posts img” and not “.et_pb_posts”. Thanks for reporting that! I have updated the code in the post. By the way, the sizes that Divi uses for the Featured Image are set via WordPress filters and not in “Settings > Media”. That’s why we had to add the filter code to our child theme’s functions.php file.

    I also updated the post with a new section on how to use this layout style on the default WordPress posts page, post category pages, and post archive pages when using the Divi theme instead of just the Divi Blog Module in the Divi Page Builder.

    Reply
  4. Paul Nodseth

    Hi! Thanks for this great advice.

    I have a problem though; somehow this code breaks my site.
    When I paste the code into the functions.php, my front end still works like a charm,
    but my back-end gets the white screen of death.

    I am not very good with php, but I can’t for my life figure out what I do wrong…
    I’ve checked for syntax errors, and can’t find any. Any tips?

    Reply
  5. Robert Staddon

    Hey Paul! Do you have a “<?php” line at the top of your functions.php file? Do you have an error log on your server that would help you pinpoint what line is causing the issue?

    Reply
  6. James

    Hey Robert,
    You’re a lifesaver 🙂 THANK YOU!
    Got it to work right out the shoot.
    For those ridiculously green like me…
    … I put the CSS in Appearance/DIVI Theme Options / epanel / custom css

    Also… I’m a big chicken for many reasons when it comes to modifying the functions.php file.
    Instead, you can upload “my-custom-functions” plugin from WP and insert the code where indicated… works beautifully! (or you can roll your own here… http://justintadlock.com/archives/2011/02/02/creating-a-custom-functions-plugin-for-end-users … but think the plugin adds a couple of safeguards incase of self-inflicted harm 😉 )

    Thanks again Robert 🙂
    I was at the cusp of lamenting having moved over to DIVI.

    Reply
  7. James

    Hi Robert,
    Struck me to pose a follow-up, if you’d be so kind a second time…

    a similar use case is for the category pages…
    i.e. website.com/category/sometopic

    Raise my hand and confess am novice…
    … if simple, would be most helpful and appreciated : )

    Reply
  8. Nico

    Thank you so much, that’s realy simple, when it used with a child theme.

    Better way than wptechcentre article.

    Note, it’s works well with the Divi Children Plugin, i recommend to use both:

    http://divi4u.com/divi-children-plugin/

    For those who are not familiar with child theme.

    Have a nice day!

    Reply
  9. Gabriele

    Unfortunately I was not able to make it works 🙁
    The images are correctly resized to the new values, but there’s something wrong with the CSS part: they simply won’t float.

    I really cannot figure why it doesn’t work…perhaps is it because I’m using a child theme?

    Reply
  10. Gabriele

    Small update: it works with et_pb_post instad of et_pb_posts…

    Reply
  11. Gabriele

    This work, altough it has severe limitations with several plugin that make use of thumbnails.

    Unfortunately your CSS rule will make all the images floating, even the ones inside the post, which is probably not a good thing. I solved with this workaround (there’s probably a better solution, here):

    @media all and (min-width: 768px) {
    .et_pb_posts img:not(.aligncenter), .et_pb_post img:not(.aligncenter), .archive .post img:not(.aligncenter), .category .post img:not(.aligncenter) {
    float: left; margin-right: 1em;
    }

    Reply
  12. Andreas M.

    Hi all,

    just a tip:
    After doing all the above I would get smaller thumbnails but they would still be on top of the text instead of next to it. My solution was to download Regenerate Thumbnails https://wordpress.org/plugins/regenerate-thumbnails/ and run it and everything works now.

    If it helps I used:
    1) ePanel to upload CSS
    2) My Custom Functions plugin as suggested above
    3) DIVI child theme plugin as suggested above
    4) Regenerate Thumbnails

    Reply
  13. Chris Rider

    Thank you so much! This has fixed an issue that was driving me absolutely insane! I used your code in combination with a custom functions plug-in and it’s doing exactly what I wanted. Thank you!

    Reply
  14. Ed

    This works great for the blog module, archive and category pages, but on the search results page, the thumbnails aren’t relocated (though they are sized properly).

    Any idea what I need to add in the CSS to make the search results page work the same as the rest of the pages?

    Reply
  15. Robert Staddon

    Good point, @Ed! I modified the CSS in my post above to also include “.search .post img” in the first rule and “.search article:after” in the second rule. This will allow the featured post thumbnails to float properly on the search page.

    Reply
  16. angela

    this is perfect!!! thank you.

    Reply
  17. Beth

    This is exactly what I’m looking for. I have been trying to figure out how everyone is getting this page format.

    I am extremely new to this blog/website development world. So, I am very scared to make these changes. But may give it a try. Any suggestions on how to begin when you’re a newbie.

    Also, what happens when there is a theme or wp update? Will it override the new functionality?

    Beth

    Reply
  18. Robert Staddon

    Hey Beth! Welcome to the world of WordPress website development!

    A WordPress update will not overwrite the changes above. A theme update also will not overwrite these changes IF you create a child theme of Divi and make the changes in your child theme.

    Here is a tutorial from Elegant Themes on creating a child theme: http://www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial

    And here is the official WordPress documentation on Child Themes: http://codex.wordpress.org/Child_Themes

    Have fun!

    Reply
  19. Nicolas Takacs

    Hi, The fix work, but i’m asking something, if you look at my site:

    http://nexst.ca/blog/

    You will see that the author logo and author name don’t appear, is there something i broke?

    Is there something to add?

    Reply
  20. Renner

    Hi, Robert.

    The images are correctly resized, but they don’t float to the left or right.

    Reply
  21. Maro

    Sorry, Just to tell you I put the values 800 width and 600 height, but it doesn’t matter what I put, the image is always the same..

    Reply
  22. Chris Luke

    Great idea! I tried it and it works, but for now I like the default size of the image in the blog list.

    What I’d like to change is the size of the image in the actual post when I have “Place Thumbs on Post” enabled in the Divi Options>Layout menu.

    Any idea how to do that? They are so big right now! If I can’t figure this out, I’ll probably just turn that feature off, but it’s nice to have that image posted automatically.

    Thanks.

    Reply
  23. Robert Staddon

    @Chris and @Maro, the featured image on the actual single post page uses the “et_pb_index_blog_image_height” filter to set the size. You could change this using the “add_filter( ‘et_pb_index_blog_image_height’, ‘mycustom_featured_height’)” and “add_filter( ‘et_pb_index_blog_image_width’, ‘mycustom_featured_width’)” commands as mentioned in the second section of the article: “Change Layout on Default WordPress Blog Pages”.

    However, keep in mind that this will also change the image sizes on the default blog page and all of the blog archive and category pages as well, because they also use this same filter. To avoid this problem, you could override the Divi theme’s “single.php” file in your child theme (http://codex.wordpress.org/Child_Themes). In your child theme’s “single.php”, you could edit the “apply_filters” calls on lines 20 and 22. One option would be to completely remove those function calls and manually enter your desired height and width as integers.

    Hope that helps!

    Reply
  24. Toni

    Thanks Robert – worked perfectly for me! I separated the two functions so that I could have a different width and height for the two different cases. I wanted a smaller image on the archive pages, but I’m using the masonry layout, so I couldn’t go smaller than 320px on the blog module page.
    I’m very grateful to you!

    Reply
  25. Erin

    I’m getting the white screen of death in my admin panel when I try to insert the second block of code into my functions.php file, which is the block I need to make this work on my site. Any ideas on how to fix this? Thanks so much in advance.

    Reply
  26. Robert Staddon

    @Erin, keep in mind that the second block of PHP code for your functions.php replaces the first one. It’s a revision that expands the first block of code with some extra filters that will allow your default blog page and all of the blog archive and category pages to also display in this new format in addition to the Blog Module in the Divi Page Builder.

    Usually if you get the white screen after editing your functions.php file, the cause is some kind of PHP syntax error. If you’re able to monitor your PHP error logs (talk to your web host), you’ll probably be able to see the exact reason for the error. I’m guessing that in your situation it’s being caused by inserting the second block of PHP code in addition to the first block of PHP code instead of replacing it, which would cause the functions to be redeclared with the same name. It could also be caused by a missing closing bracket. Try to take time to read through the article carefully so that you understand what’s going on.

    Hope that helps!

    Reply
  27. Randall Whitted

    Hi Robert,

    All works as expected which is way awesome, so thanks very much! Only weirdness was it reset my main menu to no selection, displaying every page on the site in the header. I selected my Main Menu in the customizer side panel and it fell back in place. FYI…

    Reply
  28. Oliver

    Thanks! This has saved me lots of time trying it out. I put it into a Child theme so I run into any issues when updating. don’T want to use the my custom functions plugin because I don’t want to bloat the installation. Besides: every plugin is a new potential security threat. I installed regenerate thumbnails, regenerated everything and uninstalled the plugin again. I an always reinstall.

    Cheers from Germany and thanks for writing this up. After having read this I googled for further articles on divi on your blog but found nothing 🙁 care to post more of your insights 🙂 ?

    Reply
  29. Oliver

    I put it into a child theme so I DON’T run into issues… sorry, for that.

    Reply
  30. Richard

    Hello – this solution is perfect except for one small detail – if I apply this to my blog module and set the image size to something smaller for my full width format, it looks weird when I use the masonry or grid layout. Is there a way to set this up so I can use different image sizes for full-width and masonry?

    Thanks!

    Reply
  31. sam

    Hi Guys,

    I tried that code and it threw my whole site down, where exactly should i add the code in the funtion.php file. Im super new to all this and it really didnt work for me. Any chance you could gve me a step by step walkthrough.

    So I want to make my featured images smaller on my posts, for already added images. i added the plug in you mentioned but didnt really know how to work it, so im a bit in the dark im sorry to be such a noob.

    sam from rustic soul

    Reply
  32. Robert Staddon

    @Richard, it appears to me that the blog module’s fullwidth and masonry layouts both use the same filters to set the image height and width. So you might have some issues to work through if you want to have a site with both layouts and you want the fullwidth layout to appear as I’ve outlined in this post. You can study the et_pb_blog() function in Divi’s functions.php if you want to see how the code is generated. You could always override this function by copying the code over to your child theme’s functions.php file and modifying it as needed.

    By the way, always make sure to regenerate your thumbnails after making any change to the sizes you pass to the filter. Simple Image Sizes is my new preferred method for regenerating thumbnails: https://wordpress.org/plugins/simple-image-sizes/

    Reply
  33. nd

    where would this be added in the functions.php

    Reply
  34. Joanna

    This is brilliant – thank you. I just have a comment and a quick question. Comment: the last part works for me when I use POST not POSTS. My question is: Is there a modification I can put it so that this doesn’t also change all the thumbnails within my post and make them go to the left (I had some aligned to the right and they all moved to the left. THANK YOU!

    Reply
  35. Robert Staddon

    @Joanna, it sounds like you are trying to change the featured image display on a single post instead of a listing of posts, correct? Do you have a link to the page?

    Reply
  36. Joanna

    Thanks for answering so quickly. No, I was trying to change them on my main blog page (http://holisticallywhole.com/blog/) and it worked perfectly. But, then it took the thumbnails in my posts and moved them all to the left (here is an example -ALL of the pictures were on the right before – http://holisticallywhole.com/autism-and-dental-surgery-part-4-follow-up-prevention-and-care/). Is that because I changed POSTS to POSTS in the code? When I had POSTS, it didn’t float the text to the left anywhere. I can just go back and hard code each picture in the post, but I didn’t know if there was a way to just avoid it. Thank you for helping me. I really appreciate it.

    Reply
    • Robert Staddon

      @Joanna, you are right! It appears that class names must have changed in Divi 2.4. You’ll need to add the image floating style rule for “.blog .post img” and the clearing style rule for “.blog article:after”. I’ve updated the post!

      Reply
  37. Joanna

    I meant that I changed POSTS (from your code) to POST (not POSTS to POSTS haha)

    Reply
  38. Joanna

    Yay! That worked perfect. You are rockstar. I suck at CSS and I’m super-appreciative!

    Reply
  39. Simon Fisher

    On the client website I have referenced your code works as I wanted it too but I discovered it breaks the gallery module on both the portfolio page and the young love blog post but only on safari on iPad. Fine on other browsers though! The page loads the gallery then you can see the css kick in for the iPad size and it stacks the images 1by1 on top of each other in 1 huge column. If I remove your css then it loads fine. Any ideas?

    Reply
  40. Robert Staddon

    @Simon Fisher – Great question! Can you provide a link to the page?

    Reply
  41. Simon Fisher

    It was a bug with Safari on that particular version of iOS that both myself and client were using! Updated iOS and it worked fine. The site is http://www.documentyourdream.com just in case you wanted to take a look anyway!

    Reply
  42. Phil

    I still find this ridiculous. Since years it is only possible to have a left (or right) floated featured image by accessing the functions.php file. This is a bunch of crap! This should be available as an option.

    As it is today it forces me to touch core php files instead of adjusting it in the options.

    Reply
  43. Vincent

    Hi Robert,

    Thank you so much for the trick; it’s exactly what I was looking for!

    I’m having a small issue with the “border” that you can add using the Advanced Design Settings of the Blog Module.

    As you can see on my blog (http://bp-gaming.com/blog/) there’s no space at all between the border and the thumbnail.

    I can guess there’s a way to fix this with the Margin or Padding properties, but I’m absolutely new to CSS and couldn’t really manage to find the solution.

    The problem is the same for the “Read more” link as well.

    Do you know how I could change this?

    Thanks in advance!

    Reply
  44. Jasmin

    Hi there,

    thanks for the great approach. I just have one small question.

    I would like the posts to show up with left image for first post, right image for second, left image for third and so on..

    Is it possible to do so?

    Thank you very much for the help!

    Regards,

    Jasmin

    Reply
  45. Gary Harding

    thank you for this! I just want to be notified of any future changes on this post.

    Reply
  46. Diederik

    Hi Robert,

    Still works like a charm! Thanks for sharing!

    Do you happen to have the code to do the same for video’s?
    If you add a video to a blog post it’ll also show full width. I would like it to resize to the same dimensions as my featured images.

    Thanks in advance!
    Diederik

    Reply
  47. Sheila Hoffman

    I haven’t tried this yet. I can’t get on a computer until tomorrow and I’m not editing functions.php on a phone! But I’m hoping if I only use the second approach I can impact the WP archive listings WITHOUT impacting the Divi blog grid. I really don’t understand WHY ET hasn’t made this a built-in thing we can do. Seems archaic to me. So far I’ve only used CSS and haven’t figured out how to impact only the thumbnails on the archive lists. It’s messing with the featured images on the blog grid. Not nice.

    THANK YOU for posting this. I will report back with success or issues tomorrow.

    Reply
  48. Brandon

    Hi Robert,

    First let me thank you for the code. I have been searching for a fix for this for a while.

    I’m trying to mimic this websites blog http://tielandtothailand.com/blog and I am having these issues

    1) The image in the blog feed is not the same size and I played with the sizes in the function.php but didn’t adjust

    2) I was trying to make the text in the middle of the feed from the blog post a little wider to look like the website above

    3) For some reason the CSS code effects the actual blog post itself and shrinks that image from 763 pixels wide by 572 pixels high to now 330 pixels wide by 248 pixels high. How do I fix that so they are independent of each other?

    Thank you Robert

    Reply
  49. Paula

    Your explanation is great! Thank you!

    Reply
  50. kwabsgops

    Wow, have been researching a way for this blog post style.
    I would like to know if there is a way to add a calendar look style to my post just like the elegant theme blog style “http://www.elegantthemes.com/blog”. I would appreciate a small hint. Thanks for the post

    Reply
  51. Nicole

    Works great for featured image thumbnails, but doesn’t format audio or video posts. What should be added to make sure all post formats display correctly?

    Reply
  52. TestingMuse

    Phen. Om. En. Al! Great fix; that’s so much for sharing!

    Reply
  53. BigOOPS

    So, I made a big oops when implementing this and put the last bit of code into my functions.php file (code below)…

    @media all and (min-width: 768px) {
    .et_pb_posts img {
    float: left; margin-right: 1em;
    }
    .et_pb_posts article:after { /* Clear floated image */
    content: “”; display: table; clear: both;
    }
    }

    Now my site is locked up…I can access my functions.php file through my cpanel but can find the code in there anywhere (did a “find” in Dreamweaver but nothing came up). I’m a functioning WordPress designer but am NOT a developer. Is there an easy way to find the code in the PHP, remove it, and upload a new file to restore my site?

    Yikes, any help will be amazing!

    Thanks!

    Reply
  54. Robert Staddon

    @BigOOPS Yikes, yes, the CSS styles would go in style.css and not functions.php. If you are using a child theme, you can safely delete your functions.php file from the child theme.

    Reply
  55. Olawale Arowolo

    Great tutorial! But the blog page layout i want to achieve is different from what your codes provides. I want the blog layout of https://en.blog.wordpress.com/. I noticed that the featured image was set as a background image filling the div holding the post title, post meta and post excerpt. How can you help me to achieve this, any direction you will point me will be much appreciated.

    Reply
  56. Anthony

    Hello,

    Thank you for the help.

    Does this work for divi 3.0?

    Reply
  57. Klaus

    Hi there, this seems to be a solution for me. Does it work with WP 5 and DiVi 3.19?

    Reply
    • Rick Reynolds

      It works in the latest WP and Divi–thanks so much!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail. You can also subscribe without commenting.