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?
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).
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.
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!
@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.
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?
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?
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.
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 : )
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!
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?
Small update: it works with et_pb_post instad of et_pb_posts…
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;
}
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
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!
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?
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.
this is perfect!!! thank you.
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
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!
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?
Hello Nicolas, this may be caused by the author not being selected in your Divi theme options epanel under Layout Settings. Here’s a post with more info on the Divi layout settings: http://www.elegantthemes.com/gallery/divi/tutorial-epanel.html
Hi, Robert.
The images are correctly resized, but they don’t float to the left or right.
Hello Renner, it’s the CSS code that makes the images float to the left or right. Make sure that you’ve entered it properly and that there are no other rules in your theme that have a greater specificity (http://css-tricks.com/specifics-on-css-specificity/).
Hi Robert, thanks for the tricks.
I try everything but my problem is with vertical feature image. I don’t know what happened. Is impossible to change the size with the code. I sent the link with the example.
Thanks.
http://marianorennella.com/blog/blog/day-funeral-sikkim-2010/
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..
@Maro, are you regenerating all of your thumbnails after you change the size? This is necessary for WordPress to recreate your images with the new sizes. https://wordpress.org/plugins/regenerate-thumbnails/
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.
@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!
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!
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.
@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!
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…
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 🙂 ?
I put it into a child theme so I DON’T run into issues… sorry, for that.
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!
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
@Sam, here’s a little more information about creating a functions.php file: http://justintadlock.com/archives/2010/12/30/wordpress-theme-function-files Note the “s” in “functions”. Make sure to include the “<?php” at the top of the file.
@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/
where would this be added in the functions.php
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!
@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?
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.
@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!
I meant that I changed POSTS (from your code) to POST (not POSTS to POSTS haha)
Yay! That worked perfect. You are rockstar. I suck at CSS and I’m super-appreciative!
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?
@Simon Fisher – Great question! Can you provide a link to the page?
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!
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.
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!
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
thank you for this! I just want to be notified of any future changes on this post.
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
I got this to work right away http://www.serverfarmllc.com/blog/. How could Make the thumbnails a bit smaller still? Do I just change the 320 and 260 in the php file?
thanks
gary
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.
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
Hi Robert, sorry my development site that I am referring to is http://dev.knssconsulting.com/blog-knss-life-mastery/
Your explanation is great! Thank you!
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
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?
Phen. Om. En. Al! Great fix; that’s so much for sharing!
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!
@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.
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.
Hello,
Thank you for the help.
Does this work for divi 3.0?
Yes!
Dear friends,
I am running one blog site http://www.webglut.com in wordpress , where I am using a theme called “EXTRA”. In my article or blog the single page showing featured image too big , which I want to customize the size but I am not able to find it out how to do it. Please visit and check he sample page http://webglut.com/featured/cheap-domain-registration-hosting-in-2017/ .
Please help me on this issue.
Thanks
Dipankar
Hi there, this seems to be a solution for me. Does it work with WP 5 and DiVi 3.19?