8

Normally when you set a custom image size using hard crop - e.g. add_image_size( 'custom-size', 400, 400, true ); - you get the following results:

  • #1 Uploaded image: 600x500 > Thumbnail: 400x400.
  • #2 Uploaded image: 500x300 > Thumbnail: 400x300.
  • #3 Uploaded image: 300x200 > Thumbnail: 300x200.

However what I'd like to do is when the uploaded image is smaller than the set width, or height, or both, of the custom image size, e.g. examples #2 & #3 above - instead of the image just being cropped to fit within those dimensions - it's also cropped to match their aspect ratio (which in this case is 1:1) like so:

  • #1 Uploaded image: 600x500 > Thumbnail: 400x400.
  • #2 Uploaded image: 500x300 > Thumbnail: 300x300.
  • #3 Uploaded image: 300x200 > Thumbnail: 200x200.

I don't believe this is possible using the standard add_image_size options, but is it possible using a different function, or hook that modifies the add_image_size function?

Or is there a plugin that adds this functionality?

Any information anyone can provide would be greatly appreciated.

  • To further clarify my question. I'd like to be able to configure add_image_size to do what I've described above. I'm fairly sure this isn't possible using the standard parameters, but I'm hoping it's possible using a hook, action, or filter. – Joey Joe Joe Junior Shabadoo Sep 15 '16 at 12:28
0

You're right that it just doesn't work like that.

If it's OK to think of your question the other way around though, you can get the right outcome in modern browsers using a selection of image sizes and responsive images.

If you use code like this:

add_image_size( 'custom-size-small', 200, 200, true );
add_image_size( 'custom-size-medium', 300, 300, true );
add_image_size( 'custom-size-large', 400, 400, true );

... and in your templates something like:

wp_get_attachment_image( $image_ID, 'custom-size-small' )

... then by default (WP 4.4 and later) you will get an image tag with the smallest version from your set as the src and the larger sizes in the srcset attribute, which newer browsers will pick from and display the largest appropriate version.

So then, if a particular image doesn't have a larger version, it doesn't matter. An image that is 300x200 will have a 200x200 version made, that version will be the only one in the HTML and all browsers will show it.

I worked this out while tweaking responsive images so that I get good performance on browsers that only support src and not srcset.

  • Thanks for the reply. This is an interesting solution, but unfortunately I don't think it would work for my situation. Images would be uploaded by the end user - and could be of any size. This solution, unless I'm misunderstanding it, only works if the uploaded images are a fixed set of sizes. For example, the code above would work for an image that was 500x200, but not for an image that was 500x199. – Joey Joe Joe Junior Shabadoo Jul 27 '16 at 3:43
0

This isn't a really good solution since it's a newer CSS solution and it's only working in 78.9% of users browsers, but there are a few polyfills that can overcome that object-fit-images and fitie

img {
    display: block;
    overflow: hidden;
    width: 400px;
    height: 400px;
    -o-object-fit: cover;
       object-fit: cover;
}

Ideally it would be better if the smaller images scaled proportionally on upload, but I haven't been able to figure out a solution for that.

  • Thanks for the reply. I wasn't even aware of this property, but yeah like you said the lack of browser support makes it a no go. Perhaps in a few years from now maybe. – Joey Joe Joe Junior Shabadoo Sep 15 '16 at 12:21
  • I actually just started using "object-fit-images" polyfill and while it seems to work Joey, I haven't actually tested on IE yet since I only have Mac's. Here it is in action though if you want to take a look. It's being used on the grid thumbnails on that page. I know there has to be a plugin out there that solves this problem though. However, so far YoImages is a good accompanying addon to object fit as it lets you change the crop position to any position for each image. – Bryan Willis Sep 19 '16 at 20:39

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.