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
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
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.
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 cropThis code snippet will remove the default Divi cropped image size for the portfolio featured image and will use the original aspect ratio instead.
Before
After
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.
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 cropThis code snippet will remove the default Divi cropped image size for the gallery images and will use the original aspect ratio instead.
Before
After
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.
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 cropThis 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
After
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.
Hi Martin, be sure to check out my other tutorials, this one should help: https://www.peeayecreative.com/change-the-divi-gallery-image-aspect-ratio/
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!
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;
}
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!
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.
I can add the chile theam after finishing my website?
Yes, that should be fine.
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
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.
Thank you so much! I was obsessing over the crop issue all of yesterday and this was the simplest, best solution.
Awesome, glad this was helpful!
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?
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.
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.
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’ )
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?
I don’t think so, since this is PHP it’s possible as far as I know.
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.
You’re welcome Tom, I’m very happy to help and glad you could show off your book covers!
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!
Hi Walter,
Happy to hear you are combining tutorials! You are welcome! 🙂
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!
Hi Sudha, that is very strange, do you have it in a media query?
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.
Hi Sam,
I’m afraid I don’t see what you mean. What is the issue?
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.
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!
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
I’m afraid that’s not possible in Divi, sorry.
Thank you Nelson and thank you for all the help you give us on a daily basis
I don’t know what I am doing wrong i just copy and paste but the Code just wont work. Pls help
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.
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.
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
Hi Cecio,
So do you mean you are using the code from this tutorial and it is not working?
Thank you! This was SO helpful.
I’m so glad you liked it!
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!
Hi John,
Not sure what you mean about a blog module that tall. What is causing that? To do what you want you may need to check my other tutorial on this. https://www.peeayecreative.com/change-the-divi-blog-image-aspect-ratio/
great job, thanks dude
You’re welcome Nic!
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!
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.
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
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?
Hi Stefanie,
This tutorial is for the Divi Blog module, but it sounds like you are using something custom so I’m not really sure. You can also check the other tutorial to see if that one works for you: https://www.peeayecreative.com/change-the-divi-blog-image-aspect-ratio/
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?
Hi Lex,
I always recommend using the Divi Theme Builder for blog posts, and then you won’t have that issue.
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?
Yes, that is how you should be making blog posts in Divi as of the 4.0 update. So much control!
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.
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.
Hi Nelson, is there a code that will work to stop the Gallery image cropping if you don’t have the child theme?
No, this is PHP so you need a child theme or maybe try a code snippets plugin.
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.
Hi Shaun,
Are the images being cropped? I didn’t know they did that, can I see?
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 🙂
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. 🙂
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? 🙁
I’m not sure 🙁
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
I’m not sure what you mean. In the Blog module you can show custom post types and this would apply.
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!
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.
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?
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.
Worked perfectly! Thank you so much!!
You’re very welcome!
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 !
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?
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/
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. 🙂
This is where I find my solutions to divi issues!!! very happy thank you soo much!!
Awesome, I’m so glad to hear that!
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!
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.
Hi Nelson!
I am working with your free child theme and Divi Extra. I’ve installed your custom PHP to Stop Divi Blog Feed Featured Image from Cropping. Does not seem to work on my website. Is it possible for you to take a quick look at my home page and let me know if I’ve missed anything? Am I using the wrong code snippet to get remove the feature image height crop on the home page? Thank you Sir!
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.
Hey Nelson,
thankyou for all your great codes and functions and tutorials – really helfpful! This function (added it to your child theme ;-)) solved a big problem of mine, however I’ve encountered a new problem when adding it: When images are stopped to be cropped by the function, the Divi gallery has troubles with the responsive view for tablets. It happens that some images are displayed alone in one line, others are sometimes pushed to the side. I’ve also added some custom CSS to only display three columns in desktop view, but this is not the problem. I could not find a solution to this. Can you maybe help? I added a link to one page that is affected by this problem. Greetings all the way from Austria!
Paul
Hey Paul,
I have investigated the website and everything looks fine on my end.
I appreciate this code snippet!
It worked great to make my blog feed featured images 1:1 on desktop and tablet, however, it’s not working on mobile (particularly on my iPhone). It’s also not working on individual post pages. I used the theme builder for my posts with a dynamic featured image, so I expected to work. Any help is very much appreciated!
My site is https://twobear22divi.wpengine.com/updates/
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.
LIFESAVER!!! This tutorial was awesome thank you so much. I was wondering why the heck were my images getting cropped
Hi Germaine,
I am so glad to hear you enjoyed the tutorial, have a great day!
Hi Nelson!
Thank you for your helpful tips. However, I ask you if it is possible to apply the effect only to the divi filterable portfolio and not to the divi portfolio. Thank you very much!
Almost any code related to the one affects the other, the Filterable Portfolio and Portfolio are almost identical in code except for the filters.
Hi. Thanks for this comprehensive guide. I have applied the code into my child theme and everything looks great —> https://yodegusto.com
However, the problem is the images in the blog module stopped getting resized to thumbnail size. The blog module is showing the full size version of the image in the little space, and that’s a waste of bandwidth and slows down the site.
The original size of my featured images is: 1080x608px.
The thumbnail size should be: ~314x177px.
I have the TinyJPG plugin for optimization. My images are fully optimized in terms of compression and in the minimum resolution they can be to be functional.
Does this code stops WordPress from truly resizing the image?
Yes
Dear Nelson, you’re the best!
Two questions:
1. How to get the images aligned at the bottom instead of the top?
2. How to stop images being cropped in a full width portfolio? It seems your code doesn’t work with the full width portfolio…
Thanks a lot in advance
D
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.
Hi Nelson and PeeAye
Thanks for this great site making divi-building a lot easier!
Would there be a way to center-align each uncropped item, instead of having them top-aligned?
A gallery-modul with uncropped images center-aligned in each ‘gallery-row’ so to say.
Best Jens
You could try object-position https://css-tricks.com/almanac/properties/o/object-position/