How to Remove Cropped Images in the Divi Filterable Portfolio Grid

The Divi Filterable Portfolio is a great module for displaying your work or brands you work with, but often you’ll find that the images are cropped to a square size with no way to change them.

Overcome the Divi Portfolio Cropping Issue

I discovered that the images were being cropped somewhere at the server/plugin level, and I didn’t really file like modifying core Divi files. Instead, the below CSS and JS can be added to your existing child theme files to make the Divi Portfolio Grid appear as you hope:

CSS:

.et_portfolio_image {
    height: 170px !important;
    display: flex !important;
    align-items: center !important;
}

JavaScript:

jQuery( document ).ready(function($) {
	var updatedImageArray = [];
	
	// Reformat the URLs and put them in the array along with the corresponding 'this' context
    $('.et_portfolio_image img').each(function() {
		var beforeImgSrc = $(this).attr('src');
		var imgExtension = beforeImgSrc.substring( beforeImgSrc.lastIndexOf('.'), beforeImgSrc.length );
		var afterImgSrc = beforeImgSrc.substring(0, beforeImgSrc.lastIndexOf('-')) + imgExtension;
		
		updatedImageArray.push([afterImgSrc, this]);
	});
	
	// Check if each image URL is actually a displayable image, and if so change the image's src property to the new URL
	updatedImageArray.forEach(function (item) {
	  $.ajax({
			url: item[0],
			error: function()
			{
			   console.log('File does not exist ' + item[0]);
			},
			success: function()
			{
				$(item[1]).attr('src', item[0]);
			}
		});
	});
});

Note that the JS responsible for changing the image URL likely won’t run inside the Divi Visual Builder due to how it loads, but you can always ‘exit visual builder’ to make sure the public will see the proper image sizes on your webpage 🙂