To get less blurred featured images, I suggested enforcing WordPress to automatically generate also square bootScore-specific thumbnails of size 600x600. The bootScore templates index.php and archive.php should request these images via the command
get_the_post_thumbnail(null, 'bsTeaser') instead of asking for the medium size. This would make it less likely that a picture would need to be upsized.
For large screens, bootStrap itself offers only a ‘solution’, that distorts 100% of all images: It queries WordPress for medium images1 and lets the browser fit them into a square space. But the generated thumbnails of size medium preserve the aspect ratio of the original. So, the browser displays rectangular images as squares. The distortion is guaranteed.
I also offered my way to the bootScore team, via a pull request and a detailed justification. The responses were interesting. The consensus was that handling images in general — and in particular, cleaning up this unsightly detail — shall be the job for the programming bootScore user. However, including larger thumbnails — as I suggested — would also apply to smartphones, degrade their performance, and thus degrade their SEO.
The SEO hint is certainly correct. That’s why I hadn’t suggested using the large size. But what I still don’t understand is why such a valuable work like bootScore looks worse than it should at a first practical glance. Yes, if you — with the original bootScore
index.php — go through the possible cases with a Mobile Simulator, it shows a consistently good appearance. But just not on a desktop screen of the size 2560x1440. There, the browser renders the medium-sized image ‘300x169’ into a square provided by bootScore — with horrible results.2 And as the devil would have it: bootScore itself demonstrates this ugly effect — by its 126.96.36.199 announcement
Thus, we bootScore users have to think and rework carefully, especially with the ‘Featured Images’. One solution I have pointed out. The bootScore team has shown me another way: I should simply activate a template from https://github.com/bootscore/bs-loop-templates as my new
home.php, which does not convert to a square, like https://bootscore.me/archives/equal-height-sidebar-right/.3
And what can I say: This looks good. It will look even better when I will have changed the now inappropriate titles in the template . And the template https://bootscore.me/archives/masonry/ would look really great, if — yes, if this one existed with a sidebar and if I switched in that template from
And how does this …Bilder
… support our migration to bootScore? Well, once started with improving the image handling, a web designer will also notice the blurred ‘featured images’ of bootScore. She will try and refine solutions. And she may also tackle them with new HTML‑5 techniques. Because with that, a fancier image strategy combined with an integrated license fulfillment process and its own logo will really make sense. This post also contributes something to this topic.
- of size 300x?? — the question marks stand for the value that preserves the original aspect ratio at a width of 300
- And in accordance with Murphy, our customer will be viewing her site on just such a device.
- The template alternatives are provided in the bootScore download section