How to integrate photo gallery in hugo website?

support
1

Hi,

It might not be the right place to ask for help but I am trying to implement a photo gallery using shortcode provided here.

I added
/layout/shortcodes/gallery.html
/layout/shortcodes/load-photoswipe.html
/static/js/load-photoswipe.js
/static/css/hugo-easy-gallery.css

I also added below code in my theme/hugo-geo/layouts/partials/footer.html before tag

{{ if ($.Scratch.Get “photoswipeloaded”) }}




{{ end }}

and I also added a folder in static/img/myfolder path
and using the below line in markdown file
{{< gallery dir="/img/myfolder/" />}} {{< load-photoswipe >}}
but I cant get the images properly, they overlap.
Also, they are just images but the click event doesn’t work with them opening the gallery.

Am I missing something?

Here is the link to repo where I am trying to implement it.

1 Like
2

Here you go :slight_smile:

2 Likes
3

I tried to use the same but no luck.
I added the gallery.html with the respective code from the post suggested
and trying to add the same shortcode using below code in yam

    resources:

- src: "../img/myfolder/*.png" name: gallery-:counter title: gallery-title-:counter

Also, I tried

{{< gallery src="../img/myfolder/*.png" >}}

Also, what if I want to use it more than once in a page or post?
I want different images for different projects on the same page.

4

The shortcode is {{% gallery folder="" title="" %}}

And if you want to use it more than once, you will have to move the required javascript to the footer of your code. Otherwise you would be loading photoswipe.js multiple times.

Just remember to keep one folder per gallery and you should be fine. Don’t forget the frontmatter.