PhotoSwipe und Publii CMS

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