Photoswipe 5 with Hugo

Hello,

There is a really famous Photogallery tool known as photswipe which has version 5 now. I can see some very old posts about the previous versions but nothing for version 5 on how to setup up using Hugo modules and Hugo esm setup.

Is this something worth investing time in to try to use it with Hugo modules etc. or the best way to go is to add the package.json in Hugo. Are there any posts/articles explaining how to add photo swipe v5 to Hugo and the pros/cons of using Hugo modules vs npm when it comes to integrate photo swipe like tools?

Thanks

I am using PhotoSwipe 5 in the Gallery theme:

See it in action here:

However since I do not want to require Node.js in the theme, I included the PhotoSwipe modules directly.
You can also use npm for this and require the module, but I opted against this approach.

3 Likes

thank you @nicokaiser for quick response and on the point providing both live example and code repo.

I have a follow up concern, when using the Hugo module like it is suggested in the code:

[module]
  [[module.imports]]
    path = "github.com/nicokaiser/hugo-theme-gallery/v4"

what sort of privacy and security issues are there? why are so many Hugo examples required path is back to their GitHub account instead of original tool? for example can’t I just use the original creators GitHub like this

[module]
  [[module.imports]]
    path = "github.com/dimsemenov/PhotoSwipe"

Why should I use it through your repo and how hard it is if want to use the original repo to make sure it stays updated all times?

Thank you

You should not trust any repo, including mine. My example is a theme, which uses the PhotoSwipe library. You can review the code and the decide whether or not to use/trust the theme or not.
If you just want to use PhotoSwipe, you can import it directly (like the theme does) or import it via npm (like the theme did in older versions). Importing PhotoSwipe a Go module will most likely not work as intended, as it is a JavaScript module.