How To Stop Divi Image Crop Tutorial by Pee-Aye Creative

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

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?

This Simple Guide Will Stop To All 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 and end to it once and for all. I’m going to give your three solutions today and stop the crop in the following four Divi modules.Β 

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

Stop Divi Portfolio Featured Image from Cropping

How to Stop Divi Portfolio and Divi Filterable Portfolio Featured Image Crop

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.

All you have to do is add the following code snippet to your Divi child theme.

Add this snippet to the functions.php file of a Divi child theme. If you don’t already have one, you can download our free Divi child theme here.

// 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 filterable portfolio module featured image crop

After

how to remove Divi portfolio module featured image crop
how to remove Divi filterable portfolio module featured image crop

Stop Divi Gallery Images from Cropping

How to Stop Divi Gallery Image Crop

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.

All you have to do is add the following code snippet to your Divi child theme.

Add this snippet to the functions.php file of a Divi child theme. If you don’t already have one, you can download our free Divi child theme here.

// 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 gallery module image crop

After

how to remove Divi gallery module featured image crop

Stop Divi Blog Feed Featured Image from Cropping

How to Stop Divi Blog Module Featured Image Crop

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.

All you have to do is add the following code snippet to your Divi child theme.

Add this snippet to the functions.php file of a Divi child theme. If you don’t already have one, you can download our free Divi child theme here.

// 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 blog module featured image crop

After

how to remove Divi blog module featured image crop
22
Last updated Jan 3, 2021 @ 1:10 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

