Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Stop Divi Image Crop – Blog, Portfolio, and Gallery Modules

Nelson Miller Profile Orange
Learn how to stop the featured images from being cropped in the Divi blog module and portfolio modules, as well as images in the gallery module.

Ready To Stop Divi Image Crop?

Divi is a remarkably good tool, but sometimes we face a niche or specific challenge that is not possible by default in Divi. You will find that all of our popular Divi tutorials address problems like this, so if you are new to the blog — that what ya get!

There is one common issue I see a lot, and I wanted to put an end to it once and for all. I’m going to give you three solutions today and stop the crop in the following four Divi modules.

  • Divi Portfolio/Filterable Portfolio Module
  • Divi Gallery Module
  • Divi Blog Module

▶️ Please watch the video above to get all the exciting details! 👆

How To Stop The Divi Portfolio Images from Cropping

The Divi Portfolio Module and the Divi Filterable Portfolio Module crop the featured image by default. This is fine sometimes, but if you want to show off your projects in their original shape, for example, a square, you need to modify Divi with some PHP code. This tutorial will show you how to remove the crop from the Divi Portfolio Module and the Divi Filterable Portfolio Module.

Where To Paste The PHP Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the PHP tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the functions.php file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Code Snippet Plugins
Otherwise, install a dedicated code snippet plugin, create a new snippet, and paste this code into the PHP code editor.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom PHP code snippets in Divi.

// Begin remove Divi Portfolio and Filterable Portfolio featured image crop
function pa_portfolio_image_width($width) {
	return '9999';
}
function pa_portfolio_image_height($height) {
	return '9999';
}
add_filter( 'et_pb_portfolio_image_width', 'pa_portfolio_image_width' );
add_filter( 'et_pb_portfolio_image_height', 'pa_portfolio_image_height' );
// End remove Divi Portfolio and Filterable Portfolio featured image crop

This code snippet will remove the default Divi cropped image size for the portfolio featured image and will use the original aspect ratio instead.

Before

Divi portfolio module featured image crop
Divi portfolio module featured image crop

After

Divi portfolio module featured image crop
Divi portfolio module featured image crop

How To Stop The Divi Gallery Images from Cropping

The Divi Gallery Module also crops the images by default, which is usually nice. But sometimes you want to have these uncropped and display at the same aspect ratio as the actual images. This tutorial will show you how to remove the crop from the Divi gallery module.

Where To Paste The PHP Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the PHP tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the functions.php file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Code Snippet Plugins
Otherwise, install a dedicated code snippet plugin, create a new snippet, and paste this code into the PHP code editor.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom PHP code snippets in Divi.

// Begin remove Divi Gallery Module image crop
function pa_gallery_image_width( $size ) {
return 9999;
}
function pa_gallery_image_height( $size ) {
return 9999;
}
add_filter( 'et_pb_gallery_image_width', 'pa_gallery_image_width' );
add_filter( 'et_pb_gallery_image_height', 'pa_gallery_image_height' );
// End remove Divi Gallery Module image crop

This code snippet will remove the default Divi cropped image size for the gallery images and will use the original aspect ratio instead.

Before

Divi portfolio module featured image crop

After

Divi portfolio module featured image crop

How To Stop The Divi Blog Feed Images from Cropping

Last but not least, we all know the Divi Blog Module crops the featured image by default. Sometimes this is not very noticeable if your images are a similar shape, but there are times this can be very annoying. You want to have vertical or square images as your featured image in the Divi blog feed. This tutorial will show you how to remove the crop from the Divi blog module.

Out of the box, Divi creates an additional image size for the blog featured image, which is smaller than the one shown on blog posts. Our method here will simply remove that smaller size and replace it with the original size, which will also give it the same aspect ratio as the one you upload.

Where To Paste The PHP Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the PHP tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the functions.php file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Code Snippet Plugins
Otherwise, install a dedicated code snippet plugin, create a new snippet, and paste this code into the PHP code editor.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom PHP code snippets in Divi.

// Begin remove Divi Blog Module featured image crop
function pa_blog_image_width($width) {
	return '9999';
}
function pa_blog_image_height($height) {
	return '9999';
}
add_filter( 'et_pb_blog_image_width', 'pa_blog_image_width' );
add_filter( 'et_pb_blog_image_height', 'pa_blog_image_height' );
// End remove Divi Blog Module featured image crop

This code snippet will remove the default Divi cropped image size for the blog feed featured image and will use the original aspect ratio instead.

Before

Divi portfolio module featured image crop

After

Divi portfolio module featured image crop

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

138 Comments

Comments By Members

  1. John Sharkey <span class="comment-author-role-label"><a href="https://wordpress-292293-1617718.cloudwaysapps.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    Hi Nelsen, Really appreciate this. Is it possible to just turn off the height cropping only, but leave the width? When I try just using doing this with the height code I get a blog module that is 9999px in length!

    Reply

