bootScore and the Blurred ‘Feature images’ III

To avoid the trap of blurred images, I sug­gest­ed let­ting Word­Press auto­mat­i­cal­ly gen­er­ate also square bootScore-spe­cif­ic thumb­nails of size 600x600. The bootScore tem­plates index.php and archive.php should request these images via the com­mand get_the_post_thumbnail(null, 'bsTeaser') instead of ask­ing for the medi­um size. This would make it less like­ly that a pic­ture would need to be upsized.

For large screens, boot­Strap itself offers only a ‘solu­tion’, where 100% of all images are dis­tort­ed: It queries Word­Press for medi­um images1 and lets the brows­er fit them into a square space. But the gen­er­at­ed thumb­nails of size medi­um pre­serve the aspect ratio of the orig­i­nal. So, rec­tan­gu­lar images are dis­played as squares. The dis­tor­tion is guar­an­teed.

[ en | de ]


I also offered my way to the bootScore team, via a pull request and a detailed jus­ti­fi­ca­tion. The respons­es were inter­est­ing. The con­sen­sus was that han­dling images in gen­er­al — and in par­tic­u­lar, clean­ing up this unsight­ly detail — shall be the job for the pro­gram­ming bootScore user. How­ev­er, includ­ing larg­er thumb­nails — as I sug­gest­ed — would also apply to smart­phones, degrade their per­for­mance, and thus degrade their SEO.

The SEO hint is cer­tain­ly cor­rect. That’s why I had­n’t sug­gest­ed using the large size. But what I still don’t under­stand is why such a valu­able work like bootScore looks worse than it should at a first prac­ti­cal glance. Yes, if you — with the orig­i­nal bootScore index.php — go through the pos­si­ble cas­es with a Mobile Sim­u­la­tor, it shows a con­sis­tent­ly good appear­ance. But just not on a desk­top screen of the size 2560x1440. Exact­ly there, the medi­um-sized image ‘300x169’ is fit­ted into a square pro­vid­ed by bootScore — with hor­ri­ble results.2 And as the dev­il would have it: bootScore itself demon­strates this ugly effect — by its announce­ment


Thus, we bootScore users have to think and rework care­ful­ly, espe­cial­ly with the ‘Fea­tured Images’. One solu­tion I have point­ed out. The bootScore team has shown me anoth­er way: I should sim­ply acti­vate a tem­plate from as home.php, which does not con­vert to a square, like

And what can I say: This looks good. It will look even bet­ter when I will have changed the now inap­pro­pri­ate titles in the tem­plate . And the tem­plate would look real­ly great, if — yes, if this one exist­ed with a side­bar and if I switched in that tem­plate from the_excerpt() to the_content().

  1. of size 300x?? — the ques­tion marks stand for the val­ue that pre­serves the orig­i­nal aspect ratio at a width of 300 []
  2. And in accor­dance with Mur­phy, our cus­tomer will be view­ing her site on just such a device. []
  3. The tem­plate alter­na­tives are pro­vid­ed in the bootScore down­load sec­tion []
To top