Code by Day | Explore By Weekend

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

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
40 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Martin Heidler
Martin Heidler
9 months ago

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.

Mauricio Morales
8 months ago

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!

Chris
Chris
7 months ago

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!

Facundo
Facundo
6 months ago

I can add the chile theam after finishing my website?

Rich
6 months ago

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

Ginny
Ginny
6 months ago

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

Michael
Michael
6 months ago

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?

Moosetrax
Moosetrax
5 months ago

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.

Tom
Tom
5 months ago

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.

Walter Hildebrand
5 months ago

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!

Last edited 5 months ago by Walter Hildebrand
Sudha
Sudha
5 months ago

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!

philipe girard
philipe girard
4 months ago

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

Capture d’écran 2020-08-31 à 12.06.51.png
philipe girard
philipe girard

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

Kevin
Kevin
4 months ago

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

Code.png
Aravind Kumar
Aravind Kumar
4 months ago
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.
Cecio
Cecio
1 month ago

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

Angela
Angela
30 days ago

Thank you! This was SO helpful.

John Sharkey
John Sharkey
28 days ago

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!

Nic Mallo
Nic Mallo
13 days ago

great job, thanks dude

Linda
10 days ago

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!

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

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

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart