bootScore Without Blurred ‘Featured Images’

I have already dis­cussed bootScores blurred images. The prob­lem was easy: In coop­er­a­tion with Word­Press, bootScore embeds images of size ‘medi­um’ in the post lists. And that even on large screens, where the browsers have to fill much more space than the images could do by them­selves. Con­se­quent­ly, the browsers upsize the images that are too small — and blur them. Or, put anoth­er way: bootScore offers an excel­lent ‘Respon­sive Design’ when it comes to the texts. When it comes to the images, not (yet). Here, we offer a way towards bootScore with­out blurred Fea­tured Images — with the help of HTML‑5:

This time, let me start with the sum­ma­ry before I describe the solu­tions step by step:

Background

Dur­ing the past months, I had set up two demos. On an almost pure Word­Press 6.1¹ and a pure bootScore². Now, I’ve saved the respec­tive screen­shots. The left presents the post list with fea­tured images, as the index.php of an unmod­i­fied bootScore gen­er­ates it. The right presents the post list as gen­er­at­ed by archive-masonry.php³ from the tem­plate pack­age of an oth­er­wise unmod­i­fied bootScore.

In both cas­es, the blur­ring effect aris­es on large screens. In the right pic­ture, it is a bit weak­er because the dif­fer­ence between the space pro­vid­ed and the size of the embed­ded image is small­er. Then I offered two solu­tions, a tra­di­tion­al and an advanced⁴:

• The tra­di­tion­al solu­tion lets Word­Press gen­er­ate an addi­tion­al thumb­nail when upload­ing, whose width of 560px is between the default sizes ‘medi­um’ and ‘large’.⁵ Addi­tion­al­ly, this solu­tion no longer makes the tem­plates ask for the size ‘medi­um’, but for the self-defined size bsTeas­er.
• The advanced solu­tion uses the fea­tures of the tag <img>, as they were enabled under HTML‑5. By that, the pages tell the dis­play­ing browsers which images are avail­able and up to what space they should use which one. But even­tu­al­ly, the brows­er choos­es the right one on the base of this infor­ma­tion.

The point is this:

• In the tra­di­tion­al solu­tion, we — the site edi­tors — still sta­t­i­cal­ly decide which image the brows­er shall embed into the space — even though we don’t know its actu­al size (respon­sive design).
• In the advanced solu­tion, the brows­er decides, because it knows the size of the actu­al­ly avail­able, ‘Respon­sive Design’-conditioned space. And it can decide that because we have told, which images are avail­able with which dimen­sions.

Solutions

• For solu­tions 1 and 2 insert the line add_image_size('bsTeaser', 560, 0, false ); into your functions.php:
• For solu­tion 1, replace get_the_post_thumbnail(null, 'medium') with get_the_post_thumbnail(null, 'bsTeaser') in all tem­plates rel­e­vant to you.
• For solu­tion 2 insert the fol­low­ing lines to your functions.php:

/*
 * Applay the better html-5 based image tag structure (with srcset and sizes) 
 * (C) 2023 Karsten Reincke
 * SPDX-License-Identifier: MIT
 *
 * Created in accordance with 
 * a) https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/
 * b) https://straightvisions.com/en/news/howtos-en/gutenberg-and-responsive-image-sizes/
 */
