Hintergrund

Dazu hatte ich vor Monaten zwei Demos gebaut — beide eingerichtet auf einem fast reinen WordPress 6.1¹ und einem reinen bootScore, wie es selbst installiert werden will². Nun habe ich davon Screenshots gezogen: Links die Beitragsliste, wie sie von der index.php eines unmodifizierten bootScore erzeugt wird. Rechts die Beitragsliste, wie sie von archive-masonry.php³ aus der Vorlage eines ansonsten unmodifizierten bootScore generiert wurde.

In beiden Listen ist das ‘Featured Image’ auf großen Bildschirmen unscharf. Rechts etwas weniger, weil der Unterschied zwischen dem zur Verfügung gestellten Platz und der Größe des eingebetteten Bildes geringer ist. Ich hatte dafür zwei Lösungen skizziert, eine traditionellere und eine radikalere:

• Die traditionelle Lösung bringt WordPress dazu, beim Hochladen ein zusätzliches Thumbnail zu erzeugen, dessen Breite mit 560px zwischen den Standardgrößen ‘mittel’ und ‘groß’ liegt.⁴. Und sie fragt in den Vorlagen nicht mehr nach der Größe ‘medium’, sondern nach der selbst definierten Größe bsTeaser.
• Die radikale Lösung nutzt die Funktionen des Tags <img>, wie sie unter HTML‑5 aktiviert wurden. Damit wird dem Browser mitgeteilt, welche Bilder zur Verfügung stehen und bis zu welcher Stelle jedes einzelne verwendet werden soll. Letztendlich wählt der Browser aber auf der Grundlage dieser Informationen das richtige Bild aus.

Der Punkt bei den Lösungen ist also der:

• Bei der traditionellen Lösung entscheiden immer noch wir — die Website-Redakteure — statisch und vorab, welches Bild in den Bereich eingebettet werden soll — auch wenn wir dessen tatsächliche Größe des ‘Responsive Designs’ gar nicht vorab kennen (können).
• Bei der radikalen Lösung entscheidet der Browser, weil er die Größe des tatsächlich vorhandenen, ‘Responsive Design’-bedingten Platzes kennt. Und er kann entscheiden, weil wir ihm vorher gesagt haben, welche Bilder mit welchen Abmessungen verfügbar sind.

Lösung

• Füge für beide Lösungen die Zeile add_image_size('bsTeaser', 560, 0, false ); in Deine functions.php ein.
• Für die traditionelle Lösung ersetze in allen für Dich relevanten Templates get_the_post_thumbnail(null, 'medium') durch get_the_post_thumbnail(null, 'bsTeaser').
• Für die radikale Lösung füge in Deine functions.php folgende Zeile(n) ein:

/*
 * 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);

Dies wäre so zu lesen:

• Zuerst holt der Algorithmus die id des ‘Featured Image’ und setzt die ungefähre Breite einer Spalte, die entsteht, wenn das Fenster größer als die Breite des größten Bildes ist.
• Dann fragt er die Größen aller definierten Bilder ab und erzeugt daraus die Kürzel Bild-Pfad Breite, Bildbreite und Zuständig-für-PlatzBreite.
• Schließlich entstehen daraus die Liste der zur Verfügung stehenden Bilder und die Liste, welche Bildbreite bis zu welcher Platzbreite zuständig ist.
• Und zuletzt wird das als img-Tag mit srcSet- und size-Liste umgewandelt.

Für das Feature Image dieses Artikels wird dem Browser also die folgende Zeile vorgelegt:

Auf dieser Basis entscheidet der Browser selbständig, welches Bild er wann wo einpasst. Und so sieht die aktuelle allgemeine Methode für Responsive Images in einem Responsive Design aus. Natürlich habe ich mir das nicht selbst ausgedacht. Nicht einmal selbst von der Theorie in die Praxis umgesetzt. Vielmehr ich in folge im Wesentlichen drei Quellen

• webdesign tutsplus: html5 pictures for responsive images
• straightvisions: gutenberg and responsive image-sizes
• developer.wordpress.org: wp_get_attachment_image_src

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, einmal angefangen mit Verbesserungen der Bildbehandlung, werden der Web-Designerin auch die verwischten ‘primären Beitragsgilder’ auffallen. Sie wird Lösungen ausprobieren und verfeinern. Und sie wird sie u.U. auch mit neuen HTML‑5 Techniken angehen. Denn damit wird eine ausgefallenere Bildstrategie samt integrierter Lizenzerfüllung und das eigene Logo erst richtig sinnvoll. Wie auch immer: Bilder bringen Farbe ins Leseleben. Zuletzt sollte all das also auch in ein eigenes Farbkonzept eingebunden sein. Zu dieser Thematik trägt auch dieser Post etwas bei.

Im Übrigen: Männer sind mitgemeint.

1. als zusätzliche Erweiterung brauchte ich nur Better Search Replace
2. ich habe die ‘Featured Images’ in der Größe 1280*720 hochgeladen und zugewiesen
3. mit dem ausgerichteten Bereich <header>...</header>
4. Bislang hatte ich 600x600 empfohlen. Jetzt, nach einigen Diskussionen, einigem Nachlesen und ausgiebigen Tests, denke ich, dass ein 16:9 Bild mit einer Breite von 560px ausreichend ist.

The post BootScore ohne verwischte Beitragsbilder appeared first on Freigiebigkeit.

Lösung

• Um Deine Tag-Cloud zu verschönern,
  • installiere das Plugin Cool Tag Cloud,
  • gehe zu Appereance/Widgets,
  • kopieren das Widget Cool Tag Cloud in die Sidebar,
  • öffnen es, um es zu konfigurieren,
  • setze Largest Font auf 17 (damit die Tags, die mehr Beiträge bezeichnen, größer dargestellt werden),
  • wähle eine Bildfarbe, die zum Stil Deines Themes passt,
  • und Bingo.
• Um Deine Liste der letzten Beiträge zu verschönern,
  • installiere das Plugin Recent Posts Widget Extended
  • gehe zu Appereance/Widgets,
  • ersetze in der Sidebar das Standard-Widget Recent-Post-Widget durch das neue Widget Recent-Post-Widget-Extended
  • und Bingo.

Hintergrund

WordPress bietet einige Tag-Cloud-Plugins an. Das WordPress-eigene Widget ist etwas spartanisch. Die meisten Alternativen sind jedoch veraltet¹ oder versuchen, eine komplette Tag-Verwaltung zu bieten. So konnte ich² nur zwei Kandidaten finden: Cool Tag Cloud und Creative Tag Cloud. Letzteres bietet eine schicke Spirale an. Es ist jedoch schwer zu konfigurieren und erzeugt ein Bild, das auf kleinen Bildschirmen nicht richtig funktioniert. Ganz anders dagegen Cool Tag Cloud. Dieses Plugin sagt auf seiner Beschreibungsseite zwar, es sei “Open-Souce-Software”. Das Repository enthält aber weder eine Lizenz noch eine Lizenzierungsstatement. Als FOSS-Purist müsste ich es also ignorieren. Tue ich aber nicht. Denn es wird ja offiziell als WordPress-Plugin gehostet. Und WordPress ist unter der GPL‑2.0 lizenziert. Also vertraue ich mal auf den Copy-Left-Effekt der GPL. Außerdem kann ich damit auch meine Kategorien darstellen: einfache eine zweite Instanz in die Sidebar legen und die auf ‘Categories’ konfigurieren.

WordPress bringt ein eigenes recent post widget und ein eigenes tag cloud widget mit sich. Optisch erzeugen beide eher begrenzte Ergebnisse. Meine recent post list soll das Plugin recent post widget extended verschönern, in dem es Thumbnails in die Liste einbaut. Laut readme.txt im Repository ist das Plugin unter der GPL-v3 oder später lizenziert. Und es macht wirklich direkt das, was ich ich mir erhofftz habe.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, hat Web-Designerin im Rahmen ihrer Anpassungen die Frage einer guten Bebilderung beantwortet, kann sie entspannt Tags und Wolken in ihre Site einbinden, ihre Überblicksseite verbessern und eine eigene Landingpage gestalten. Ob die entstandene Fülle der eigenen Leserin wirklich nutzt, ob es nicht schlanker geht und wie, ob dezentere Verweise und spezielle Fonts auch für besondere Anlässe die Lesbarkeit erhöhen, all das gilt es zu bedenken. Das tut auch dieser Post.

Im Übrigen: Männer sind mitgemeint.

1. = nicht mit meiner aktuellen Version 6.1.1 getestet
2. Stand 2023.03.06

The post Wolken und Listen — Zwei auf einen Streich! appeared first on Freigiebigkeit.

bootScore selbst bietet für große Screens ja nur eine ‘Lösung’ an, bei der 100% aller Bilder verzerrt werden. Es fragt bei WordPress die medium-Bilder¹ an und lässt sie vom Browser in einen quadratischen Platz einpassen. Nur ist bei den generierten Vorschaubildern der Größe medium das Seitenverhältnis des Originals bewahrt worden. So werden dann rechteckige Bilder als Quadrate angezeigt. Die Verzerrung ist garantiert.

Diskussion

Ich hatte den Weg auch dem bootScore-Team angeboten, über einen Pullrequest und eine ausführliche Begründung. Die Antworten waren interessant. Einig war man sich darin, dass der Umgang mit Bildern im Allgemeinen eine Aufgabe der programmierenden bootScore-Anwenderin sei. Das gelte insbesondere auch die Bereinigung verwischter Photos. Auf jeden Fall würde die Einbindung größerer Vorschaubilder, wie ich sie vorgeschlagen hätte, dann auch für Smartphones gelten, deren Performance beeinträchtigen und damit die SEO herabsetzen.

Der SEO-Hinweis ist sicher richtig. Deshalb hatte ich ja gerade nicht vorgeschlagen, die Größe large zu verwenden. Was ich aber nach wie vor nicht verstehe, warum eine so wertvolle Arbeit wir bootScore sich auf den ersten praktischen Blick hin schlechter darstellt, als es müsste. Ja, wenn man — mit dem originalen bootScore index.php — die möglichen Fälle mit einem Mobile Simulator durchgeht, zeigt sich durchweg ein gutes Erscheinungsbild. Nur eben nicht auf einem Desktop-Screen der Größe 2560x1440. Genau da wird das mittelgroße Bild ‘300x169’ in ein von bootScore vorgesehenes Quadrat eingepasst — mit grauenvollen Ergebnissen.² Und wie der Teufel es so will: bootScore selbst demonstriert den Effekt, in seiner 5.2.3.1‑Ankündigung

Konsequenz

Also müssen wir bootScore-Anwenderinnen gerade bei den ‘Featured Images’ sorgfältig nachdenken und nacharbeiten. Einen Weg habe ich aufgezeigt. Einen anderen hat mir das bootScore-Team gewiesen: Ich solle doch aus https://github.com/bootscore/bs-loop-templates einfach eines als home.php aktivieren, das keine Umrechnung in ein Quadrat bewirkt, etwa https://bootscore.me/archives/equal-height-sidebar-right/.³

Und was kann ich sagen: Das sieht gut aus. Noch besser wird es aussehen, wenn ich die nun unpassenden Titel im Template geändert haben werde . Und ganz toll sähe das Template https://bootscore.me/archives/masonry/ aus, wenn — ja wenn — es dieses auch mit Sidebar gäbe und wenn ich darin von the_excerpt() auf the_content() umgestellt hätte.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, einmal angefangen mit Verbesserungen der Bildbehandlung, werden der Web-Designerin auch die verwischten ‘primären Beitragsgilder’ auffallen. Sie wird Lösungen ausprobieren und verfeinern. Und sie wird sie u.U. auch mit neuen HTML‑5 Techniken angehen. Denn damit wird eine ausgefallenere Bildstrategie samt integrierter Lizenzerfüllung und das eigene Logo erst richtig sinnvoll. Wie auch immer: Bilder bringen Farbe ins Leseleben. Zuletzt sollte all das also auch in ein eigenes Farbkonzept eingebunden sein. Zu dieser Thematik trägt auch dieser Post etwas bei.

Im Übrigen: Männer sind mitgemeint.

1. der Größe 300x?? — die Fragezeichen stehen für den Wert, der bei einer Breite von 300 das originale Seitenverhältnis bewahrt.
2. Nach Murphy wird sich unsere Kundin ihre neue Site auf genau so einem Gerät ansehen.
3. Die Template-Alternativen werden im bootScore Download-Bereich bereitgestellt.

The post Weniger verwischte primäre Beitragsbilder appeared first on Freigiebigkeit.

Lösung

• Erstelle Dein eigenes, normales Logo, möglichst als SVG.
• Erstelle Dein eigenes, kleineres Logo, möglichst als SVG.
• Kopiere Dein normales Logo nach bootscore-child/img/logo/logo.svg
• Kopiere Dein kleineres Logo nach bootscore-child/img/logo/log-sm.svg
• Folge auch den Anweisungen zum Erzeugen der Favicons

Hintergrund

Ohne Bilder keine guten Artikel. Ohne Logos, keine Wiedererkennbarkeit. Die Logos werden in der bootScore-Datei header.php im nav-Bereich zusammen mit dem Menü etc. in und mit einem Container angezeigt. Die darin verwendeten img — Tags geben keine Höhe oder Breite vor. So werden die Icons in den Dimensionen angezeigt, mit denen sie konzipiert worden sind. Das gilt auch für SVG-Bilder. Je höher also das erzeugte Logo, desto höher auch der NAV-Bereich. Je länger das Logo, desto stärker werden die nachfolgenden Elemente nach rechts verschoben.

Das ist kein Nachteil, sondern eine schlanke Lösung. Denn Logos, die auf jeder Seite angezeigt werden, dürfen gern kleiner sein. Die Leserin wird sie der Häufigkeit wegen auch so wahrnehmen. Ich jedenfalls habe akzeptable Erfahrungen mit folgenden Werten gemacht:

• 132x27 pixel und 76x27 pixel (bootScore logo.svg und logo-sm.svg)
• 131x46 pixel und 48x56 pixel (logo fodina.de)
• 102x57 pixel und 54x54 pixel (logos karsten-reincke.de)

Nach dem Erzeugen der Favicons solle die Userin — so die header.php-Docu — Werte in bestimmten Zeilen ändern. Die Zeilenangaben beziehen sich auf die Datei header.php, wie sie initial von bootScore mitgeliefert wird, nicht auf die generierten Favicons: Von den Dateien, die via realfavicongenerator erzeugt und heruntergeladen werden, soll nur in der Datei site.webmanifest bei den absoluten Pfaden der vorausgehende Slash entfernt werden.

Um den empfohlenen Favicon Check durchzuführen, müssen die erzeugten Dateien in ein (Vor-) Produktionssystem eingespielt werden, damit der URL der Site unter https://realfavicongenerator.net/favicon_checker verwendet werden kann. Zur Zeit¹ merkt der Check Fehler an, die sich auf die Dateien beziehen, die der realfavicongenerator selbst erzeugt hat. Na denn.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, einmal angefangen mit Verbesserungen der Bildbehandlung, werden der Web-Designerin auch die verwischten ‘primären Beitragsgilder’ auffallen. Sie wird Lösungen ausprobieren und verfeinern. Und sie wird sie u.U. auch mit neuen HTML‑5 Techniken angehen. Denn damit wird eine ausgefallenere Bildstrategie samt integrierter Lizenzerfüllung und das eigene Logo erst richtig sinnvoll. Wie auch immer: Bilder bringen Farbe ins Leseleben. Zuletzt sollte all das also auch in ein eigenes Farbkonzept eingebunden sein. Zu dieser Thematik trägt auch dieser Post etwas bei.

Im Übrigen: Männer sind mitgemeint.

1. Stand 03.03.23

The post Ein eigenes Logo und FavIcon — bootScore hilft! appeared first on Freigiebigkeit.

Lösung

• Nutze zuerst Bilddatenbanken, deren Exponate CC0 lizenziert sind.¹ Z.B. pxhere² oder openclipart.³
• Werte dann Bilddatenbanken aus, deren Exponate unter einer anderen Creative-Commons-Lizenz veröffentlicht worden sind. Z.B. Wikimedia⁴, flicker.com/creativecommons oder piqs.de
• Meide aber Bilder, die unter eine CC-??-NC-?? Lizenz⁵ veröffentlicht sind.⁶
• Und erfülle die anderen Bedingungen, etwa die der Namensnennung, penibel. Ein guter Ort, das zu tun, ist ein Bildverzeichnis.
• Sichte schließlich vorsichtig die Bilddatenbanken, die ihre Bilder unter einer eigenen Lizenz verteilen, die einer CC0 Lizenz gleichkommt, aber bestimmte Nutzungen doch ausschließen.⁷ Z.B. pexel⁸, unsplash⁹, oder pixabay¹⁰
• Meide nach Möglichkeit Bilddatenbanken, die kommerzielle kostenpflichtige Bilder mit freien mischen.¹¹ Z.B. freephotos oder the nounproject
• Meide auf jeden Fall Meta-Bilddatenbanken.¹²

Hintergrund

Im ersten Anlauf scheint das einfach. Denn meis­tens wird die Autorin ihre Posts ja nur ‘illus­tri­eren’ wollen. Aber schon, wenn sie ein Web-Shop oder Beratungsangebot an ihre Site angebunden hat, verdient sie mittelbar mit den Bildern ja Geld. Und damit nutzt sie die Bilder kommerziell. Nochmals also die Frage, was kann sie tun?

Ich habe oben meinen Weg aufgezeichnet. Dazu zwei Ergänzungen:

• Wenn es um ‘Logos’ geht, suche ich die Webpräsenzen der Logo-Inhaberinnen auf. Oft sagen sie uns explizit, was wir mit ihren Logos machen dürfen, und was nicht. Und das gilt sogar für Non-Profit-Organisationen, wie die OSI¹³ oder die vom Gimp¹⁴
• Wenn es um das Abgebildete geht, beachte ich zwei Faustregeln:
  • Vor­sicht bei abge­bilde­ten Men­schen und Pro­duk­ten — die lieber nicht.
  • Vorsicht bei unbekan­nten Gebäu­den.

Und in welchem Zusammenhang …

… steht das mit einer systematischen Erfüllung von FOSS-Lizenzen? Nun, dazu müssen wir halt auch politische Konnotationen bedenken, konzeptionelle und kontextuelle Aspekte analysieren — einzeln oder gemeinsam auf Konferenzen. Wir müssen konkrete Fälle und allgemeine Nebenwirkungen durchdenken, für Software, Bilder oder Dokumente. Wir müssen Trends benennen und Leitfäden erstellen. Vornehmlich aber müssen wir die Automatisierung der Lizenzerfüllung vorantreiben, unser Lizenzwissen frei zur Verfügung stellen, es in kleinere Tools gießen und in größere Systeme einbringen: Denn FOSS lebt von der Freiheit durch Lizenzerfüllung, im Großen und im Kleinen.

Im Übrigen: Männer sind mitgemeint.

1. Die dürfen wir nämlich ohne Gegenleistung nutzen.
2. zur Lizenzierung vgl. https://pxhere.com/en/license
3. zur Lizenzierung vgl. https://openclipart.org/faq
4. zur Lizenzierung vgl. https://commons.wikimedia.org/wiki/Commons:Licensing/de
5. zum Schichtmodell der CC-Lizenzen vgl. https://creativecommons.org/licenses/
6. Denn rechtlich kann auch der einfachste Blog noch als kommerzielles Unternehmen gedeutet werden.
7. Herausfordernd ist, dass diese Datenbanken oft zwar die kommerzielle Nutzung erlauben, aber zugleich den Verkauf der Bilder, auch in gedruckter Form, oder deren Einbau in andere Datenbanken untersagen.
8. zur Lizenzierung vgl. https://www.pexels.com/license/
9. zur Lizenzierung vgl. https://unsplash.com/de/lizenz
10. zur Lizenzierung vgl. https://pixabay.com/service/license-summary/
11. Zu groß die Gefahr, dass Du ein nicht freies Bild herausgreifst.
12. Was genau gilt, ist da sehr schwer nachzuvollziehen.
13. zur Logonutzung vgl. https://opensource.org/logo-usage-guidelines/
14. zur Logonutzung vgl. https://github.com/GNOME/gimp/blob/master/docs/Wilber.xcf.gz.README

The post Gute Bilder — woher nehmen und nicht stehlen? appeared first on Freigiebigkeit.

Meist muss ich sagen, woher ich das Bild habe, wer es fotografiert hat und unter welcher Lizenz es steht. Der richtige Ort dafür, solche Bedingungen zu erfüllen, ist ein Bildverzeichnis((Apropos: Im europäischen Rechtsraum gibt es eine ‘Public Domain’ nicht. Aber wir können die so in Amerika publizierten Bilder in der Regel mitverwenden.)):

Lösung

Eine Tabelle für Bildnachweise

• Erzeuge eine Seite ‘Bildnachweise’ und binde sie wie Dein Impressum ein.
• Installiere das Plugin TablePress.
• Lege eine Tabelle mit den 4 Spalten BILD, Download & Lizenzierung, Lizenz und Attribute an.
• Binde diese Tabelle mit dem TablePress-Shortcode in Deine Seite Bildnachweise ein.

Ein neuer Bildnachweis

• Füge eine neue Zeile in die Bildreferenztabelle ein.
• Bzgl. der Spalte BILD
  • Öffne die Medienbibliothek, klicke das neue Bild an und merke Dir seine ID, die in der Browser-URL angezeigt wird.
  • Trage den schon bekannten Short-Codewrong image data entsprechend ein.
• Verlinke in der zweiten Spalte einen angemessenen Text auf das gleiche Bild in der Datenbank. Sagt die Zielseite nichts über die Lizenzierung aus, verlinke in derselben Spalte auf das eigentliche ‘Lizenzierungsstatement’ aus der Bilddatenbank.
• Verlinke in der dritten Spalte den Lizenznamen mit dem Lizenztext, möglichst in der Version aus der Bilddatenbank.
• Trage in der vierten Spalte alle Informationen ein, die die Lizenz mitzugeben fordert.

Hintergrund

Das Einfache zuerst: Das WordPress-Plugin TablePress wird aktiv gepflegt und ist — gemäß der Datei readme.txt — GPL‑2.0 lizenziert. Es handelt sich hier also um ‘lupenreine’ Open-Source-Software.

Das etwas Komplexere zum Schluss: Warum brauchen wir überhaupt einen Bildnachweis? Formal benötigen wir den auch gar nicht! Wir müssen nur in irgendeiner Weise jede Bedingung derjenigen Lizenz erfüllen, die mit dem Bild verknüpft worden ist, das wir benutzen. Die Lizenzerfüllung ist für die aufrichtige Nutzerin nicht verhandelbar: entweder sie beachtet die Lizenzbedinungen, oder sie nutzt das Bild nicht.¹

Darum mache ich mir die Sache einfach: Ich trage schlicht jedes Bild nach dem gekennzeichneten Muster in meinen Bildnachweis ein. Selbst die, zu denen ich nichts dazu sagen müsste — wie bei PxHere-Bildern. Denn wenn ich nach Schema‑F vorgehe, rutscht mir auch nichts durch. Hoffentlich.

Dazu habe ich mir eine Reihe von Short-Codes geschrieben, mit denen es ein Klacks ist, ein neues Bild in die Tabelle einzutragen. Gerne gebe ich diese Codes auf Nachfrage weiter.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, einmal angefangen mit Verbesserungen der Bildbehandlung, werden der Web-Designerin auch die verwischten ‘primären Beitragsgilder’ auffallen. Sie wird Lösungen ausprobieren und verfeinern. Und sie wird sie u.U. auch mit neuen HTML‑5 Techniken angehen. Denn damit wird eine ausgefallenere Bildstrategie samt integrierter Lizenzerfüllung und das eigene Logo erst richtig sinnvoll. Wie auch immer: Bilder bringen Farbe ins Leseleben. Zuletzt sollte all das also auch in ein eigenes Farbkonzept eingebunden sein. Zu dieser Thematik trägt auch dieser Post etwas bei.

Im Übrigen: Männer sind mitgemeint.

1. Über Bildertrolle und deren ‘Geschäftsmodell’ habe ich ja bereits geschrieben

The post Ein Bildverzeichnis? Wirklich? appeared first on Freigiebigkeit.

Lösung

• Trage die folgenden Zeilen in Deine functions.php ein:

// let WordPress also derive this square version from the uploaded images
add_image_size( 'bsTeaser', 600, 600, true );

Ersetze in den kürzlich hinzugefügten Zeilen, mit denen wir auch das Zuschneiden der mittleren Größe aktiviert hatten, das true bzw. 1 durch false bzw. 0:

//do not(!) crop the medium size images to the defined values exactly
// as it is done for thumbnails
if(false === get_option("medium_crop")) {
  add_option("medium_crop", "0");
} else {
  update_option("medium_crop", "0");
};

• Kopiere bootscore-main/index.php nach bootscore-child/home.php
• Ersetze in der Datei home.php an beiden Stellen den Text get_the_post_thumbnail(null, 'medium') durch get_the_post_thumbnail(null, 'bsTeaser')

Hintergrund

Gehen wir die Schritte der Reihe nach durch. Das erklärt die Idee:

Mit der Anweisung add_image-size lassen wir WordPress — wenn es ein Bild in die Medienbibliothek lädt — außer den kleineren Versionen, die unter Settings/Media konfiguriert sind — auch neuen 600x600-Thumbnails erzeugen. Mit dem Namen bsTeaser können wir den Pfad zu diesem neuen Bild bei WordPress erfragen und es darüber auf php-Ebene in einen Beitrag einbinden. Der Parameter true sorgt dabei dafür, dass unser Original genau auf diese Maße — also quadratisch — zugeschnitten wird.

Warum 600x600-Quadrate und nicht 300x300- oder 400x400-Bilder? Das ist bootScore bedingt! Bootstrap — und also bootScore — arbeiten nicht mit absoluten Größen. Vielmehr teilen sie den vorhandenen Platz in 12 gleich breite Spalten. Und Größen werden dann relativ zu den Spaltenbreiten spezifiziert.

Allerdings bestimmt die Breite des Bildschirms dann die Breite des Bereiches von z.B. ‘Spalte 4 bis 6’ wird.((Das ist ja auch der Sinn dessen, was wir als Responsive Design bezeichnen.)) Ein Bild, das in einen solchen Platz eingepasst wird, muss also meistens umgerechnet werden. Wird es heruntergerechnet, bleibt es scharf, auch wenn weniger Details zu sehen sind. Wird es hochgerechnet, wird es jedoch unscharf. Denn wie soll WordPress auch wissen, was in den hinzufügten Platz eigentlich hineingehört?

Wenn wir also Bilder in Bootstrap-Bereiche so einfügen wollen, dass sie auch auf großen Bildschirmen gut aussehen, müssen wir die Wahrscheinlichkeit erhöhen, dass die Bilder herunter- und nicht hochgerechnet werden. Die beste Methode dazu wäre, nur die Originale einzubinden und vom Client-Rechner vor Ort herunterrechnen zu lassen. Das aber verlangsamt ja die Auslieferung einer Seite: Größere Bilder übers Netz zu übertragen, kostet mehr Zeit, als kleinere. Und größere herunterzurechnen, ist zeitaufwendiger, als kleinere. So versuchen wir hier eine empirisch gute Lösung zu finden, für beide Anforderungen. Und da scheint uns vorderhand das 600x600-Bildquadrat für bootScore besser zu passen.

Schließlich hatten wir in unserem vorherigen Post WordPress angehalten, auch die mittlere Größe zurechtzuschneiden. Das müssen wir rückgängig machen. Die entsprechenden Zeilen aus der functions.php einfach nur zu löschen, reicht aber nicht. WordPress hat sich unsere früheren Einstellungen gemerkt. Wir müssen sie jetzt also überschreiben.

Schließlich kopieren wir uns die Datei index.php aus dem bootScore-Haupt-Theme unter dem Namen home.php in unseren Child-Theme-Ordner. Wir bieten WordPress damit eine in seiner Template-Hierarchie höhere Startdatei an, berauben uns also nicht der Fallbacklösung.

Bliebe unserer Leserin noch zu erläutern, warum wir die vorherige Lösung nicht insgesamt durch diese ‘bessere’ ersetzt haben? Nun, manchmal ist das Gute schon gut genug. Das Bessere würde nur mehr Arbeit machen. Wer also sicher ist, dass sie die medium-Dateien im originalen Seitenverhältnis nicht braucht und wer meint, dass ihre Site eher auf kleinen Geräten betrachtet wird, kann gut bei unserem ersten Ansatz bleiben.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, einmal angefangen mit Verbesserungen der Bildbehandlung, werden der Web-Designerin auch die verwischten ‘primären Beitragsgilder’ auffallen. Sie wird Lösungen ausprobieren und verfeinern. Und sie wird sie u.U. auch mit neuen HTML‑5 Techniken angehen. Denn damit wird eine ausgefallenere Bildstrategie samt integrierter Lizenzerfüllung und das eigene Logo erst richtig sinnvoll. Wie auch immer: Bilder bringen Farbe ins Leseleben. Zuletzt sollte all das also auch in ein eigenes Farbkonzept eingebunden sein. Zu dieser Thematik trägt auch dieser Post etwas bei.

Im Übrigen: Männer sind mitgemeint.

The post Neue Größen gegen verwischte Bilder in bootScore appeared first on Freigiebigkeit.

Sie werden in die Media-Bibliothek hochgeladen, einem Beitrag zugewiesen und — auf der Einzelseite — automatisch über dem Text angezeigt. Das sieht schick aus und klappt bei bootScore gut. Zusätzlich existiert in einem Theme dann meist auch eine Übersicht aller Beiträge. Eine Liste mit Exzerpten, jeweils aufgehübscht durch das je zugehörige primäre Beitragsbild. Auch das kriegt bootScore hin.

Allerdings werden die Bilder hier verschwommen und verzerrt angezeigt — obwohl sie in der Einzelsicht perfekt aussehen. Ich musste um drei Ecken denken, um zu verstehen, warum das so sein musste. Und um eine Ecke, um die Lösung zu finden:

Lösung

• Trage folgenden Kode in Deine functions.php ein:

// crop the medium size images to the defined values exactly
// as it is done for thumbnails
if(false === get_option("medium_crop")) {
  add_option("medium_crop", "1");
} else {
  update_option("medium_crop", "1");
};

Hintergrund

Was also ist das Problem?

Idealerweise — so das Netz — werden primäre Beitragsbilder (= ‘Featured Images’) im 16:9 Format hochgeladen, z.B. in den Größen 1200x628 oder 1280x720.¹ WordPress berechnet schon beim Hochladen eines Bildes die entsprechenden kleineren Versionen². Denn so kann es eine Anfrage schneller bedienen: Es liefert eben nicht immer wieder das eine große, initial hochgeladene Bild an den Browser (Übertragungszeit), damit der es lokal auf die je gewünschten kleineren Maße herunter-rendert (Rechenzeit). Stattdessen hält WordPress vorberechnete, kleinere Versionen zum Abruf bereit. Und es erlaubt Entwicklern, nach der zu einem Freiraum am besten passende Bilddatei zu fragen und diese einzubauen.

Will ich also eine Liste mit den Titeln meiner Posts bebildern, kann ich mir von WordPress zu jedem Titel den Pfad zum kleinsten zugehörigen Bild liefern und es dem Titel voranstellen lassen. Will ich hingegen eine Liste mit Artikelanfängen ‘teasern’, kann ich WordPress nach dem Pfad der mittel-großen Datei fragen und dieses dem Beitragsanfang zur Seite stellen lassen.

Und nun kommt es: Bei dem kleinsten Thumbnailformat schneidet WordPress die Datei bei der Vorabberechnung quadratisch zurecht. Bei denen anderen behält es von Haus aus die Seitenverhältnisse bei. So entsteht bei einem originalen Bild der Größe 1200x628 eine Vorschaudatei der Größe 150x150 (thumbnail) und eine der Größe 300 x 157 (medium). In der Liste mit den Artikelanfängen hat bootScore aber einen quadratischen Platz von — sagen wir — 300 x 300 vorgesehen. Dort hinein passt der Browser das gelieferte Bild ein: Reicht ihm WordPress die kleine Vorschaudatei, rechnet er das Bild von 150x150 auf 300x300 hoch, was es unscharf macht. Sendet WordPress ihm dagegen die mittelgroße Vorschaudatei, rechnet der Browser das Bild von 300x157 auf 300x300 um, was es verzerrt. Pest oder Cholorea also! — selbst wenn ich händisch alle primären Bilddateien quadratisch angelegt hätte: Denn dann wäre ja das große Bild über dem Beitrag in der Einzelansicht verzerrt oder verwischt worden.

Nun wollte ich die bootScore Templates nur im Notfall umprogrammieren oder austauschen.³ Also blieb nur, WordPress selbst dazu zu überreden, auch das mittlere Format quadratisch zurechtzuschneiden. Und dazu brauchte ich tatsächlich nur über die functions.php einen Parameter umzusetzen.⁴

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, einmal angefangen mit Verbesserungen der Bildbehandlung, werden der Web-Designerin auch die verwischten ‘primären Beitragsgilder’ auffallen. Sie wird Lösungen ausprobieren und verfeinern. Und sie wird sie u.U. auch mit neuen HTML‑5 Techniken angehen. Denn damit wird eine ausgefallenere Bildstrategie samt integrierter Lizenzerfüllung und das eigene Logo erst richtig sinnvoll. Wie auch immer: Bilder bringen Farbe ins Leseleben. Zuletzt sollte all das also auch in ein eigenes Farbkonzept eingebunden sein. Zu dieser Thematik trägt auch dieser Post etwas bei.

Im Übrigen: Männer sind mitgemeint.

1. Auch im 4:3 Format (1200:800) entstünde allerdings die hier skizzierte Schwierigkeit.
2. thumbnail: 150x150, medium: <300x<300 und large: <1024x<1024
3. Die vorbereitete Vielfalt von bootScore ist seine Stärke.
4. was mich natürlich das Netz gelehrt hat: vgl. stackoverflow 3454337

The post Verwischte primäre Beitragsbilder in bootScore appeared first on Freigiebigkeit.

Denn bisher holt sich der Browser, der das ‘Fancy Box Image’ darstellen soll, ja immer das große Bild — selbst wenn die Userin nur die verkleinerte Version sehen will. Und dann verkleinert er es:

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

Je größer das Originalbild also ist, desto länger dauert der Download. Und desto länger dauert auch das Herunterrendern. Also wird das Bild auch später angezeigt. Dabei hat ja WordPress für jedes Bild vorsorglich schon verschiedene Versionen vorberechnet. Warum also nicht die zuerst nehmen und das große nur noch auf Nachfrage holen?

Lösung

• Überprüfe, ob Deine functions.php die folgende Funktion für die Anzeige von Blockbildern enthält¹:

/*
 * 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');

• Überprüfe, ob Deine functions.php die folgende Funktion für die Anzeige von Inlinebildern enthält:

/*
 * 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');

Hintergrund

Die Idee dieser Funktionen ist klar: Wir lassen uns den Namen der Bilddatei von WordPress heraussuchen, die der erbetenen Anzeigebreite am besten entspricht. Bei SVGs berechnet WordPress (bzw. das entsprechende Plugin) allerdings keine anderen Versionen im Voraus.² Deshalb prüfen wir zuerst, ob das Originalbild ein svg ist, und lassen uns bei Rastergraphiken den Link zu dem Bild von WordPress heraussuchen, das am besten zur Wunschgröße passt. So entstünde in der Seite ein Eintrag nach dem Muster

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

BINGO.

Und in welchem Zusammenhang …

… steht das mit unserer Migration zu bootScore? Nun, hat eine Web-Designerin die ersten Schritte auch in Sachen SEO getan, wird sie sich bald einem richtig dicken Brett zuwenden, nämlich ihrem Menü. Dabei muss sie thematische Cluster sauber gliedern und präsentieren, ohne zu fancy zu werden. Dann kann sie die Anzeige von festen und skalierbaren Bildern aufhübschen und beschleunigen. Über einen Teil dieser Etappe spricht auch dieser Post.

Im Übrigen: Männer sind mitgemeint.

1. Natürlich habe ich die älteren Vorschläge schon geupdated. Wahrscheinlich hast Du also bereits die verbesserte Version. Wenn dem so ist, lies diesen Post als Erläuterung dazu, warum ich meine initiale Version geändert habe.
2. Das machte ja auch keinen Sinn. SVGs haben keine intendierte Ausgangsgröße.

The post Fancy Images beschleunigen appeared first on Freigiebigkeit.