78 Comments

  1. Martin Heidler

    Hi Nelson,
    I’d like to use more than one Divi gallery modules on a website and I need different thumbnail sizes and ratio for these galleries. Can you recommend a solution using your tip Β»Stop Divi Gallery Images from CroppingΒ«?
    Thank you very much!
    Would be glad to hear from you. Regards from Berlin.

    Reply
  2. Mauricio Morales

    Hi Nelson,

    Thanks so much for your excellent tutorials. I particularly like how you go on detail explaining how the code works so we can adjust it as needed.

    Is there a similar code I can use to prevent Divi from cropping my featured images in the Blog Module, in Fullwidth layout mode?

    Thanks in advance!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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
  3. Chris

    Hi Nelson!

    I implemented the “stop divi image cropping” and “change portfolio module image ratio” and everything works fine on the frontend. However, I started noticing now my media library in gallery view does not load any images anymore. Do you see any reason why that is? Thank you very much!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Chris,
      I can’t imagine that it is related, even if it seems like it. The code specifically targets the parts of Divi. Maybe some kind of plugin conflict, not sure.

      Reply
  4. Facundo

    I can add the chile theam after finishing my website?

    Reply
  5. Rich

    Hi Nelson,
    Thanks so much for this.

    You resolved the issue of my gallery images cropping… Only issue I have now is, my galleries page takes a long time to load. I assume its now loading full resolution images?
    Is there a way around this?

    Thanks again

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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
  6. Ginny

    Thank you so much! I was obsessing over the crop issue all of yesterday and this was the simplest, best solution.

    Reply
  7. Michael

    Hi Nelson,

    Thanks for this – super detailed & helpful! Will the code snippet for the blog module only work for the mosaic or grid blog layouts?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Micheal,
      It’s my pleasure. I don’t think I have tested it on the fullwidth layout, so if you do let me know if it works for that too! I think it should.

      Reply
  8. Moosetrax

    Hi Nelson,
    Is there a way to remove gallery image cropping on certain pages, rather than site wide?

    Thanks, by the way, your posts are super informative and helpful. I’m glad I ran across your site.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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
      • 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?

  9. Tom

    This is great, worked first time, super easily. Really appreciate you putting this out as I’ve been trying for ages to get portrait images to work in a design (book covers – they look rubbish cropped!)
    Much appreciated.

    Reply
  10. Walter Hildebrand

    Awesome. Great help! This behavior in Divi was driving me crazy. Works like a charm in combination with your other solution for blogs (displaying images as squares at ratio 1:1 and zooming in on hover). Thank you so much for all your efforts!

    Reply
  11. Sudha

    Hi Nelson, thank you so much for this helpful post! My page is looking great on desktop, but my blog module featured images are still cropping to the default size on mobile. Would really appreciate your help!

    Reply
      • 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.

      • 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.

      • 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!

  12. philipe girard

    Hi Nelson,

    is it possible to have different widths and not different heights on the gallery module. Like in my screenshot? Thank you in advance for your answer

    Reply
      • philipe girard

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

  13. Kevin

    I don’t know what I am doing wrong i just copy and paste but the Code just wont work. Pls help

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Kevin,
      It looks like you are adding this code to the style.css file…that is only for CSS. This type of code needs added to the functions.php file.

      Reply
  14. Aravind Kumar
    Great Article. Can you please provide code to remove crop of Featured Image for Divi's Extra Theme Blog  Feed and Posts as the given is only working for Divi's Blog Feed and Posts.
    
    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Aravind,
      It’s been ages since I used Extra, if I get a chance someday I will check but you could ask in an Extra Facebook group if you need help with this now.

      Reply
  15. Cecio

    Hi, thanks for your code, I’ve been struggling with this for 3 days. but unfortunatly it doesn’t work as it should. I’m using the divi blog module with the grid layout option and thanks to you code now I have the right ratio for the image, but the photo is still cropped. I’ dont know what to do :c

    Reply
  16. Angela

    Thank you! This was SO helpful.

    Reply
  17. John Sharkey

    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
  18. Nic Mallo

    great job, thanks dude

    Reply
  19. Linda

    Hello. This is the answer I’ve been searching for – works beautifully. Except… I have my gallery configured to two rows. For some reason, there is a glitch and some rows show a missing image. I have tried playing with the proportion % and the spacing, and it doesn’t seem to make a difference. Any ideas? Here is the page I am working on: https://arthurlazar.com/moseys/ This is the CSS I am using to create 2 columns:
    width: 40% !important;
    margin:10px !important;
    clear: none !important;
    Thank you!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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
      • 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

  20. stefanie childs

    Hi! I would LOVE for my featured images to be shown as a square. I added the code above to my child theme Functions.php and the featured images on my filterable blog posts are still showing up as a horizontal image rather than a square. It looks bad because my images are being cropped. I wanted them to be a square as I had uploaded them. Any idea how this wouldn’t be working with my theme? Here is an example of how they are being cropped: https://stefaniechilds.com/category/families/.

    I am working with a recently purchased new Divi theme I purchased from here: https://lovelyconfetti.com/product/meryl-photography-divi-child-theme/ . Would there be code that is already added to the theme that is over-ridding your code? I have years of featured images from old blog posts that are all squares, so it would be beyond time consuming to go back in and add recropped photos for the featured images. Any ideas how I could make the code snippet work for my website?

    Reply
  21. Lex M

    Hello! I’ve used this fix on my site and it has fixed the issue of images being blurry on the front page. However, I’m finding that when I click into a post, the featured image at the top is blurry. I can’t figure out how to remove cropping for the single featured image inside a post. Do you have any suggestions?

    Reply
      • 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?

  22. Kentote

    Hi Nelson,
    Is there a way to remove stop Divi Blog Feed featured image from cropping on certain pages, rather than site wide?

    I would like to apply it to search results only but I can’t find anywhere how to apply it only to one page or to one Divi Blog Feed.

    Thanks in advance.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi there,
      You maybe be able to modify the PHP with some code like “if” and “return” based on page id, but I have not tried this and am not a PHP expert.

      Reply
  23. Claire Taylor

    Hi Nelson, is there a code that will work to stop the Gallery image cropping if you don’t have the child theme?

    Reply
  24. Shaun

    Hi Nelson! Is there a way to achieve this with the Shop module of Divi. If the product images are more vertical and being cropped.

    Reply
  25. Laura

    Hi, thanks I am looking to fix this for a while now but can’t seem to do it. I applied your solution but it doesn’t seem to work.
    As you can see here http://lucie.laurachevalier.fr/portfolio/
    The first image is cropped, it should be squared but doesn’t appear as a square.Any idea why please?
    I did add the code to the functions.php ofmy theme, I put both the one for the blog and the one for the portfolio.
    Thanks πŸ™‚

    Reply
    • 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. federico

    Dear Nelson, many thanks for your magic tutorials! but this time the code above it doesn’t works for me, Maybe I’m doing something wrong.. But what? πŸ™

    Reply
  27. Nicholas Hunt

    Hi Nelson,

    Love all your tutorials! Thank you! Is there anyway to just reduce the cropping for a custom post types featured image?

    Blessings

    nick

    Reply
  28. Angie

    Hi Nelson, the great DIVI teacher.

    Sorry, this is a silly question but if I activate the child theme, will it over-right my current theme?

    Thank you!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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
  29. C Yehuda

    Hi Nelson,
    I really appreciate your tutorials. I’ve learned so much from them.
    I tried the code but it isn’t helping yet. Is it possible that since it’s not a blog, or gallery, and is simply a featured image on the site, that that’s why it isn’t working?

    Reply
    • 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
  30. imonikam

    Worked perfectly! Thank you so much!!

    Reply
  31. D V

    Hi,

    Many thanks for your great work ! This is really helpfull !

    But yes, I have a “but” πŸ˜‰ . I am working on a website. In the category pages, the displayed image is always cropped. The good image-ratio 4:3 is displayed. I did implementation step by step 2 times… But i don’t understand why it doesn’t work correctly.

    I have deleted some posts and images, recreate them, import new image… The same thing. There is something wrong in my work…

    https://www.librairielapetite.com/category/coups-de-coeur/

    Many Thanks !

    Reply
    • 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
  32. Penny

    Hi Nelson, Thanks to your wonderful tutorial, my main blog page images look great (I’m using the same images for Pinterest so I wanted a 2:3). Works great. Except, when I click on the individual post and it opens in it’s own page, the image is cropped again. Can you suggest what I’m missing here? Do I need to do something different with the child theme? Thanks so much for your videos, they’re great! Examples: https://thehorseylife.com/blog/, https://thehorseylife.com/should/ and https://thehorseylife.com/pick-me-up/

    Reply
    • 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
  33. Abdallah

    This is where I find my solutions to divi issues!!! very happy thank you soo much!!

    Reply
  34. Chris

    Hi Nelson!

    I am attempting to work with your free child theme for Divi Extra. I want to install custom PHP to Stop Divi Blog Feed Featured Image from Cropping. I am unable to locate where to enter the code. The Extra Theme seems to lack the Theme Editor option under Appearance. I’ll keep searching, but would greatly appreciate some guidance. Thank you!

    Reply
    • 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

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins β€’ Courses β€’ Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

How To Properly Update Divi

How To Properly Update Divi

In this tutorial, I am going to explain how to properly update Divi by listing the most important steps to take to ensure peace of mind.

Pin It on Pinterest

0

Your Cart