We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Support Current version of PhotoSwipe

February 21, 2023 at 3:24 pm #9382

[anonymous]

In mellisa template PhotoSwipe is used as image gallery. This works well. But this version of PhotoSwipe is from 2019.

I have now tried (using the example in the link) to use a current version of PhotoSwipe (with Blank Publii Template)
https://github.com/dimsemenov/PhotoSwipe/tree/master/dist/umd

Basically it works, but it lacks the correct image size specification.

Publii generates data-size=”${img.dimensions}”. But PhotoSwipe needs data-pswp-width=”${img.width}” data-pswp-height=”${img.height}”

According to the GitHub code, the generateOutput() function is used for this. Is there a way to do something with this? Override? helpers.js?

https://github.com/GetPublii/Publii/blob/master/app/src/components/post-editor/GalleryPopup.vue

Thanks a lot!

February 21, 2023 at 3:42 pm #9383
[anonymous]
```
<script src="{{js "photoswipe.umd.min.js"}}"></script>
<script src="{{js "photoswipe-lightbox.umd.min.js"}}"></script>

<script type="text/javascript">
    var lightbox = new PhotoSwipeLightbox({
        gallery: '.gallery',
        children: 'a',
        bgOpacity: 0.2,
        // dynamic import is not supported in UMD version
        pswpModule: PhotoSwipe
    });
    lightbox.init();
</script>
```
February 21, 2023 at 8:19 pm #9387
[anonymous]
I could solve it in the meantime.
```
<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>
```