A better way to deal with Featured Images in index.php and archive.php

[kreincke]

Over the past few weeks, I've been testing out how bootScore and Bootstrap handle images. In the process, I noticed one shortcoming:

If a post has a 'featured image' defined, the bootScore templates 'index.php' and 'archive.php' ask via get_the_post_thumbnail(null, 'medium') for the image what they want to include in their overview lists.

On the one side, WordPress - by default - creates 3 smaller variants when uploading an image. However, it only crops the smallest thumbnail to 150x150, for all others it preserves the aspect ratio. On the other side, bootScore provides for the requested smaller 'medium' files in its overview lists a square space [about(!) 300x300] for a medium sized thumbnails of 300xXYZ which is seldom a square. This means that - in today's version of bootScore - the teaser (featured) images will always have to be scaled up and appear distorted (unless the uploaded image itself is square - but that would violate the 16:9 recommendation for featured images).

How could we get out of this dilemma?

We could persuade WordPress in Function.php to crop the medium file to square size as well. One line would be enough to do so. But this has disadvantages: Other plugins can no longer assume that the medium files have kept their aspect ratio. And - more important - Bootstrap's (sic!) way of calculating sizes is against this way: Absolute values do not exist in Bootstrap. The space is calculated from the number of columns provided. The width of the columns depends on the size of the actual screen. It will be very seldom, that an image with fix sizes matches to the space in which it shall be presented. Now the problem: Every time an image is scaled up because of the larger space, it smears [which will happen on larger screens more likely]. The only solution is to increase the probability that an image will be scaled down, not up. This makes it more likely to stay sharp. [It goes without saying that we should not always ask for the largest image for performance reasons.]

Because I want to use Featured Images, I now consistently do this:

• I force WordPress to calculate another square image of size 600x600 when uploading. I link this size with the name 'bsTeaser'.
• I copy the bootScore-main/index.php into my child theme directury bootScore-child/home.php
• In home.php I replace get_the_post_thumbnail(null, 'medium') by get_the_post_thumbnail(null, 'bsTeaser').

This makes a big difference to large screens. Feel free to test the difference (on your desktop): Go to https://fodina.de/ and look at the post list. The square featured images are sharp. Then insert the word 'Picture' into the search box and look at that list (delivered by the unmodified archive.php). On large Screens, everything blurs.

I've described this challenge in by two posts: https://fodina.de/image-d/ & https://fodina.de/image-e/

Additionally I am going to offer a pullrequest that makes this solution generally available: Your functions.php now contains the command 'Create also a bsTeaser image'. And archive.php and index.php 'medium' is replaced by 'bsTeaser'.

I hope that on this way I could contribute something to make it easier to use bootScore out of the box. I like your work much!