Fasten Your Fancy Images

In the case of Fan­cy Images, we show our read­er first a tiny image. And on her request — wants to say: click — also a larg­er ver­sion. For imple­ment­ing this fea­ture, I ini­tial­ly put the URL to the uploaded image in the href-attribute of the fan­cy link and in the src attribute of the img tag. That slows down our site. We should fas­ten our fan­cy images:

Until now, the brows­er that is sup­posed to dis­play the ‘Fan­cy Box Image’ always fetch­es the large image — even if the user only wants to see the reduced ver­sion. And then brows­er reduces it:

<a href="ORIGINAL_IMAGE_URL" data-fancybox=""><img src="ORIGINAL_IMAGE_URL" width="SMALLER_PLEASE"></a>

Thus, the brows­er that is sup­posed to dis­play the image always down­loads the large image — even if our user only wants to see the reduced ver­sion. And then it ren­ders the large ver­sion down. In oth­er words: the big­ger the orig­i­nal image, the longer the down­load, the longer the ren­der­ing, and the lat­er the dis­play. But Word­Press has already pre­cal­cu­lat­ed dif­fer­ent ver­sions of the images. So why not take the one first and get the big one only on demand?

Solution

• Check that your functions.php con­tains the fol­low­ing code for dis­play­ing block images¹:

/*
 * Simple short code for inserting a fancy boxed image 
 * (C) 2023 Karsten Reincke
 * SPDX-License-Identifier: MIT
 */
function fcbPicCode($atts){
  $atts = (array) $atts;
  $imid = $atts[0];   // obligatoric parameter
  $width = $atts[1];  // obligatoric parameter
  $wpsize = "";       // thumbnail, medium, large, or full
  $alt="";                    // optional parameter
  $style="is-style-default";  // optional parameter 
  $align="alignleft";         // optional parameter

  /* IDEA: try to download the best fitting image size be default.
   * Download the full sized image if and when the user had said
   * she wants to see it by a click (fancy)
   */
  if ($width <= 150)
    $wpsize = "thumbnail";
  elseif ($width <=300)
    $wpsize = "medium";
  elseif ($width <= 1024)
    $wpsize = "large";
  else
    $wpsize = "full";

  /* get the path to the original image */
  $fimgp=wp_get_attachment_image_url($imid,"full");
  if (!($fimgp)) return ("wrong image data");
  /* if it's an svg, there won't be any smaller images */
  if (wp_get_image_mime($fimgp) == "svg" )
    $simgp=$fimgp;
  else {
  /* otherwise get the path to the fitting smaller image */
    $simgp=wp_get_attachment_image_url($imid,$wpsize);
    if (!($simgp)) $simgp=$fimgp;
  }

  if (array_key_exists(2,$atts)) {
    $alt=$atts[2];
    if (array_key_exists(3,$atts)) {
      $style=$atts[3];
      if (array_key_exists(4,$atts))
        $align=$atts[4];
    }
  }

  $res= 
   '<figure class="wp-block-image ' . $align . ' size-medium is-resized ' . $style . '">' .
     '<a href="' . $fimgp . '" data-fancybox="">' .
       '<img src="' . $simgp . '" alt="'. $alt .'" width="' . $width . '" >' .
      '</a>' .
   '</figure>';
  return $res;

}
add_shortcode('fcbpic', 'fcbPicCode');

• Check that your functions.php con­tains the fol­low­ing code for dis­play­ing inline images:

/*
 * Simple short code for inserting a fancy inline img 
 * (C) 2023 Karsten Reincke
 * SPDX-License-Identifier: MIT
 */
function fciPicCode($atts){
  $atts = (array) $atts;
  $imid = $atts[0];   // obligatoric parameter
  $width = $atts[1];  // obligatoric parameter
  $wpsize = "";       // thumbnail, medium, large, or full
  $alt="";                    // optional parameter
  $style="is-style-default";  // optional parameter 

  /* IDEA: try to download the best fitting image size be default.
   * Download the full sized image if and when the user had said
   * she wants to see it by a click (fancy)
   */
  if ($width <= 150)
    $wpsize = "thumbnail";
  elseif ($width <=300)
    $wpsize = "medium";
  elseif ($width <= 1024)
    $wpsize = "large";
  else
    $wpsize = "full";

  /* get the path to the original image */
  $fimgp=wp_get_attachment_image_url($imid,"full");
  if (!($fimgp)) return ("wrong image data");
  /* if it's an svg, there won't be any smaller images */
  if (wp_get_image_mime($fimgp) == "svg" )
    $simgp=$fimgp;
  else {
  /* otherwise get the path to the fitting smaller image */
    $simgp=wp_get_attachment_image_url($imid,$wpsize);
    if (!($simgp)) $simgp=$fimgp;
  }

  if (array_key_exists(2,$atts)) {
    $alt=$atts[2];
    if (array_key_exists(3,$atts)) {
      $style=$atts[3];
    }
  }

  $res= 
     '<a href="' . $fimgp . '" data-fancybox="">' .
      '<img src="' . $simgp . '" alt="'. $alt .'" width="' . $width . '" >' .
     '</a>' ; 
  return $res;

}
add_shortcode('fcipic', 'fciPicCode');

Background

The idea of these func­tions is clear: We let Word­Press find the image file that is clos­est to the request­ed dis­play width. But for SVGs, Word­Press (or the cor­re­spond­ing plu­g­in) does not pre-cal­cu­late oth­er ver­sions.² There­fore, we first get the orig­i­nal image, check if it is an SVG, and in the case of raster graph­ics let Word­Press find the link to the image that fits best to the desired size. This would cre­ate an entry on the page like this

<a href="ORIGINAL_IMAGE_URL" data-fancy=""><img src="SMALL_IMAGE_URL" width="SMALLER_PLEASE"></a>

BINGO.

---

And how does this …

… sup­port our migra­tion to bootScore? Well, once a web design­er has tak­en the first gen­er­al steps and has checked SEO, she will soon turn to a real­ly thick board, her prop­er­ly clus­tered and pre­sent­ed menu with­out get­ting too fan­cy. Even­tu­al­ly, she is going to spruce and speed up the dis­play of fixed and scal­able images. This post talks about a part of this way.

---

1. Of course, I have already updat­ed the elder ver­sions in the elder posts. So, prob­a­bly you will already have incor­po­rat­ed the improved ver­sion into your functions.php. If so, take this post an expla­na­tion how to deal with the pic­tures Word­Press pre-cal­cu­lates when you upload your image. [↩]
2. Com­put­ing oth­er sizes in advance would make no sense, because SVGs do not have an intend­ed ini­tial size. [↩]