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 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.
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 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.
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 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,
All works fine for the first blog but then the second has a bottom spacing issue, adds more space.
On this page https://belly-slide-com.stackstaging.com/point-of-view-2/ the second iteration of the blog is a direct copy of the first but the spacing under the ‘Read more’ is bigger. I have tried may things and checked in inspector but can’t see why this should be.
If I remove the php to stop cropping this issue goes away, but of course the images are cropped.
Any ideas?
Thanks
Hi Phil!
Please note that the height of the Blog grid is dependent on the highest blog grid. In this case, it is getting set by the 3rd Blog.
Hi Phil!
Maybe, it missed it. Can you please revert back the changes so that I can check again?
Hi Hemant,
I am aware of the height you mention but the second instance of the blog module is a direct copy of the top one and as you can see the space under the ‘read more’ link is much bigger, should be the same.
Thanks
Hi Hemant,
I understand that it will be the longest, but if you compare the top gid of 5 to the bottom grid of 5 there is a geater gap under the ‘READ MORE’ and there shouldn’t be as it is a direct copy of the grid above so should look the same.
Thanks
Phil
Hi, I don’t know what I’m doing wrong, but I can’t seem to get this to work using the blog module, php added in divi assistant. Featured images are square but still appearing cropped. Any advice? https://marenoslac.com/
Hi Marsha!
Please try regenerating the images using this plugin https://wordpress.org/plugins/regenerate-thumbnails/
i have a question that is not directly about image crop but maybe someone can help me.
when i use the divi image gallery i can open the images in a lightbox.
the image that opens in the lightbox is the original uploaded one.
is there a way to assigne one with smaller dimensions to show in the lightbox?
Hi Christian!
The lightbox opens using the external library. However, we can resize the image using CSS.
Hi, it works great thank you! Can you tell me how to use it with divi blog module only with current ID, or class? I will be greatful! Smth like: If ID=blog_1 then run this script? 🙂
All the best
// 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 cropcrop
Hi Tom!
I’m afraid it is not possible right now.
I’m afraid it is not possible right now.
I too would really like to be able to enable this on some blog modules but not others.
Is there ANY way to apply this code only to a single module?
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/
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/