Avoiding distorted featured images is possible. We have shown that. However, our method is not yet optimal: if we let WordPress when uploading, also crop the medium-sized thumbnails as squares, we give up what is commonly expected. Maybe other plugins need the ‘medium’ thumbnails in the original aspect ratio after all. So it would be better if we left the common thumbnail formats untouched.
Solution
- Enter the following lines in your
functions.php:
// let WordPress also derive this square version from the uploaded images
add_image_size( 'bsTeaser', 600, 600, true );- Replace the
trueor1withfalseor0in the recently added lines, with which we had also enabled cropping of the middle size:
//do not(!) crop the medium size images to the defined values exactly
// as it is done for thumbnails
if(false === get_option("medium_crop")) {
add_option("medium_crop", "0");
} else {
update_option("medium_crop", "0");
}- Copy
bootscore-main/index.phptobootscore-child/home.php. - In
home.php, replace the stringget_the_post_thumbnail(null, 'medium')in both places with ‘get_the_post_thumbnail(null, ‘bsTeaser’)
Background
Let’s review these steps for understanding the idea:
With the directive add_image-size, we enforce WordPress — when it loads an image into the media library — not only to compute the traditional smaller sizes as they are configured in Settings/Media, but also to create a 600x600 thumbnail. With the name bsTeaser we can request the path to this new image from WordPress to embed it in a post.1 And with the inserted value true we make WordPress cropping the original to a square.
So, why 600x600 and not 300x300 or 400x400 squares? This is due to bootScore! Bootstrap — and thus bootScore — do not work with absolute sizes. Rather, they divide the available space into 12 columns of equal width. And sizes are then specified relative to column widths. Something like as wide as including column 4 up to and including column 6. Of course, Bootstrap says this much more elegantly and in a more ‘encapsulated’ way. But the effect is the same: how much space there actually is from column 4 to column 6 is determined by the size of the screen on which the page is shown.2 So an image that is fitted into a space like this usually has to be converted. If it is rendered down, it will remain sharp, even if fewer details are visible. If it is rendered up, it will be blurred: WordPress can not know, how to fill the new space in accordance with reality. So if we want to add images to bootstrap areas in a way that they look good on large screens, we need to increase the likelihood that the images will be rendered down rather than rendered up. The best way to do that would be to just embed the original images into the pages and let the client machine decrease them. But this slows down the delivery of a page: transferring larger images over the net takes more time than smaller ones. And decreasing larger images needs more computing time than decreasing smaller ones. In fact, we are trying to find empirically the best solution. And thus — for now — 600x600 seems to us to be the best size.
After all, in our previous post, we had urged WordPress to crop the medium size as well. We have to resolve that. Just deleting the corresponding lines from the functions.php is not enough, though. WordPress has remembered our previous settings. So we have to overwrite them explicitly.
Finally, we copy the file index.php from the bootScore main theme under the name home.php into our child theme folder. By doing so, we provide WordPress with a startup file higher in its template hierarchy, so we don’t deprive ourselves of the fallback solution.
Remaining to mention, why we don’t replace the previous solution altogether with this ‘better’ one? Well, sometimes good is good enough. The better one would only make more work without advancing the result. So if you are sure that you don’t need the medium files in the original aspect ratio, you can well stay with our first approach.