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 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
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 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
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 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’ )
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,
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