Web

Less Blurred Featured Images

/ by Karsten Reincke | Leave a comment

a window blurred by rain

To get less blurred fea­tured images, I sug­gest­ed enforc­ing Word­Press to 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’, that dis­torts 100% of all images: 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, the brows­er dis­plays rec­tan­gu­lar images as squares. The dis­tor­tion is guar­an­teed.

[ en | de ]

Discussion

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. There, the brows­er ren­ders the medi­um-sized image ‘300x169’ 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 5.2.3.1 announce­ment

Consequences

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 https://github.com/bootscore/bs-loop-templates as my new home.php, which does not con­vert 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 bet­ter when I will have changed the now inap­pro­pri­ate titles in the tem­plate . And the tem­plate https://bootscore.me/archives/masonry/ 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().

And how does this …

… sup­port our migra­tion to bootScore? Well, once start­ed with improv­ing the image han­dling, a web design­er will also notice the blurred ‘fea­tured images’ of bootScore. She will try and refine solu­tions. And she may also tack­le them with new HTML‑5 tech­niques. Because with that, a fanci­er image strat­e­gy com­bined with an inte­grat­ed license ful­fill­ment process and its own logo will real­ly make sense. How­ev­er, pic­tures bring col­ors to read­ing. So they should be inte­grat­ed into a cus­tomized col­or con­cept. This post also con­tributes some­thing to this top­ic.

  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