fbpx

Is WordPress scaling down your tall images? Here’s a fix!

Starting in WordPress 5.3, WordPress began automatically scaling down uploaded images larger than 2560px by 2560px. Previously we had shown a way to disable this feature completely (https://www.foxtrotmedia.com/blog/website-development/wordpress-scales-down-images/), which works, however there is a benefit to not allowing users to upload unnecessarily large files.

So WordPress provides a filter to adjust the threshold size:

// increase the image size threshold to 4000px
function mynamespace_big_image_size_threshold( $threshold ) {
    return 4000; // new threshold
}
add_filter('big_image_size_threshold', 'mynamespace_big_image_size_threshold', 999, 1);

Which is great! However, often we would like to provide a max width for our images while still allowing them to be as tall as they need. This filter only allows you to provide a single value which is used for both a max height and a max width. So if you have an image that is taller than it is wide, it is going to scale down to a size that has a width smaller than your threshold. This could potentially create a “stretching” issue if you’re assuming images are a specific width and then setting them to 100% width.

With that in mind, we’ve developed a nice way to provide both a max width and a max height for this threshold! Just drop the following into your functions.php file and adjust your thresholds as needed:

// Set Image Threshold for Both Width and Height
function custom_image_threshold($threshold, $imagesize) {
	$width_threshold = 1920;
	$height_threshold = 8000;
	
	$image_width = $imagesize[0];
	$image_height = $imagesize[1];
	
	if ($height_threshold > $width_threshold) {
		if ($image_height > $image_width) {
			return min($image_height/$image_width * $width_threshold, $height_threshold); 
		}
		return $width_threshold;
	} else {
		if ($image_width > $image_height) {
			return min($image_width/$image_height * $height_threshold, $width_threshold); 
		}
		return $height_threshold;
	}
}
add_filter('big_image_size_threshold', 'custom_image_threshold', 10, 2);

Now you have much more flexibility in defining your max image sizes!

Let us know in the comments if you have any comments or questions!

Allen Robinson

Director of Application Development
Allen has been responsible for overseeing client website development, implementation, and maintenance at Foxtrot Media for over 10 years. A Computer Science graduate from the University of Wisconsin- Madison, Robinson is a software development and content management system specialist, fluent in CSS, PHP, MySQL, HTML, and JavaScript.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Allen Robinson

Director of Application Development
Allen has been responsible for overseeing client website development, implementation, and maintenance at Foxtrot Media for over 10 years. A Computer Science graduate from the University of Wisconsin- Madison, Robinson is a software development and content management system specialist, fluent in CSS, PHP, MySQL, HTML, and JavaScript.

Post Details

Categories:

Software/Plugins:

Languages:

Related Resources: