Recently I was working on a project doing a site revamp for a client that wanted to pep up the design of their site, but still use the featured images they had already added to their 1,000+ blog posts at a time before retina screens and responsive images were a factor in web development.
That’s good and all, but now the site was redesigned with blog cards that crop images to specific proportions for retina and non-retina screens. The problem is a good portion of the original featured images came in below the needed dimensions for the thumbnail size crops and at all kinds of different aspect ratios. What we needed was a way to see if the current image has the proper thumbnail size created for it at retina. If it doesn’t then we want to use the non-retina crop. If the image is below that we want to either crop smaller or use a default placeholder that will at least not break our design while new content is created.
That’s where the wp_get_attachment_image_src() function comes in handy (Codex).
With this function we can pass our thumbnail ID and a thumbnail size to get an array containing the thumbnail URL, width, height, and is_intermediate. The last being an boolean returning true if the thumbnail has been cropped to our size or false if the thumbnail was not cropped. If we get true for is_intermediate we know our thumbnail cropped to the proper size and we can just call the_post_thumbnail(‘retina-size’); to use our new image size.
But if is_intermediate returns as false we can continue down our path and call a smaller thumbnail size, or in the case of this client, check for the non-retina thumbnail size and display it if that has actually been created. If it hasn’t we drop down even further to a very small size that stretches to fill the area with a loss of quality, but the proper proportions. I’d probably go with the placeholder instead1.
The full code for that looks like this:
<?php
/*
*
* Check if featured image is large enough to generate the appropriate thumbnail size
* and if it's too small use the smaller thumbnail size
*
*/
if ( $image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'card-thumb' ) ) {
if ( $image[3] ) {
the_post_thumbnail('card-thumb');
} else {
$small_thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'thumb-380-210' );
if ( $small_thumb[3] ) {
the_post_thumbnail('thumb-380-210');
} else {
the_post_thumbnail('card-thumb-small');
}
}
}
?>
It may not be the prettiest with it’s nested conditionals, but it gets the job done on a tight schedule and tighter budget.
Here’s a breakdown of the code:
Line 8 is just checking to see if we get an image returned at all.
Line 9 is checking the is_intermediate value for our image at the card-thumb image size. If that’s true (in this case) we know that our card-thumb size has been cropped properly and we can call that image size with the_post_thumbnail. And we do just that on Line 10.
If that thumbnail doesn’t exist we continue to Line 12 where we create a new variable for our second image size. In the case of this site this is our non-retina, natural image size. We then repeat the conditional check on Line 14 to see if our second size was cropped properly. If it was we use that image. If it was not we use our super small image as seen on Line 17.
If you’re going the placeholder image route you could replace Line 17 with the call to your placeholder image element.
We could likely tidy up this code and make it a bit more functional by implementing some of the custom image srcset functions within WordPress, but this is a quick and easy example of checking if a certain thumbnail size was cropped and returning a backup file if not.
Thanks to @joemcgill for pointing me in the right direction.