Comments By Others

  1. Hemant Gaba

    Hi Christian!

    The lightbox opens using the external library. However, we can resize the image using CSS.

    Reply
  2. Hemant Gaba

    Yes, the code should be under the functions (PHP) tab.

    Reply
  3. Anna T

    Hello! I am not using a child theme as well and i added the code to the “Code Snippets” but maybe I did it wrong? I added it in the PHP tab.

    Reply
  4. Hemant Gaba

    Hi Amanda!

    The alignment code depends on the outer container. Can you please share the URL of the page so that I can provide you the code?

    Reply
  5. Hemant Gaba

    Hi Jacob!

    Your friend can use the third-party plugin “Code Snippets – WordPress plugin” to add the code.

    Reply
  6. Hemant Gaba

    Hi Tom!

    I’m afraid it is not possible right now.

    Reply
  7. Alexandra Gonzalez

    Dear Nelson,

    Sorry for using space in the timeline!!! I’m posting what worked for me… in case other people have a problem.

    (1) Make sure the PHP snippet is not present in your child theme anymore. Please double-check.

    (2) Then please regenerate the thumbnails, as the existing thumbnails might still be those that are uncropped. You can try this plugin: https://wordpress.org/plugins/force-regenerate-thumbnails/

    (3) And finally, clear the cache in all places they are generated. Here’s a checklist:

    >> Optimization/caching plugin cache – If you use an optimization or cache plugin like Litespeed, WPRocket, etc., you need to purge all caches from there.

    >> Divi Static cache – you can clear the cache for this one by navigating to Divi > Theme Options > Builder > Advanced > Static CSS File Generation

    >> Server-side cache – if your web host implements a server-side cache, then you may need to contact them to have it purged (or do it yourself if there is an option inside your hosting panel).

    >> CDN – if you are using a CDN service (e.g. Cloudflare, Bunny, Cloudfront, etc.), please purge its cache as well. Or you may need to disable it for the time being, as the propagation of changes can sometimes take longer depending on the CDN service.

    Reply
  8. Alexandra Gonzalez

    Dear Nelson, thank you for the answer… yes, your tuorial is great because it covers the three different modules!!
    My problem is that once I apply the code I mentioned above [which didn’t differentiate between the 3 modules], even if I remove it from my site, the images don’t get cropped anymore (they should go back to their natural, cropped state if I remove the code)… nothing cached, I don’t understand.

    Of course, I’ll post a comment on this other tutorial and answer here if it’s useful to others. Basically my question was: how do you go back once you’ve removed the corp function!

    In any case, always a big thank you for all your valuable resources.

    Reply
  9. Hemant Gaba

    Hi Charlotte!

    Can you please keep the child theme enabled and share the URL of the page?

    Reply
  10. Hemant Gaba

    Hi Kevin!

    I’m glad it worked for you. Thank you for sharing the feedback!

    Reply
  11. Hemant Gaba

    Hi Anne-Marie!

    It seems the code from the function.php getting removed itself. I’m not sure what could be the issue for it. Please contact the Elegant themes support about it.

    Reply
  12. Hemant Gaba

    Hi Vanil!

    Thank you for bringing the issue to our attention. No need to alter the above codes. Please just add the following code in Theme options:

    .et_pb_fullwidth_portfolio .et_pb_portfolio_item{
    height: auto !important;
    }

    Let me know how it goes!

    Reply
  13. Jay Skeggs <span class="comment-author-role-label"><a href="https://wordpress-292293-1617718.cloudwaysapps.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

    A similar question to this one… how could this same principle apply to a specific Blog Category? We want all categories except for one to crop, but we want the magazine category to show the native un-cropped image. Thanks for your help.

    Reply
  14. Nick

    I have a similar question. If you have multiple gallery sections on a single page, is there a way to apply this only to specific ones via the advanced tab?

    Reply
  15. Vanil Vankilla

    I think I solved the problem. I added a separate code to the fullwidth portfolio module. In addition, I reduced some parameters like:
    object-fit: contain and margin:auto. Thanks to this, large image are not from edge to edge, but centered with an appropriate margin

    I think some parts of my css code are not required, but I’m not sure which parts 😜
    Please look at my code
    /*Aaspect ratio square 1:1

    .van-fullwidth-portfolio-image-1-1 .et_pb_portfolio_image {
    padding-top: 70%;
    display: block;
    }
    .van-fullwidth-portfolio-image-1-1 .et_pb_portfolio_image img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    object-fit: contain;
    margin:auto;
    }

    Best regards
    Vanil

    Reply
  16. Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

    There is no reason to use the fullwidth modules, I would highly recommend switching to the regular ones. Those were created before Divi had sizing options, so they are basically depreciated.

    Reply
  17. Hemant Gaba

    Hey Sarah,

    I have checked the URL and I am not able to replicate the issue mentioned on my end. Please check it on a different browser and see if that helps.

    Reply
  18. Hemant Gaba

    Hey Paul,

    I have investigated the website and everything looks fine on my end.

    Reply
  19. Hemant Gaba

    Hey Chris,

    I am sorry to hear that but issues in the change that require the PHP code can be analyzed from the backend only but when I try the code on my end, it works perfectly fine without any issues. Could you please make sure that you are following the instructions properly?

    Make sure the Child theme is activated and you have placed the code in the functions.php file of the child theme.

    Reply
  20. Hemant Gaba

    Hi Chris,

    You can place the code in the functions.php file of the child theme. You can find the file in the File Manager > wp-content > themes > Free Divi Child Theme > functions.php and there you can place your PHP code.

    Reply
  21. Hemant Gaba

    Hi Penny,

    Okay, I can see what you are talking about. Thank you for the feedback and we will get back to this as soon as possible. 🙂

    Reply
  22. Hemant Gaba

    I am afraid I am not able to replicate the issue on my end as the images are not getting cropped on my screen. Could you please try using a different browser or device and see if that helps?

    Reply
  23. Hemant Gaba

    If it’s just a simple featured image without the use of the Modules mentioned above then the code will not work for you. The code given is strictly for the Portfolio, Filtered Portfolio, Gallery, and Blog Module.

    Reply
  24. Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

    Hi Angie,
    I guess that depends what you put in the child theme, but just activating a blank one will do nothing. It is a child, so it depends on the parent Divi. Now you could absolutely override Divi in the child theme, that’s kind of the point. But it won’t unless you do, if that makes sense.

    Reply
  25. Hemant Gaba

    On the provided URL, I can see the correct image in a perfect square shape with no cropping. Please try opening the URL in some other device and browser and check.
    Let us know how it goes. 🙂

    Reply
  26. Lex M

    Thank you so much for your response! Do you mean creating a template for blog posts so that the featured image isn’t just outputted automatically?

    Reply
  27. Sam Jones

    Just an update for anyone else that might be looking for a solution to this problem…

    My issue seemed to be because I uploaded my images before adding this code to my functions.php file. I’ve since used the Regenerate Thumbnails plugin to regenerate the thumbnails for my featured images. Now all seems to be working as it should be.

    Thanks for the post, Nelson!

    Reply
  28. Sam Jones

    Sorry Nelson, I meant that I’ve got the same problem as Sudha. I added the code my functions.php file to stop Divi cropping featured images in the blog module. It works great on desktop, but Divi still seems to be cropping the images when the site is viewed on mobile devices. Do you have any idea why this might be? As you can see from the screenshot of my functions.php file, I’m not using any media queries.

    Reply
  29. Sam Jones

    Hi Nelson, I’ve got this problem too. Go to the homepage on my website and you’ll see what I mean. I’ve also attached a screenshot of my functions.php file for reference. I just can’t seem to figure it out.

    Reply
  30. Linda

    Hi Nelson,
    Thanks for your response. You are correct, removing the code works, and everything aligns. Now the next problem – the client would like the gallery in 2 rows, which is why that code was in there. Is it possible to code this into 2 rows for desktop viewing?
    Regards,
    Linda

    Reply
  31. Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

    Hi Linda,
    From what I see the images are not missing, but since you are showing the at their true aspect ration they are not aligning. So it seems counter intuitive to what you are trying to do. Don’t use this code and it should work.

    Reply
  32. philipe girard

    Thank you Nelson and thank you for all the help you give us on a daily basis

    Reply
  33. Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

    Hi there,
    Yes, you can get the page idea (when you edit the page the number in the url) and replace it in this code snippet:

    function pa_gallery_image_size( $size ) {
    if(is_page(24811)){
    return 700;
    }
    return $size;

    }
    add_filter( ‘et_pb_gallery_image_width’, ‘pa_gallery_image_size’ );

    function pa_gallery_image_size_height( $size ) {
    if(is_page(PAGEIDHERE)){
    return 500;
    }
    return $size;
    }
    add_filter( ‘et_pb_gallery_image_height’, ‘pa_gallery_image_size_height’ );

    function pa_et_theme_image_sizes( $sizes ) {
    if(is_page(PAGEIDHERE)){
    $sizes[‘225×225’] = ‘pa-et-pb-post-main-image’;
    return $sizes;
    }
    return $sizes;
    }
    add_filter( ‘et_theme_image_sizes’, ‘pa_et_theme_image_sizes’ )

    Reply
  34. Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

    Hi Rich,
    If it’s taking longer then several things comes to mind. If the images were properly optimized before uploading, then it shouldn’t affect the load time much at all. The only way around that would be to use images that are properly optimized, and you could even use a plugin like Smush to change their size.

    Reply
  35. Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label author-label">Author</span>

    Hi Mauricio,
    Sure, I could give that, but I would suggest instead to use the Divi Theme Builder and use an image module with dynamic content set for the Featured Image.

    Otherwise, try this:
    add_filter(‘et_theme_image_sizes’, ‘pa_remove_featured_post_cropping’);

    function pa_remove_featured_post_cropping($sizes) {
    if (isset($sizes[‘1080×675’])) {
    unset($sizes[‘1080×675’]);
    $sizes[‘1080×9998’] = ‘et-pb-post-main-image-fullwidth’;
    }
    return $sizes;
    }

    Reply

Leave a Reply to Christian Friedrich Cancel reply

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

Recent Posts

0

Your Cart