PhotoSwipe und Publii CMS

Publii CMS Bildergalerie mit PhotoSwipe verwenden

PhotoSwipe ist eine JavaScript Bildergalerie und Lightbox. Wir können diese Open Source Anwendung auch sehr einfach in Publii CMS Projekten bzw. Webseiten einbinden.

PhotoSwipe herunterladen

Wir laden dazu die Dateien photoswipe-lightbox.umd.min.js und photoswipe.umd.min.js in das Javascript Assets Verzeichnis vom Publii CMS Theme. z.B. /assets/js/

Die PhotoSwipe Stylesheet Datei photoswipe.css laden wir in das CSS Assets Verzeichnis vom Publii CMS Theme. z.B. /assets/css/

Templates anpassen

Im nächsten Schritt müssen wir noch die Templates anpassen bzw. Code hinzufügen:

head.hbs

Im head Bereich wird die Stylesheet Datei geladen, aber nur wenn im Post (Beitrage) auch eine Bildergalerie vorhanden ist:

{{#is "post"}}
{{#post}}
{{#if hasGallery}}
<link rel="stylesheet" href="{{css "photoswipe.css" }}">
{{/if}}
{{/post}}
{{/is}}

footer.hbs

Im Footer vor dem abschließenden Body Tag fügen wir hinzu:

{{#is "post"}}
{{#post}}
{{#if hasGallery}}
{{> photoswipe}}
{{/if}}
{{/post}}
{{/is}}

partials/photoswipe.hbs

Diese Datei wird im partials Verzeichnis hinzugefügt. Es wird damit die JavaScript Klasse geladen und PhotoSwipe initialisiert. Bei Bedarf können hier auch weitere PhotoSwipe Einstellungen gemacht werden.

<script src="{{js "photoswipe.umd.min.js"}}"></script>
<script src="{{js "photoswipe-lightbox.umd.min.js"}}"></script>

<script type="text/javascript">

let elements = document.querySelectorAll (".gallery__item a");
elements.forEach(function(img, index) {
var dataSize = img.getAttribute("data-size").split('x');
img.setAttribute("data-pswp-width", dataSize[0]);
img.setAttribute("data-pswp-height", dataSize[1]);
});

var lightbox = new PhotoSwipeLightbox({
gallery: '.gallery',
children: 'a',
pswpModule: PhotoSwipe
});
lightbox.init();

</script>

Wenn man jetzt im Publii CMS eine Bildergalerie hinzufügt wird PhotoSwipe als Lightbox verwendet.

Beispiel

Neueste Blog Einträge:

Firewalla DNS und CloudPanel VM

Wir verwenden als Firewall und Verwaltung der Geräte im Netzwerk die Lösung von Firewalla. Als Standardeinstellung bekommt jedes Gerät eine interne Domain mit der .lan…
Linux UnRaid Web

CloudPanel unter UnRaid installieren

CloudPanel ist ein kostenloses und modernes Server-Control-Panel zum Konfigurieren und Verwalten von Webapps mit Fokus auf Benutzerfreundlichkeit.

Laravel Linux UnRaid Web

UnRaid Docker Disk vergrößern

Kurztipp: Docker Image (vDisk) Größe erweitern bzw. vergrößern

UnRaid

Bereit für Ihr Projekt?