Thema: Web

Design und Betrieb von Websites

PhotoSwipe 5

PhotoSwipe 5, erste Integration

Mittlerweile gibt es PhotoSwipe in der Version 5. Diese Version ist modular aufgebaut und  wurde grundlegend überarbeitet, um auch mit aktuellen Browsern und Smartphones zuverlässig zu funktionieren.

Mein WordPress-Plugin Lightbox with PhotoSwipe wird in naher Zukunft ebenfalls PhotoSwipe 5 nutzen. Da vorherige Anpassungen bzgl. Styling nicht kompatibel sind zu PhotoSwipe 5, wird die ältere Version zunächst weiterhin als Auswahl verfügbar sein.

Weiterlesen

Twig in WordPress-Plugins nutzen

Update 2022-06-13:

Seien Sie gewarnt! Es stellt sich heraus, dass die Verwendung von Twig oder anderen Abhängigkeiten mit Composer in WordPress tatsächlich eine schlechte Idee ist! Das Problem ist, dass andere Plugins oder Themes möglicherweise auch dieselben Komponenten verwenden, aber in einer anderen Version – und dann können alle möglichen Konflikte auftreten! Ich empfehle daher bis auf weiteres NICHT, diesem Artikel zu folgen!


Der grundlegende Aufbau von WordPress-Plugins ist eher einfach gehalten:

Im Verzeichnis des Plugins wird als minimale Voraussetzung die Datei readme.txt mit einer Beschreibung im Header und eine PHP-Datei für die Plugin-Initialisierung benötigt. Es ist nicht zwingend erforderlich, eigene Klassen zu implementieren, da der Code von WordPress direkt ausgeführt wird – allerdings erleichtert eine Organisation in Klassen die Lesbarkeit und Wartbarkeit erheblich.

Weiterlesen

A propos – Text markieren im Browser

Schon vor längerer Zeit wurde mit Chrome 90 ein Feature eingeführt (davor gab es das schon als Extension), mit dem man über Links gleichzeitig einen Teil des verlinkten Textes markieren kann.

Dazu hängt man den zu markierenden Text mit als Fragment in der Form #:~:text= gefolgt vom Text an die URL an. Zum Testen ein Link auf diesen Artikel, der wie folgt gebildet wird: https://arnowelzel.de/a-propos-text-markieren-im-browser#:~:text=Teil%20des%20verlinkten%20Textes.

Beim Testen dieser Funktion habe ich festgestellt, dass die Markierung wieder verschwindet, wenn man eine Seite, die über eine solche URL geladen hat, aktualisiert.

Die Tücken des Fullscreen API

Mein Beispiel für WebGL und der Monitor-Test nutzen zur Darstellung ein Canvas-Element. Zusätzlich ist jeweils die Möglichkeit vorhanden, die Darstellung auf den Vollbild-Modus umzuschalten. Technisch wird das mit dem Fullscreen API realisiert. Die Vorgehensweise ist dabei immer gleich:

  1. Wenn der Knopf für den Vollbild-Modus angeklickt wird, wir mit requestFullscreen() das Canvas-Element auf Vollbild-Darstellung umgestellt.
  2. Ein Handler, der auf diesen Wechsel reagiert, korrigiert im Vollbild-Modus die Breite und Höhe des Elementes auf die Bildschirm-Größe unter Berücksichtigung der window.devicePixelRatio, damit die native Auflösung des Gerätes verwendet wird.

Weiterlesen

Automatischer „Dark Mode“ für Websites

Aktuelle Versionen von macOS wie auch Windows 10 bieten die Möglichkeit, die Oberfläche des Systems im „Dark Mode“ zu betreiben. In diesem Modus werden Hintergründe von Fenstern werden dunkel dargestellt und Texte hell.

Auch Websites können diese Einstellung mit der CSS-Media-Query prefers-color-scheme: dark unterstützen, indem sie für den „Dark Mode“ ein angepasstes Farbschema verwenden.

Weiterlesen

Suche mit Ergebnissen in Echtzeit

Ab sofort gibt es auf meiner Website eine Suche mit Ergebnissen in Echtzeit, die als Trefferliste unterhalb des Suchfelds angezeigt werden. Ich habe dazu eine Erweiterung für WordPress entwickelt, die auf die Ajax-Schnittstelle zugreift und bereits während der Eingabe die Suche ausfüht.

Ja, es gibt dafür bereits Plugins – allerdings war die Umsetzung nicht all zu schwer (etwa 190 Zeilen Code) und ich habe dabei etwas über Ajax mit WordPress gelernt.

Die Bedienung mit der Tastatur ist auch möglich – man kann mit der Tabulator-Taste (der Taste, mit dem man im Browser den Focus wechselt) vom Suchfeld zur Liste wechseln und zwischen den Listeneinträge navigieren. Auch die Cursortasten [↓] und [↑] können für die Navigation benutzt werden. Zum öffnen eines Eintrag Return ([↵]) oder [Enter] drücken. Mit [Esc] wird die Liste mit den Suchergebnissen wieder geschlossen, ohne einen Eintrag auszuwählen.

Neue Funktionen bei Lightbox mit PhotoSwipe

Mittlerweile existiert Lightbox mit PhotoSwipe seit über zwei Jahren und hat über 6000 aktive Installationen :-).

Gegenüber der ursprünglichen Version habe ich PhotoSwipe mittlerweile um einige Funktionen erweitert:

  1. Eine Endlos-Schleife ist auch mit nur zwei Bildern möglich.
  2. Wenn keine Endlos-Schleife aktiv ist, werden die Pfeil-Knöpfe für das nächste oder vorherige Bild beim ersten und beim letzten Bild ausgeblendet.
  3. Die Vollbild-Ansicht kann auch mit drücken der Taste „F“ aktiviert werden.
  4. Beim Wechsel der Bilder mit den entsprechenden Knöpfen oder den Cursortasten in der Desktop-Ansicht erfolgt der Wechsel mit einer Animation ähnlich der Wischgeste in der mobilen Darstellung.

Darüber ist es jetzt auch möglich, WordPress-Bildergalerien und Gutenberg Galerie-Blöcke in ihrer eigenen Lightbox anzuzeigen.

Lightbox mit PhotoSwipe

Bisher habe ich für die vergrößerte Anzeige von Bildern das Plugin „Responsive Lightbox“ verwendet. Leider hatte diese Lösung aber einige Schwächen:

  • keine Möglichkeit, die Bildansicht zu vergrößern
  • Wisch-Gesten sehr „hakelig“ – man sieht, wie die Bildansicht nur sehr ruckhaft der Fingerbewegung folgt

Besonders die fehlende Möglichkeit der Bildvergrößerung ist mir bei einer anderen Website aufgefallen, wo ich Leute gesehen habe, die auf ihren Smartphones versucht haben, einzelne Bilder mit der üblich Zwei-Finger-Geste zu vergrößeren.

Als Alternative habe ich schließlich PhotoSwipe entdeckt – eine JavaScript-Bibliothek, die nicht nur eine Vergrößerung der Bilder per Mausklick oder Finger-Gesten ermöglicht, sondern auch eine bildschirmfüllende Vollbild-Ansicht. Auch die Reaktion auf Eingaben ist deutlich flüssiger als bei „Responsive Lightbox“.

Weiterlesen