Heute gibt es wieder ein Wunschthema. Es geht es um die Darstellung von Fotos in WordPress.

Im Zeitalter von Facebook, Pinterest, Instagram und ähnlichen Services sind die Ansprüche an die Darstellung von Fotos gestiegen. Besucher erwarten auch auf selbst gehosteten Websites eine schicke Darstellung. Auf allen denkbaren Geräten sollte eine Galerie einfach per Touch, Swipe, Pinch und Klick bedienbar sein und schnell laden.

Vermutlich hast du das Problem auch schon mal gehabt. Du wolltest Fotos auf deiner Website in einer Art Slideshow oder einem Grid darstellen. Nachdem die Galerie lief, hast du schnell festgestellt, dass es eben doch nicht auf allen Geräten gleich gut bedienbar war, ganz zu schweigen von der Ladezeit. Wenn dann noch individuelle Wünsche des Kunden kommen oder es einfach viele Fotos sind, verzweifelt man schnell.

PhotoSwipe

Die JavaScript Library PhotoSwipe ist eine echte Hilfe in solchen Fällen.

PhotoSwipe

Sie zeichnet sich durch die folgenden drei Eigenschaften aus:

• Modular: PhotoSwipe besteht aus zahlreichen Modulen, die es ermöglichen, nur die Teile der Bibliothek zu nutzen, die du wirklich brauchst. Das hält den JavaScript Code klein.
• Responsiv: Photoswipe lädt das zur Bildschirmgröße passende Foto.
• Touch Unterstützung: PhotoSwipe unterstützt die meisten Touch Gesten wie beispielsweise das „größer ziehen mit zwei Fingern“ und das Schließen der Einzelansicht durch „nach oben wischen“.

Photoswipe hat nur einen Haken. Es ist ein Stück Code, das nicht so einfach out of the Box funktioniert und Kenntnis von JavaScript erfordert.

Glücklicherweise gibt es eine gute Dokumentation und so etwas wie offizielle Plugins für Ruby, Ember.js, Eager, Koken, Orchard, Yellow CMS, Kirby und Drupal.

Es gibt kein offizielles WordPress Plugin aber es gibt mehrere WordPress Plugins, die die Bibliothek nutzen um die im WordPress Core bereits vorhandene Galeriefunktion zu erweitern.

WordPress Galerien erstellen

Bevor ich die PhotoSwipe Bibliothek hinzufüge, beschreibe ich zunächst den Weg, wie du in WordPress Galerien erstellst. Eine WordPress Galerie besteht aus existierenden Fotos, die du innerhalb eines Beitrags hinzufügen kannst. Klicke einfach auf den Dateien hinzufügen Button und wähle die entsprechenden Bilder aus.

WordPress – Galerie zusammenstellen

Hinweis: Falls noch keine Fotos vorhanden sind, kannst du in diesem Schritt auch welche hochladen. Wechsle einfach in das Tab Dateien hochladen und wähle danach die Bilder aus.

Nach einem Klick auf den Galerie erstellen Button kannst du weitere Eigenschaften der Galerie wählen. Du kannst die Größe der Vorschaubilder auswählen, was bei einem Klick auf das Bild passieren soll, die Art der Sortierung, die Anzahl der Spalten und den Typ des Layouts.

Galerie Einstellungen

Nach dem Speichern erscheinen die Bilder innerhalb der visuellen Ansicht im Editor. Du kann die Einstellungen weiterhin bearbeiten.

Galerie in der visuellen Ansicht des Editors

Wenn du in den Text Modus wechselst, siehst du, was hinter der Galerie steckt. Sie ist ein WordPress ShortCode, dem Parameter und Id’s der Bilder übergeben wurden.

Galerie – ShortCode

Damit ist deine WordPress Galerie fertig und sieht auch o.k. aus (Ich probiere das hier beim Schreiben des Artikels im NOVATREND Blog aus, deshalb steht im Titel Privat).

WordPress-Galerie

Hier ein Beispiel einer Darstellung mit der WordPress Slideshow Option (noch ohne PhotoSwipe).

WordPress – DiaShow

Beide Darstellungsarten funktionieren sehr gut, sehen aber doch recht „hausbacken“ aus.

Plugin PhotoSwipe Masonry Gallery

An dieser Stelle kommt das PhotoSwipe Masonry Gallery Plugin ins Spiel. Es arbeitet auf der Basis von WordPress Galerien und verändert deren Darstellung.

PhotoSwipe Masonry Gallery

In den Einstellungen des Plugins kann die Größe der Thumbnails und die Maximalgröße des Einzelbildes eingestellt werden. Außerdem lässt sich ein weißer Hintergrund konfigurieren und der Masonry Effekt deaktivierten.

PhotoSwipe Einstellungen

Das Ergebnis sieht sehr beeindruckend aus (Beispiel). Die Thumbnails ordnen sich je nach verfügbarem Platz an. In der Einzelansicht auf Touch Geräten kannst du dich durch die Bilder „wischen“ und diese auch auf Pinterest, Twitter und Facebook teilen. Jede Einzelansicht hat einen eindeutigen URL.

WordPress Galerie mit PhotoSwipe Masonry Plugin

Durch die Nutzung der WordPress Galerien hat das Plugin einen angenehmen Nebeneffekt. Du musst keine Galerien separat erstellen und WordPress wird das eigene Galerie Feature sicherlich weiter pflegen.

Achtung: Die Anzahl der Bilder und die Größe der Thumbnails müssen beachtet werden, sonst kommt es zu langen Ladezeiten und dem Gegenteil dessen, was ich letzte Woche noch bemängelt habe. Das zur Neuberechnung der Thumbnails in den PhotoSwipe Einstellungen vorgeschlagene AJAX Thumbnail Rebuild Plugin funktioniert gut und sollte bei einer Änderung der Thumbnailgröße genutzt werden.

Links:

• PhotoSwipe
• WordPress PhotoSwipe Masonry Plugin
• AJAX Thumbnail Rebuild Plugin
• WordPress Gallery Shortcode Dokumentation

tl;dr: Mit PhotoSwipe lassen sich Fotos ansprechend darstellen