Thumbnail upscale & correct crop in WordPress

By default, the WordPress custom thumbnail size functionality hard-crops large source images into smaller ones perfectly well. However, you will run into size issues when the source image is smaller than the custom thumbnail size.

It can be fixed by adding this code to your theme’s functions.php file. It upscales images to fit all thumbnail sizes and crops them correctly.

/*  Thumbnail upscale
/* ------------------------------------ */	
function alx_thumbnail_upscale( $default, $orig_w, $orig_h, $new_w, $new_h, $crop ){
	if ( !$crop ) return null; // let the wordpress default function handle this

	$aspect_ratio = $orig_w / $orig_h;
	$size_ratio = max($new_w / $orig_w, $new_h / $orig_h);

	$crop_w = round($new_w / $size_ratio);
	$crop_h = round($new_h / $size_ratio);

	$s_x = floor( ($orig_w - $crop_w) / 2 );
	$s_y = floor( ($orig_h - $crop_h) / 2 );

	return array( 0, 0, (int) $s_x, (int) $s_y, (int) $new_w, (int) $new_h, (int) $crop_w, (int) $crop_h );
}
add_filter( 'image_resize_dimensions', 'alx_thumbnail_upscale', 10, 6 );

The slight downside (not much to worry about with the server space we have today) is that if you for example upload a 16×16 favicon to your media library, it will be cropped and upscaled to all larger thumbnail sizes available. So, some more images will be created.

Source

21 Responses

  1. This is a good tip. To circumvent the slight downside you mention, you could check the $orig_w or $orig_h and if it’s smaller then a certain size, you could return early.

  2. saqib says:

    not showing thumbnails in my blog! Please tell me the solution

  3. precious mae says:

    thumbnails when I share it in facebook is not correct. please help.

  4. Stefan says:

    If a custom image size with crop parameter is defined, for example “add_image_size( ‘custom-size’, 220, 220, array( ‘left’, ‘top’ ) )”, your code ignores the crop option. I suggest to replace “if ( !$crop ) return null” with if (!$crop || is_array($crop))

    http://codex.wordpress.org/Function_Reference/add_image_size#Crop_Mode

    • Sanzhar says:

      Can’t get it to work, it still ignores crop option and also messes up soft crop thumbnails.

    • Jack Rugile says:

      If you add the following code right before the line 15 return, it will take into account the crop positions.

      if( is_array( $crop ) ) {
      if( $crop[ 0 ] === ‘left’ ) {
      $s_x = 0;
      } else if( $crop[ 0 ] === ‘right’ ) {
      $s_x = $orig_w – $crop_w;
      }
      if( $crop[ 1 ] === ‘top’ ) {
      $s_y = 0;
      } else if( $crop[ 1 ] === ‘bottom’ ) {
      $s_y = $orig_h – $crop_h;
      }
      }

  5. Otávio says:

    It still doesn’t work with the WordPress native crop position? No solution for that?

  6. Guy Lewin says:

    I’ve been trying to solve this for the past day. Thank you very much!

  7. Wow, nice. I was looking for it a week!
    That keyword “upscale” is unusual for non-English 😀

    You are boss! Now school website will have truly responsive featured images with max width 1200px when old images are mainly 800px width. Respect.

  8. Paul says:

    Thanks for this 🙂
    How would I get this to work for only 1 type of thumbnail size?

  9. volkan says:

    hello alex me need rev6.com like theme pls message me..sry bad englısh for

  10. Brian says:

    THANK YOU VERY MUCH. It did the magic. 🙂

  11. Looking for this since long time.

    Thank you very much.

  12. lore says:

    Hi;
    for me it works fine with some image sizes defined in my theme’s functions.php. But it breaks square image sizes that worked fine before.

  13. I am using this for a while! This is great resolve problem not upscaling image.

Leave a Reply to Alexander Cancel reply

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