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:

Cronjobs unter MacOS mit BetterTouchTool

Die ultimative Alternative zu Cronjobs auf MacOS: BetterTouchTool zum Automatisieren von Aufgaben!

Backup MacOS

Fotos effizient verkleinern und sicher offline synchronisieren

Wir haben ein Bash Script entwickelt, dass die Größe aller Fotos im angegebenen Verzeichnis inkl. Unterverzeichnisse verkleinert. Die Funktionen sind: Die verkleinerten Fotos können un…
Android Backup Linux MacOS

Cloudpanel Error - /usr/bin/clpctl: 5: printf: %q: invalid directive

Je nach Server OS bzw. Einstellungen kann bei Cloudpanel im CLI Modus diese Fehlermeldung kommen: $ sudo clpctl db:show:master-credentials /usr/bin/clpctl: 5: printf: %q: invalid directive…
CloudPanel

Bereit für Ihr Projekt?