WordPress-Plugins für Fotos und GPX

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 Anzeige von Fotos mit GPX-Daten in einem Image-Slider und einer Karte

Screenshot

Screenshot wordpress-plugin fotos in image-slider mit anzeige GPX daten in Karte
Screenshot WordPress-Plugin mit Fotorama-Slider und Karte mit Leaflet-Elevation

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 dem 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. 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.

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.

Ausführliche Beschreibung, Anleitung und Quellen (in Englisch) siehe auf Github.

Demovideo des Plugins

Verwendung auf anderen Webseiten

Das Plugin wird erfolgreich eingesetzt auf folgenden Webseiten:

E-Bike-Touren in der Eifel von Norbert Strickmann.

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.

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 werden OHNE dass eine neuen WordPress-ID vergeben werden muss. Nach der Aktualisierung wird das Bild im Post automatisch aktualisiert.
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 Bilder 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

Screenshot WordPress-Plugin  WP-GPX-Maps
Screenshot WP-GPX-Map Plugin

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.

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 erzeugt werden. Die Tabelle kann sortiert und gefiltert werden.

Screenshot des Plugins

Übersichtskarte aller Tourenberichte mit GPX-Daten der Website
Übersichtskarte der Website auf www.mvb1.de

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 Felder 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 vollem 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 Anleitung ist im Readme zu finden. Support kann ich nur in geringem Umfang leisten.

1 Kommentar zu „WordPress-Plugins für Fotos und GPX

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*