Fancy Boxes for Fancy Images

Large, promi­nent­ly placed images are eye-catch­ers. Word­Press even has a name for it: Fea­tured Image. The only prob­lem is: Start­ing every post again and again with a ‘fea­tured image’ is tir­ing. Even if our read­er has already decid­ed on an arti­cle, we force her to scroll. It would be bet­ter to give her direct­ly what she wants: the text. Let­ting her decide when she wants to see the big pic­ture by using Fan­cy Box­es is even­tu­al­ly also a mat­ter of read­abil­i­ty:

That means that we present the image in a small­er size first — already sur­round­ed by the text she has cho­sen — and show it to her in a larg­er size((Featured Images should be of the size 16:9, e.g. 1200x628 order 1280:720 cf. pars pro toto wpastra.com)) when she indi­cates her wish by a click:

An ele­gant solu­tion for this is called fancybox.¹

Solution

• Load down the files jquery.fancybox.min.css and jquery.fancybox.min.js from github.com/fancyapps/fancybox and copy them (in)to the direc­to­ry lib.
• Add the fol­low­ing code to your functions.php:

/*
 * Simple short code for inserting a fancy boxed imaged 
 * (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= 
   '<div class="wp-block-image">' .
   '<figure class="' . $align . ' size-medium is-resized ' . $style . '">' .
     '<a href="' . $fimgp . '" data-fancybox="">' .
       '<img src="' . $simgp . '" alt="'. $alt .'" width="' . $width . '" >' .
      '</a>' .
   '</figure></div>';
  return $res;
}
add_shortcode('fcbpic', 'fcbPicCode');

• Add the fol­low­ing lines to your header.php, just before the tag </head>:

<link rel="stylesheet" type="text/css"
  href="<?php echo get_stylesheet_directory_uri(); ?>/lib/jquery.fancybox.min.css" media="all">
<script type="text/javascript"
  src="<?php echo get_stylesheet_directory_uri();?>/lib/jquery.fancybox.min.js"></script>

Background

Of course, there is also a respec­tive Word­Press plu­g­in. It promis­es that “Fan­cy­Box” is “[…] auto­mat­i­cal­ly applied to all your image links and gal­leries”.² The descrip­tion says more care­ful­ly that the plu­g­in uses “[…] jQuery to apply Fan­cy­Box to ANY thumb­nails that link direct­ly to an image”.³ But for me, at least, it did­n’t help: I want to be able to ‘spruce up’ posts in the first para­graph with a small image and dis­play it to my read­er — at a click — in its orig­i­nal size. I don’t want to be lim­it­ed to thumb­nails.

So I switched back to the man­u­al method: Putting the fan­cy-libs into bootScore my child theme and cre­at­ing a more com­fort­able short­code :⁴

[­fcimg imageID width alt imageStyle imageAlignment]

The exam­ple above had been cre­at­ed by

[fcimg 5516 400 "tomcat in a basket" is-style-rounded aligncenter]

---

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. But beware of the license mod­i­fi­ca­tions that are just now exe­cut­ed [2023.02.22]! To pro­tect you I’ve switched back to the elder ver­sion 3.x [↩]
2. cf. Fan­cy Box Instal­la­tion [↩]
3. cf. Fan­cy Box Details [↩]
4. You get the imageId by open­ing your media library, select­ing the respect­ing image, and eval­u­at­ing the arisen URL. [↩]