Open-Source Webdesign

Fancy Boxes für Fancy Images

/ von Karsten Reincke | Kommentar schreiben

Ein Geschenk mit Schleife

Gro­ße, pro­mi­nent plat­zier­te Bil­der sind Eye-Cat­cher. Word­Press hat sogar einen Namen dafür: Fea­tured Image. Was aber ist mit den ande­ren Bil­dern? Sie immer auch so groß ein­zu­bet­ten, ermü­det die Lese­rin. Wir wür­den doch die Les­bar­keit unser Site wei­ter erhö­hen, böten wir der Lese­ring zunächst ein Vor­schau­bild an, das sie auf Wunsch auch detail­lier­ter betrach­ten kann. Das ermög­li­chen die Fan­cy Boxes:

[ de | en ]

‘Fea­tured Images’ — so das Netz — haben am Bes­ten das 16:9 For­mat.1 Das sind dann gro­ße Bil­der. Wir wol­len ihr das Bild aber zuerst klei­ner zu prä­sen­tie­ren — schon vom Text umflos­sen, für den sie sich ent­schie­den hat — und erst auf Wunsch — auf einen Klick hin — groß.

tomcat brutus in a basket

Eine ele­gan­te Lösung dafür heißt fancybox.((Aber Vor­sicht: hier gibt es gera­de begin­nen­de Lizen­zir­ri­ta­tio­nen. Ich swit­che des­halb zurück zur letz­ten 3er Ver­si­on!))

Lösung

  • Erstel­le ein Ver­zeich­nis lib in Dei­nem Child-The­me.
  • Lade die Datei­en jquery.fancybox.min.css und jquery.fancybox.min.js von github.com/fancyapps/fancybox her­un­ter in das erstell­te Ver­zeich­nis lib.
  • Füge den fol­gen­den Code in Dei­ne functions.php ein:
/*
 * 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');
  • Füge die fol­gen­den Zei­len in Dei­ne header.php, und zwar direkt vor dem 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>

Hintergrund

Natür­lich gibt es dafür auch ein Word­Press-Plug­in. Voll­mun­dig ver­spricht es, “Fan­cy­Box” wer­de “[…] auto­ma­ti­cal­ly appli­ed to all your image links and gal­le­ries”.2 Die Beschrei­bung sagt vor­sich­ti­ger, das Plug­in benut­ze “[…] jQuery to app­ly Fan­cy­Box to ANY thumb­nails that link direct­ly to an image”.3 Mir jeden­falls war damit nicht gehol­fen: Ich möch­te Bei­trä­ge im ers­ten Absatz mit einem klei­nen Bild ‘auf­hüb­schen’ und es mei­ner Lese­rin — auf einen Klick hin — in der ori­gi­na­len Grö­ße anzei­gen kön­nen. Auf Thumb­nails möch­te ich nicht begrenzt sein.

So habe ich auf die manu­el­le Metho­de zurück­grif­fen: Fan­cy-Biblio­the­ken im Child-The­me-Ord­ner abge­legt und einen beque­me­ren Short­code defi­niert:4 

[­fcbpic imageID width alt imageStyle imageAlignment]

Kon­kret habe ich unse­ren Code so erzeugt:

[fcbpic 5516 400 "tomcat in a basket" is-style-rounded aligncenter]
Und in welchem Zusammenhang …

… steht das mit unse­rer Migra­ti­on zu bootS­core? Nun, hat eine Web-Desi­gne­rin die ers­ten Schrit­te auch in Sachen SEO getan, wird sie sich bald einem rich­tig dicken Brett zuwen­den, näm­lich ihrem Menü. Dabei muss sie the­ma­ti­sche Clus­ter sau­ber glie­dern und prä­sen­tie­ren, ohne zu fan­cy zu wer­den. Dann kann sie die Anzei­ge von fes­ten und ska­lier­ba­ren Bil­dern auf­hüb­schen und beschleu­ni­gen. Über einen Teil die­ser Etap­pe spricht auch die­ser Post.

Im Übri­gen: Män­ner sind mit­ge­meint.

  1. z.B. 1200x628. oder 1280x720 vgl. pars pro toto wpastra.com [↩]
  2. vgl. Fan­cy Box Instal­la­ti­on [↩]
  3. vgl. Fan­cy Box Details [↩]
  4. Die *imag­eId* erhält frau, wenn sie ihre Media­bi­blio­thek öff­net und das gewünsch­te Bild anklickt. Oben in der Url­zei­le erscheint dann die Bild-ID. [↩]
To top