function html5ThumbnailHtml($html, $post_id, $post_thumbnail_id, $size, $attr) {
  $id = get_post_thumbnail_id($post_id); // gets the id of the current post_thumbnail (in the loop)

  $columnSize=", 400px"; 
  if (is_single($post_id)) $columnSize=""; // take the complete screen for visualization  

  $smSrc="";
  $smSize="";
  $mdSrc="";
  $mdSize="";
  $lgSrc="";
  $lgSize="";
  $flSrc="";
  $flSize="";
  $bsSrc="";
  $bsSize="";
  $defImg=null; 

  $smImage=(array) wp_get_attachment_image_src($id, 'thumbnail');
  if ($smImage!=null) {
    $smSrc=$smImage[0] .' '. $smImage[1] .'w';
    $smSize='(max-width: ' . $smImage[1] . 'px) ' . $smImage[1] .'px';
  }

  $mdImage=(array) wp_get_attachment_image_src($id, 'medium');
  if ($mdImage!=null) {
    $mdSrc=$mdImage[0] . ' ' . $mdImage[1] .'w';
    $mdSize='(max-width: ' . $mdImage[1] . 'px) ' . $mdImage[1] .'px';
  }

  $bsImage=(array) wp_get_attachment_image_src($id, 'bsTeaser');
  if ($bsImage!=null) {
    $bsSrc=$bsImage[0] . ' ' . $bsImage[1] .'w';
    $bsSize='(max-width: ' . $bsImage[1] . 'px) ' . $bsImage[1] .'px';
  }

  $lgImage=(array) wp_get_attachment_image_src($id, 'large');
  if ($lgImage!=null) {
    /*
     * There seems to be a bug in wp_get_attachment_image_src($id, 'large'):
     * the function returns a wrong width (640): Solution: hardcode
     * values in accordance with the definition under settings
     */
    $lgSrc=$lgImage[0] . ' ' . '1024w';
    $lgSize='(max-width: ' . '1024px) '  .'1024px';
    $defImg=$lgImage[0];
    //$lgSrc=$lgImage[0] . ' ' . $lgImage[1] .'w';
    //$lgSize='(max-width: ' . $lgImage[1] . 'px) ' . $lgImage[1] .'px';
  }

  $flImage=(array) wp_get_attachment_image_src($id, 'full');
  if ($flImage!=null) {
    $flSrc=$flImage[0] . ' ' . $flImage[1] .'w';
    $flSize='(max-width: ' . $flImage[1] . 'px) ' . $flImage[1] .'px';
    if(!($defImg)) $defImg=$flImage[0];
  }

  $srcSet="";
  $sizeSet="";
  if ($smSrc) {
    $sep=' ';
    if ( ( ($mdSrc)||($bsSrc) )||( ($lgSrc)||($flSrc) ) ) $sep = ', ';
    $srcSet=$smSrc . $sep;
    $sizeSet=$smSize . $sep;
  }

  if ($mdSrc) {
    $sep=' ';
    if ( ($bsSrc)||( ($lgSrc)||($flSrc) ) ) $sep = ', ';
    $srcSet=$srcSet . $mdSrc . $sep;
    $sizeSet=$sizeSet . $mdSize . $sep;
  }

  if ($bsSrc) {
    $sep=' ';
    if ( ($lgSrc)||($flSrc) ) $sep = ', ';
    $srcSet=$srcSet . $bsSrc . $sep;
    $sizeSet=$sizeSet . $bsSize . $sep;
  }

  if ($lgSrc) {
    $sep=' ';
    if ($flSrc) $sep = ', ';
    $srcSet=$srcSet . $lgSrc . $sep;
    $sizeSet=$sizeSet . $lgSize . $sep;
  }
  if ($flSrc) {
    $srcSet=$srcSet . $flSrc;
    $sizeSet=$sizeSet . $flSize;
  }
  $alt=get_post_meta($id, '_wp_attachment_image_alt', TRUE);
  $class = $attr['class']; // gets classes passed to the post thumbnail, defined here for easier function access

  $html = '<img src="' . $defImg . '" ' . 
         'alt="' . $alt . '" ' . 
         'srcSet="' . $srcSet . '" ' .
         'sizes="' . $sizeSet . ' ' . $columnSize .'" ' .
         'class="' . $class . '" />';
  return $html;
}
add_filter('post_thumbnail_html', 'html5ThumbnailHtml', 99, 5);

You may read the code like this:

• First, the algo­rithm fetch­es the id of the ‘Fea­tured Image’ and sets the approx­i­mate width of a col­umn, the brows­er shall use if the win­dow is larg­er than the width of the largest image.
• Then, the algo­rithm requests the sizes of all defined images and com­putes the val­ues Image-path-width and Image-width Respon­si­ble-for-place-width.
• Final­ly, the list of avail­able images and the list of which image width is respon­si­ble for which space width are cre­at­ed from this.
• And final­ly, this is con­vert­ed as an img tag with srcSet and size list.

So for the feature image used in this arti­cle, the fol­low­ing line is sent to the brows­er:

On this basis, the brows­er itself decides which image to fit where and when. That’s the method for using Respon­sive Images in a Respon­sive Design.

Of course, I did­n’t come up with this or put it from the­o­ry into prac­tice myself. I essen­tial­ly fol­low three sources:

• web­de­sign tut­splus: html5 pic­tures for respon­sive images
• straightvi­sions: guten­berg and respon­sive image-sizes
• developer.wordpress.org: wp_get_attachment_image_src

---

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. as an addi­tion­al exten­sion I only need­ed Bet­ter Search Replace [↩]
2. I uploaded and assigned the ‘Fea­tured Images’ in the size 1280*720 [↩]
3. with an aligned area <header>..</header> [↩]
4. imple­ment­ed by respect­ing the same con­straints [↩]
5. So far, I had rec­om­mend­ed 600x600. Now after some dis­cus­sion, some read­ing up, and exten­sive test­ing I think a 16:9 image with a width of 560px is suf­fi­cient. [↩]