Changing Portfolio and Blog Module Thumbnail Sizes

If you find this tweak helpful:


Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

I recently worked on a site that had hundreds of blog posts with images that were square. After updating to Divi and creating a homepage with a blog grid layout, all of these images were cropped to Divi’s 400 x 284 rectangular thumbnail size. In this particular case, the images had text at the top and bottom that were cut off from the new image size. Luckily I found a fairly simple solution for changing the image size that the blog module loads. I also found a WordPress function that will add a thumbnail size with the correct aspect ratio when new images are uploaded. If the images you want to change are already uploaded to your site, you’ll need to regenerate the thumbnails AFTER applying this tweak using this plugin. The following solution works for both the blog module and the portfolio module.


The first thing you’ll want to do is create a file in your child theme folder and name it functions.php. If you already have a child theme installed properly, this file should already exist. Here is a tutorial on creating a child theme.

Your file location should be this /wp-content/themes/Divi-child/functions.php

Now just copy and paste the following code into this file to change the blog module image sizes:

In the code snippet above, the first section is simply importing your child theme style.css file. You should already have this or something similar in your functions.php file. The next section of the snippet changes the blog module image size and adds a this thumbnail size when new images are uploaded.

You’ll want to change the 400 value to whatever image size you need. The following line from above is what adds a new thumbnail size:

You can find more information about this function in the WordPress docs. The function above resizes the uploaded image proportionally, without distorting. You can also hard crop the image by adding a true parameter to the function:

This would hard crop the image from the center position vertically and horizontally. You can change the crop position by adding position values to the function, starting with the horizontal position followed by the vertical:

And finally, if you want to change the portfolio module, you would use this snippet instead:

Keep in mind if you want to change the image sizes for both the blog and portfolio module, you only need to include the add_image_size function once. That is if the images sizes will be the same for both modules. If they will be different, you can include the function twice with different values for each image size. Just make sure the thumbnail name is different for each function:



  1. HUGE help to me, thank you very much! I tried many CSS fixes and none worked right. This is exactly what I needed, I had the same issue as you with the tons of posts with square images. Thank you so much!


    May 27, 2017

  2. I tried this tweak, but my Site turns completely white after saving and I have to restore the original functions.php by FTP. Any idea why this is?


    August 17, 2017

    • Hi Mel. Is is likely that you have a php error which could be caused by just about anything: missing bracket, semicolon, parenthesis. The functions.php file needs to open with

      and end with

      If you turn WP_DEBUG on, it should give you an error instead of a blank screen that should help you pinpoint the problem.

      Brad (admin)

      August 17, 2017

  3. Fantastic! Exactly what I wanted – thanks for posting 🙂


    August 19, 2017

  4. thanks so much for this tutorial, it’s exactly what i needed!! May I also ask, how do I remove a blo post excerpt from the blog post thumbnail? I just want to see the picture thumbnail and blog title, nothing else. And if I can also remove the border that would be just perfect 🙂 thanks so much in advance!


    September 1, 2017

  5. Great tutorial. Thank you so much.

    The code works for the standard portfolio.

    Please, could you post the code for full-width portfolio?

    Many thanks


    September 4, 2017

  6. I copied this into the correct place, and my website went down too.

    The reason was that I had copied <?php in twice.

    I thought I'd selected all and pasted over the top, but apparently this didn't happen. So just make sure you ONLY have <?php at the top and not part way down the code also as I did!


    September 27, 2017

  7. Thanks so much!


    September 28, 2017

  8. What if I want to use custom thumbnail sizes only for certain blog categories? Like my Press Category thumbnails should be 400 x 600, while the Recipe Category thumbnails are 300 x 150. Is that possible?


    October 13, 2017

  9. Hi. I’m trying to make the filterable blog posts layout masonry, like I can do with the blog grid display. I tried using the settings I used for that but they aren’t working.

    add_filter( ‘et_pb_blog_image_height’, ‘blog_size_h’ );
    add_filter( ‘et_pb_blog_image_width’, ‘blog_size_w’ );

    function blog_size_h($height) {
    return ‘9999’;
    function blog_size_w($width) {
    return ‘9999’;

    add_image_size( ‘custom-blog-size’, 9999, 9999 );

    Zachariah Crow

    October 18, 2017

  10. So helpful, thanks a million!


    October 22, 2017

  11. Thank you! This worked perfectly and was a MUCH simpler fix than everything else I saw out there. Of course, it would be NICE if DIVI could just give us this option in the Theme Module Customizer….. but until then…. 🙂


    November 16, 2017

  12. Very helpful, thanks!


    December 4, 2017

  13. Thank you very much!

    Random Stranger

    January 19, 2018

  14. Ypur a start, thanks


    October 3, 2018

  15. Thank you soo much! I was so frustrated at first not finding a sulotion until I read your blog. Now my my images on the filtered portfolio page looks beautiful anf in the correct size.

    On the Divi 1 column page the smaller images underneath the featured image they are still cropped thoug. It still looks good because when you click on the smaller images they pop up in full size in a lightbox but I would like to change the smaller images on the 1 column page aswell and I would also be interested in a good suggestion of how to make the images in the lightbox larger. But thank’s for the great tips so far, soo greatful. Best regards, Mariann

    Mariann McDonald

    January 3, 2019

  16. WOW… Amazing
    Thank u sooooo Much
    you are the best


    March 2, 2019

  17. I’m banging my head against the wall. I put in the code in what appears to be the right place, but I keep getting this error:

    “Your PHP code changes were rolled back due to an error on line 24 of file wp-content/themes/Divi-child/functions.php. Please fix and try saving again.

    syntax error, unexpected ‘<'"

    What does this mean?!


    May 1, 2019

    • Hey there Leah – remove the “<?php" from the snippet you copied here. It's not needed if you're adding this to the existing functions.php file as that line already exists at the top

      greg T

      August 21, 2019

Post a Reply

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

Pin It on Pinterest

Share This