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:

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

Videos in Publii Beiträgen einbinden

Einbinden von Videos mit dem HTML Video Element

Publii

Kontaktformular mit Publii

Tailwind CSS Kontaktformular per Ajax mit PHPMailer absenden

PHP Publii Tailwind CSS

Bereit für Ihr Projekt?