WordPress-Plugins für Fotos und Karten
Diese Seite beschreibt mehrere WordPress-Plugins zur Verwaltung und Anzeige von Fotos in einem Image-Slider und der Anzeige von Fotos und Beiträgen mit GPX-Daten in Karten.
- WordPress-Plugin für eine Lightbox mit fslightbox
- WordPress-Plugins für Fotos und Karten zur Anzeige von Fotos mit GPX-Daten in einem Image-Slider und einer Leaflet-Karte
- Erweiterung der REST-API für die WordPress-Medienbibliothek
- WordPress-Plugin mit Fotorama und GPX-Viewer
- WordPress-Plugin für eine Übersichtskarte aller Tourenberichte
WordPress-Plugin für eine Lightbox mit fslightbox
Beschreibung und Funktionsumfang
Bei der Suche nach einem Lightbox-Plugin bin ich auf das Plugin von Kodefix gestoßen, dass fslightbox.js für Gutenberg-Galerien verfügbar macht. Das Plugin wird offensichtlich seit einiger Zeit nicht mehr gepflegt und ist nicht mit der aktuellen WordPress-Version getestet. Hier schafft nun das neue Plugin von mir Abhilfe. Es wendet die Lightbox von fslightbox.js auf Gutenberg-Blöcke mit Videos, Bildern, Galerien und Medien mit Text an. Die Lightbox gibt es in einer kostenfreien Basis-Version und einer kostenpflichtigen Version. Der Unterschied zwischen beiden Versionen ist, dass mit der gekauften Version zusätzlich Thumbnails und Bildunterschriften angezeigt werden und eine Zoom-Möglichkeit angeboten wird. Wer diese Funktionen nicht benötigt, kommt gut mit der Basis-Version aus.
Die Einstellung des Plugins können auf einfache Weise in einer JSON-Datei vorgenommen werden, wie das auch bei Themes und anderen Gutenberg-Blöcken der Fall ist. Dies hat den Vorteil, dass bei einem Umzug oder der Übertragung auf eine andere Website einfach die Datei kopiert und somit umgezogen werden kann. In der JSON-Datei kann ausgewählt werden, welcher Link am Bild bereits vorhanden sein darf ( hrefTypes : Empty, Media). Zusätzlich kann eingestellt werden, für welche Seiten oder Posts die Lightbox aktiviert werden soll (postTypes). Die Auswahl des eigentlichen Medien-Typs erfolgt mit der CSS-Klasse, die für das Bild oder Video verwendet wird (cssClassesToSearch). Mit excludeIDs kann eingestellt werden, welche Beiträge / Seiten nicht mit einer Lightbox ausgestattet werden sollen. Es wurden vernünftige Grundeinstellungen gewählt, sodass es zu Beginn keinen Grund geben sollte, diese zu ändern.
Download
Das WordPress-Plugin kann direkt als WordPress-Plugin installiert oder bei Github heruntergeladen werden. Am einfachsten ist aber die Installation direkt aus dem WordPress-Plugin-Verzeichnis.
Demo WordPress-Plugin mit fslightbox
Ein Klick aufs Bild öffnet die Lightbox.
NEU: Seit 08 / 2023 auch mit Support für YouTube-Videos.
WordPress-Plugins für Fotos und Karten zur Anzeige von Fotos mit GPX-Daten in einem Image-Slider und einer Leaflet-Karte
Demo WordPress-Plugin Fotorama_Multi
Zum Einstieg und zur Übersicht gibt es hier erstmal eine Demo der beiden Slider-Varianten des Plugins.
Demonstration mit Fotorama-Slider und Karte
Download: Pembrokeshire-Coast-Trail.gpx
Startadresse: Pembrokeshire, GB-PEM, Wales, GB-WLS, Vereinigtes Königreich
Demonstration mit Swiper-Slider und Karte
Download: Pembrokeshire-Coast-Trail.gpx
Startadresse: Pembrokeshire, GB-PEM, Wales, GB-WLS, Vereinigtes Königreich
Demonstration Swiper-Slider mit Video
Kurzbeschreibung
WordPress-Plugin für einen responsiven Image-Slider mit Thumbnails (basierend auf Fotorama). Die Bilder werden aus einem Ordner im WordPress-Upload-Verzeichnis entnommen. Optional wird eine Leaflet-Karte angezeigt. Diese Karte zeigt die GPX-Position der Bilder und zusätzlich einen GPX-Track, der während der Tour aufgezeichnet wurde (Leaflet elevation wird dafür verwendet). Die Karte bewegt sich synchron mit den Bildern im Fotorama-Slider, d.h. sie wird auf die GPS-Position des aktuellen Bildes zentriert. Unter der Karte wird ein Höhendiagramm des GPX-Tracks mit dessen Statistik angezeigt (dafür wird leaflet elevation verwendet). Der Shortcode kann mehr als einmal pro Seite verwendet werden. Der Slider funktioniert nur mit JPG-Dateien und nicht mit Videos.
Das Plugin ist responsive und SEO-freundlich. Es fügt die Links zu den Bildern optional in die Yoast-XML-Sitemap ein und setzt den Alt-Tag der Bilder, falls die Information in der Bilddatei bereitsteht. Bei der Erzeugung der YOAST-XML-Sitemap kann unterschieden werden, ob der Link zur Bilddatei oder der Link zur Bildseite von WordPress verwendet werden soll. Aber nur dann, wenn das Bild tatsächlich in den WordPress-Medien-Katalog eingefügt worden ist. In diesem Fall kann auch links oben im Fotorama-Slider ein „i“ angezeigt werden, das ebenfalls direkt zur Bildseite von WordPress führt.
Es ist möglich, entweder den Image-Slider oder die Karte mit Höhendiagramm alleine zu verwenden. Oder die Karte alleine mit einem einfachen Marker. Ein Zoom der Fotos ist nur im Vollbildmodus und auf Desktops verfügbar. Für mobile Geräte ist er deaktiviert, da die Usability leider nicht passend ist.
Obwohl die Bilder in einem Ordner des WordPress-Upload-Verzeichnisses erwartet werden, könnten sie auch in den WordPress-Medien-Katalog eingefügt worden sein. In diesem Fall wird das responsive image-srcset verwendet und die WordPress-Informationen des Media-Katalogs werden für den Titel und den alt-tag verwendet. Falls nur Bilder und thumbnails hochgeladen werden, und die Bilder nicht in den WordPress-Medien-Katalog eingefügt worden sind, werden nur diese Links für das image-srcset verwendet. Fully responsive wird der Fotorama-Slider also nur dann, wenn die entsprechenden Bildgrößen in WordPress erzeugt werden, das Bild also in den WordPress-Medien-Katalog eingefügt worden ist. In jedme Fall wird das Lazy-Loading verwendet.
Das Plugin setzt zusätzlich die Custom-Fields ‚lon‘ und ‚lat‘ des Beitrags. Dies sind der Längen- und Breitengrad des ersten Bildes bzw. Track-Punktes. Diese Koordinaten werden von einem anderen Plugin von mir verwendet, um alle Beiträge in einer Karte anzuzeigen, siehe weiter unten. Zusätzlich wird die Startadresse der Tour in einem benutzerdefinierten Feld eingetragen und unter der Karte mit einem Link zu google-maps angezeigt, um die Route zum Startpunkt berechnen.
Das Admin-Panel gibt einen Überblick über alle Shortcode-Parameter und erlaubt es, diese global zu setzen. Einstellungen bzw. Shortcodes, die für jede Verwendung einzeln gesetzt werden müssen, werden im Admin-Panel nicht angeboten. Das Admin-Panel bietet auch einen Upload-Bereich für GPX-Dateien mit zusätzlicher Größen- und Punktreduktion und Statistikberechnung. Bisher ist kein Gutenberg-Block vorgesehen, die Einbindung erfolgt über einen Shortcode.
Karten-Server: Update in 09 / 2022
Das Plugin wurde zuletzt in 09 / 2022 einem umfangreichen Update unterzogen. Dabei wurde alle verwendeten Bibliotheken auf den neuesten Stand gebracht und der Code weitgehend überarbeitet. Das Design hat sich dabei leider etwas geändert, während die Funktionalität unverändert ist. Zur Einhaltung der DSVGO (bzw. GDPR) wurden für die Bereitstellung der OpenStreetMap-Karten ein Karten-Server (Kachel-Server oder „Tile Server“) implementiert, der die Einhaltung der Nutzungsvorgaben von OSM und der DSVGO ermöglicht.
Swiper-Slider: Update in 10 / 2022
Neben Fotorama kann nun auch der Swiper-Slider genutzt werden. Die Codebasis dieses Sliders ist wesentlich aktueller und bietet mehr Anpassungsmöglichkeiten. Zur Ansicht, siehe oben unterhalb des Fotorama-Sliders. Die Vorzüge des Swiper-Slider sind unter anderem:
- neue Übergangseffekte
- Zoom direkt im Slider (nur bei Fotos, also nicht bei Videos)
- Videos können angezeigt werden
- bessere lightbox für Vollbildansicht (basiert auf fslightbox, siehe oben)
Demovideo des Plugins
Verwendung auf anderen Webseiten
Das Plugin wird erfolgreich eingesetzt auf folgenden Webseiten:
- E-Bike-Touren in der Eifel von Norbert Strickmann.
- https://laufundgeh.at/niederer-schwarzataler-rundwanderweg/
Download
Das WordPress-Plugin kann als Release direkt bei Github heruntergeladen werden. Die Anleitung ist im Readme zu finden. Support kann ich, je nach beruflicher Auslastung, in geringem Umfang leisten. Ausführliche Beschreibung, Änderungshistorie, Anleitung und Quellen (in Englisch) siehe auf Github.
Erweiterung der REST-API für die WordPress-Medienbibliothek
Mit diesem Plugin kann über die REST-API von WordPress direkt mit der WordPress-Medien-Bibliothek gearbeitet werden. Mit dem Plugin können Bilder oder deren Metadaten wie Titel, Beschreibung, Alt-Text und sogar Stichwörter geändert oder aktualisiert werden, ohne dass eine neue WordPress-ID vergeben werden muss. Nach der Aktualisierung wird zusätzlich das Bild im Post automatisch aktualisiert. Im Post, der das Bild verwendet, werden ebenfalls der Alt-Tag und die Caption aktualisiert, falls angegeben. Das ursprüngliche Erstellungsdatum des Bildes in der Medien-Bibliothek und des Posts bleibt dabei unverändert. Es wird lediglich das Änderungsdatum gesetzt.
Das WordPress-Plugin wurde als Ergänzung zu einem Lightroom-Plugin entwickelt, welches auf github zur Verfügung steht. Mit dem Lightroom-Plugin kann direkt mit der WordPress-Medien-Bibliothek gearbeitet werden, ohne sich bei WordPress als Admin anmelden zu müssen. Mir passiert es leider relativ häufig, dass ich Tippfehler in Titel oder Beschreibung habe oder irgendetwas an den Entwicklungseinstellungen in Lightroom ändern möchte. Bisher musste dann das Bild in die Mediathek neu hochgeladen werden und zusätzlich der Beitrag geändert werden, um auf das neue Bild zu verlinken. Das ist nun nicht mehr notwendig, da Caption und alt-tag des Bildes bei der Aktualisierung ebenfalls angepasst werden.
Beschreibung und Funktionen
Die detaillierte Beschreibung inklusiver aller Felder und Funktionen befindet sich in Github und soll daher hier nicht wiederholt werden.
Download
Das WordPress-Plugin kann direkt als WordPress-Plugin installiert oder bei Github heruntergeladen werden. Am einfachsten ist aber die Installation direkt aus dem WordPress-Plugin-Verzeichnis.
WordPress-Plugin mit Fotorama und GPX-Viewer
Das Plugin wird auf dieser Seiter wegen der weiter unten genannten Einschränkungen nicht mehr benutzt. Zur Weiterentwicklung steht es aber weiterhin auf Nachfrage zur Verfügung.
Vorgeschichte: WP-GPX-Maps
Zur Anzeige von GPX-Tracks in einer Karte wurde zu Beginn des hervorragende, kostenfreie Plugin „WP-GPX-Maps“ benutzt (https://de.wordpress.org/plugins/wp-gpx-maps/). Die zahlreichen Einstellungen des Plugins benötige ich aber nicht. Zudem bietet das Plugin eine Funktionalität nicht: Die Karte mit dem GPX-Track soll direkt unter der Bildergalerie angezeigt werden und sich mit der Bildergalerie synchron mit bewegen.
Demobild WP-GPX-Maps
Plugin Entwicklung mit Fotorama und GPX-Viewer
Das selbst entwickelte Plugin vereint die beiden Open-Source-Projekte „Fotorama“ und „GPX Viewer“ zu einem WordPress-Plugin. Beide liegen als Javascript-Bibliotheken vor, die frei heruntergeladen werden können.
Quellen
Der GPX Viewer von J. Berkemeier kann hier bezogen werden: https://www.j-berkemeier.de/GPXViewer/. Fotorama kann hier bezogen werden: https://fotorama.io/. Fotorama liegt bereits als WordPress-Plugin vor, mit dem alle Parameter gesetzt werden können, siehe: https://themesinfo.com/wordpress-plugins/free-wordpress-fotorama-plugin-dx. (Allerdings wurde dieses Fotorama-Plugin noch nicht für WordPress 5.6 angepasst, d.h. es läuft nicht mit der neuen jQuery-Version von WordPress 5.6)
Hintergrund
Der Wunsch war eine Bildergalerie zu erzeugen, unter der sich eine Karte befindet. Die Bilder der Galerie sollen mit ihrer GPS-Position angezeigt werden. Für das aktive Bild soll die Karte mit bewegt werden und mit jedem Bild „weiter wandern“.
Zudem sollte die lizenzierte Bildergalerie „Gmedia Photo Gallery“ zu ersetzen werden. Diese ist in der Bedienung ziemlich umständlich und bezüglich Support und Updates stets etwas hinterher. Bei einigen Updates wurde in der Vergangenheit die ganze Website zerstört. Support-Anfragen werden meistens gar nicht beantwortet. Auch ist beim Kauf Vorsicht geboten, da die möglichen Galerie-Module gesondert zu bezahlen sind. Darüber hinaus setzt das Modul zur Geo-Lokalisierung nur Google-Maps ein. Das ist bezüglich Kosten und Datenschutz grenzwertig.
Lösung
Das neue „Fotorama-GPXViewer-Plugin“ zeigt nun die responsive Bildergalerie Fotorama als jQuery-Slider mit Thumbnails an. Direkt unterhalb wird eine Leaflet-Karte angefügt, auf der die Orte der Bilder aus der Galerie angezeigt werden. Die Leaflet-Karte wandert parallel zum angezeigten Bild mit. Zusätzlich kann auch noch ein zugehöriger GPX-Track inklusive Höhendiagramm angezeigt werden. Die Leaflet-Karte wird mit der Javascript Bibliothek GPX-Viewer eingebunden und erzeugt.
Die Bilder und GPX-Tracks werden direkt aus einem Verzeichnis verwendet und nicht aus der WordPress-Medien-Bibliothek. Diese ist -meiner Meinung und Erfahrung nach- für die hier verwendete Bildmenge nicht geeignet.
Bekannte Bugs
Wenn in der Karte die Wegpunkte einmal de- / re-aktiviert werden, folgt die Anzeige nicht mehr dem aktuellen Bild. Die Seite muss dann neu geladen werden.
Die Dateien des GPX-Viewers dürfen nicht minimiert werden (minify). Wenn doch, wird keine Karte mehr angezeigt. Daher kann das Plugin „Autoptimize“ (https://wordpress.org/plugins/autoptimize/) NICHT benutzt werden.
Im Plugin „Asset Clean up“ (https://wordpress.org/plugins/wp-asset-clean-up/) muss das Fotorama-GPX-Viewer-Plugin explizit ausgenommen werden.
Die ausführliche Liste der Bugs findet sich im Readme des Github-Verzeichnisses.
Wegen dieser für mich nicht lösbaren Beschränkungen erfolgte der Umstieg auf Leaflet-Elevation und die Entwicklung eines weiteren Plugins mit Fotorama und Leaflet-Elevation.
Download
Das WordPress-Plugin kann nicht mehr direkt bei Github heruntergeladen werden. Es wird nicht mehr weiter entwickelt.
WordPress-Plugin für eine Übersichtskarte aller Tourenberichte
Zweck
Mit diesem Plugin können alle Touren- und Reiseberichte einer Website in einer Übersichtskarte mit Markern und Links angezeigt werden. Die Marker werden nach Touren-Kategorien unterschieden und mit Titel, Bild und Text-Auszug angezeigt. Der Marker verlinkt direkt zum Beitrag. Mit einer zusätzlichen Option kann unterhalb der Karte eine Tabelle mit allen Posts erzeugt werden. Die Tabelle kann sortiert und gefiltert werden. Zur Erstellung der Tabelle wird tabulator verwendet.
Dazu müssen die Posts in einem „Custom-Field“ die geographische Länge und Breite als „lat“ und „lon“ enthalten. Diese Felder können entweder manuell oder automatisiert mit dem Fotorama-Plugin gesetzt werden. Zusätzlich sollte in den Stichwörtern noch eine Kategorie wie „Radfahren oder Wandern oder Paddeln oder Skifahren ..“ enthalten sein, um die zugehörigen Icons für die Karte auswählen zu können. Diese Zuordnung, die verwendeten Stichwörter und Icons können direkt im PHP-Code, aber eben nur dort geändert werden. Siehe dazu die Anleitung auf github.
Screenshot des Plugins
Vorgeschichte: Novo-Maps
Zu Beginn habe ich das kostenlose Novo-Maps-Plugin eingesetzt. Ohne Frage ein hervorragendes Plugin mit zahlreichen Einstellungen und Möglichkeiten. Allerdings auch mit einem Nachteil: Es können keine Open-Street-Map-Karten eingesetzt werden (Stand 04 / 2020). Da das Projekt sehr ähnlich zum oben beschriebenen Plugin für die Kombination aus Bildergalerie und Leaflet-Karte ist, habe ich auch hier selbst ein Plugin entwickelt.
Übergang von Novo-Maps zu Leaflet
Jeder Touren- und Reisebericht muss in den „Custom-Fields“ die Geo-Koordinaten der Tour oder der Reise enthalten. (Anleitung siehe hier). In meinem Fall waren die Geo-Daten in der Datenbank bereits vorhanden. Novo-Maps hat diese Daten in einem speziellen Feld in der SQL-Datenbank abgelegt. Ich habe dazu zunächst ein Plugin geschrieben, das die Daten einmalig aus den bestehenden Feldern in die neuen Custom-Fields „lat“ und „lon“ kopiert.
Lösung mit Leaflet und Leaflet MarkerCluster
Das Plugin durchsucht alle Touren- und Reiseberichte nach den Daten-Feldern „lat“ und „lon“ (Custom-Field). Das Plugin erzeugt mit diesen Werten Marker auf einer Leaflet-Karte. Der Marker enthält Titel, Beitragsbild und Auszug des Beitrags. Mit den vergebenen Schlagwörtern wird das Marker-Icon festgelegt. Die Schlagwörter müssen daher gewissen Vorgaben folgen. Ohne Schlagwort wird die Standard-Kategorie verwendet. Als Wohnmobilist benutze ich hier das Symbol eines Wohnmobils. Das Plugin zentriert die erzeugte Karte automatisch. Die Karte wird mit einem Shortcode auf einer Seite eingebunden. Zum Beispiel auf dieser Seite geht es mit diesem Link.
Alternativen
Das WordPress-Plugin Geo Mashup bietet mindestens dieselbe Funktionalität. Auch hier werden nach Festlegung der Geo-Daten für einen Beitrag oder Seite diese auf einer Karte dargestellt. Zur Freischaltung der vollen Funktionalität ist eine Lizenzgebühr zu entrichten. Zudem werden die Geo-Daten nicht automatisch aus den Blog-Daten extrahiert, wie mit meinem Plugin Fotorama + Leaflet-Elevation (Fotorama_multi, siehe am Seitenanfang)
Quellen und Bezug
Leaflet: https://leafletjs.com/
MarkerCluster: https://github.com/Leaflet/Leaflet.markercluster
Die angegebenen Javascript-Bibliotheken können als OpenSource-Projekte frei eingesetzt werden. Vielen Dank dafür!
Download
Das WordPress-Plugin kann direkt bei Github heruntergeladen werden. Die vollständige und ausführliche Anleitung ist im Readme zu finden. Support kann ich nur in geringem Umfang leisten.
Hallo Martin,
heute möchte ich mal ausdrücklich danke sagen: für Deine sehr beeindruckende Website mit den sehr schönen Fotos, Tourenberichten, Reiseberichten etc. Tolle Impressionen, die Du nun schon über so viele Jahre gesammelt und hier zusammengestellt hast!
Deine Website und vor allem auch die Umsetzung in WordPress mit Deinen selbst entwickelten Plugins haben nicht zuletzt auch mich inspiriert, eine eigene Website mit Tourenberichten und auch Panoramen etc. zu erstellen. Ich habe vorher länger im Web nach einem geeigneten Plugin zur synchronen Darstellung von Fotos und deren Aufnahmeorten auf einer Karte gesucht, die Lösung mit Deinen Plugins ist für meinen Bedarf auf jeden Fall die beste!
Erlebnisreiche / spannende Touren u. Reisen weiterhin…!
VG Norbert
eifel-touren.de.
Klasse