Open-Source Webdesign

Fancy SVGs

/ von Karsten Reincke | Kommentar schreiben

Eine geschwungene Treppe

Fan­cy Bit­maps sind das eine, ska­lier­ba­re Bil­der das ande­re. Word­Press mag Sca­lable Vec­tor Gra­phics von Haus nicht: SVGs bestehen aus XML-Code. Wird der gela­den, kann er — wenigs­tens prin­zi­pi­ell — Scha­de­code ins Sys­tems ein­schleu­sen. SVGs in den Tem­pla­tes zu nut­zen, unter­bin­det Word­Press dage­gen nicht. So inte­griert auch bootS­core die Logos ins Tem­p­la­te header.php. Für die ambi­tio­nier­te bootS­core-Nut­ze­rin reicht die Metho­de nicht.

SVGs kön­nen auf HTML-Ebe­ne — wie gewohnt — in img-Tags ein­ge­bet­tet wer­den.1. Um sie in über die Medi­en-Biblio­thek zu nut­zen, braucht es ein Plug­in, sei es SVG-Sup­port, WebP SVG Sup­port oder eben Save SVG:

[ de | en ]

Lösung

Hintergrund

Das Word­Press-Plug­in SVG-Sup­port ver­spricht, den XML-Code beim Hoch­la­den zu ‘des­in­fi­zie­ren’, wird aktiv gepflegt und ist GPL‑2.0‑or-later lizen­ziert. Das gilt auch für Safe SVG.3 Das Plug­in WebP SVG Sup­port dage­gen sagt nichts zur Des­in­fek­ti­on, son­dern zielt auf die Nut­zung in der Media-Biblio­thek. Die­se Inte­gra­ti­on in die Word­Press Media-Biblio­thek bewirbt auch Safe SVG. Dar­um ver­wen­de ich dies.

Weil Word­Press Vek­tor- und Ras­ter­bil­der mit der­sel­ben Tech­nik in die Sei­ten ein­zu­bau­en erlaubt, kön­nen wir unse­ren Short­Code für ‘Fan­cy Bil­der’ auch für SVGs ver­wen­den.

cc-by-sa-logo

Gleich­wohl möch­te ich das CC-BY-SA-Logo im Foo­ter auch in eine Zei­le ein­bet­ten: cc-by-sa-logo. Dafür benö­ti­ge ich eine zwei­te Funk­ti­on:

/*
 * Simple short code for inserting an 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');
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. Das svg-Tag dient dazu, den Code des Bil­des selbst in eine Sei­te ein­zu­bin­den: vgl. dazu W3C-Schools [↩]
  2. Word­Press bin­det es via img-Tag ein. [↩]
  3. Zur Code-Des­in­fi­zie­rung vgl. Descrip­ti­on, zur Lizen­zie­rung die Datei readme.txt [↩]
To top