How to accept images at multiple sizes and aspect ratios and display as standardized image size / ratio?

Question

Lets say I accept guest post submissions. On the post archive page I have the image the user uploaded with the post on the left and an excerpt of the post on the right.

Unless I programmatically prevent the users from uploading images of various sizes and aspect ratios, they will certainly do so. But one doesn't want all sorts of different image sizes appearing on the archive page, they should all be roughly the same size/aspect ratio.

In the case of different sizes but the same aspect ratio the solution isn't too difficult - simply choose the desired size and resize the image appropriately. In most cases this will work perfectly (sure there will be outliers).

But what about in the case of different aspect ratios? Here things become much more difficult. Do we force the user to crop their image to an aspect ratio? If so, how? Do we auto crop the image to the desired aspect ratio? Or do we simply contort the image to the desired dimensions without concern for aspect?

Would love to hear how folks are solving this programmatically or through plugins.

Answer 1

You are right when you predict you will be at the mercy of the uploaders, and they can be very inventive when it comes to sizing and aspect ratio!

My approach is to be very verbose in the front-end UI as to what images are acceptable - "Please upload standard ratio images for example 1200x900, or 800x600. Please note your images will be cropped to this ratio so failure to...." (etc)

If they ignore that, then their images still hit my functions file where I unset the standard WP image sizes, and set my own. A lot of them HARD crop, so it's uploader beware I'm afraid (I left a couple of bonus functions at the end here too):

//Remove all the defaults

function remove_default_image_sizes( $sizes ) {

 //Default WordPress
 unset( $sizes[ 'thumbnail' ] );
 unset( $sizes[ 'medium' ] );
 unset( $sizes[ 'medium_large' ] );
 unset( $sizes[ 'large' ] );

 //With WooCommerce you can remove these too
 //unset( $sizes[ 'shop_thumbnail' ]); // Shop thumbnail (180 x 180 hard cropped)
 //unset( $sizes[ 'shop_catalog' ]); // Shop catalog (300 x 300 hard cropped) 
 //unset( $sizes[ 'shop_single' ]); // Shop single (600 x 600 hard cropped)

 return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced','remove_default_image_sizes' );

//Add our new sizes, xome hard cropped...

add_image_size( 'custom-large', 1200, 900, false);
add_image_size( 'custom-medium', 800, 600, false);
add_image_size( 'custom-thumb', 260, 195, false);
add_image_size( 'custom-blog-cropped', 1200, 500, true );
add_image_size( 'custom-avatar-cropped', 110, 110, true );

//Bonus functions

// Disable WordPress responsive srcset images
add_filter( 'max_srcset_image_width', create_function( '', 'return 1;' ) );

//Remove the hardcoded width and height WP loves setting
function remove_img_attr( $html ) {
 return preg_replace( '/(width|height)="\d+"\s/', "", $html );
}
add_filter( 'post_thumbnail_html', 'remove_img_attr' );