Add Slideshow Plugin

[wernerjoss]

this is just a feature request, not an issue 😄 - I would find it useful to add a Slideshow feature (maybe configurable, if desired or not) and stumbled over this one.
what do you think about this ?
greetings
Werner (aka hoernerfranz in the Grav Discourse Forum)

[Karmalakas]

I think it's a great suggestion, but I can't promise any timeline. So if you're willing to play around with it, contributions are always welcome 🙂

[wernerjoss]

ok, fine - I'll see if I can get this working, guess I will have to figure out how to add esm modules to grav first.
I'll post here as soon as I have something to contribute...

[Karmalakas]

I'd need to have a closer look here, but I don't think you should add any ESM modules to Grav itself. How I imagine this:

• Add 2 options to plugin config
  • Enable slideshow
  • Slide change time (default I see is 4 secs)
• If slideshow is enabled
  • Add required JS in the plugin itself together with the main JS
  • Add required config in the JS part of code

I believe that should do it

[wernerjoss]

Am Donnerstag, 28. Dezember 2023, 17:21:18 CET schrieb Karmalakas:

I'd need to have a closer look here, but I don't think you should add any ESM modules to Grav itself.

that is also my impression - there does not seem to exist a method to do this, as `$this->grav['assets']->addJs() ` is not meant to import modules, just add pure javascript. edit: I just saw there is [this](https://learn.getgrav.org/17/themes/asset-manager#addjsmodule-asset-options) which seems to be meant to load modules, will check it out...

How I imagine this: - Add 2 options to plugin config - Enable slideshow - Slide change time (default I see is 4 secs)

agreed - these are the 2 minimum Options here, maybe also some transititon effect (slide, fade...) later

- If slideshow is enabled, add required JS in the plugin itself together with the main JS

I'll see how to do this, as far as I see, the code from the slidshow plugin is only available as an esm module.

- Add required config in the JS part of code

yes.

[Karmalakas]

There's addJsModule() for Twig, and also in the Assets class (undocumented). Wonder why Slideshow plugin does not use the conventional .mjs extension then 🤔 Anyway, I think, depending on config, this module should be added somewhere in here

[wernerjoss]

yes, PhotoswipeExtension.php will be the right place to add the module.
let's see if it will work - will take some time, though 😄

[wernerjoss]

well, after some fiddling with several approaches, I got it going with Grav, BUT: only through adapted templates, no plugin.
basically, I directly incorporated this code:
{% block modules %} <script type="module"> import PhotoSwipeLightbox from 'https://unpkg.com/[email protected]/dist/photoswipe-lightbox.esm.js'; import PhotoSwipe from 'https://unpkg.com/[email protected]/dist/photoswipe.esm.js'; import PhotoSwipeSlideshow from 'https://cdn.jsdelivr.net/gh/htmltiger/photoswipe-slideshow/photoswipe-slideshow.esm.min.js'; const lightbox = new PhotoSwipeLightbox({ gallery: '#photoswipe-gallery', pswpModule: PhotoSwipe, children: 'a'}); const slideshowPlugin = new PhotoSwipeSlideshow(lightbox,4); // 4 sec lightbox.init(); </script> {% endblock %}
from the htmltiger/photoswipe-slideshow Demo into a new base template, with some more adaptions in the corresponding partials template.
as said, this works, but is far from being something that could be released to the public.

so far, my efforts to incorporate the functionality into grav-plugin-photoswipe all failed.
the addJsModule Option
in PhotoswipeExtension.php just doesn't work, same with named-assets-and-collections which throws errors w.r. to wrong modules.
I also tried something like
$this->grav['assets']->addInlineJs( sprintf('import PhotoSwipeLightbox from "https://unpkg.com/[email protected]/dist/photoswipe-lightbox.esm.js";\n'), )
which does not work either.
so, ATM, I'm stuck somehow 😞 , but will investigate further.
anyway: if you have any Hint, that will be welcome.

[wernerjoss]

so, after some more tries, I have come to the point where I think the Problem is really that Grav Asset Manager just can't load esm Modules, which is bad, as more and more Projects only provide these nowadays, including photoswipe.
Maybe this is also the reason why grav-plugin-photoswipe still uses photoswipe 4.x ?
in any case, I have created an issue at the Grav Repo.

[Karmalakas]

OK, so this slideshow plugin is for v5, and v5 I see is a complete rewrite. I guess at first I'd need to update this plugin to use the v5 and only then we can look into slideshow. I don't think I will get to rewriting my plugin to support v5 any time soon though

[wernerjoss]

Am Samstag, 30. Dezember 2023, 15:35:47 CET schrieb Karmalakas:

OK< so this slideshow plugin is for v5, and v5 I see is a complete rewrite. I guess at first I'd need to update this plugin to use the v5 and only then we can look into slideshow.

yes, seems so.

I don't think I will get to rewriting my plugin to support v5 any time soon though

ok, no problem - in the end, it is your time and your decision :-) I will now wait if my issue #3783 will get some response and/or resolution. maybe I'll investigate further then. in the meantime, I can live with my ugly template solution for pages where I need a slideshow.