# How to integrate photo gallery in hugo website?

**URL:** <https://discourse.gohugo.io/t/how-to-integrate-photo-gallery-in-hugo-website/10868>\
**Category:** support\
**Created:** [March 5, 2018, 8:15pm UTC](https://discourse.gohugo.io/t/how-to-integrate-photo-gallery-in-hugo-website/10868 "2018-03-05T20:15:05Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![agrawalsuneet](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/agrawalsuneet/32/4898_2.png) [@agrawalsuneet](https://discourse.gohugo.io/u/agrawalsuneet)\
**Post date:** [March 5, 2018, 8:15pm UTC](https://discourse.gohugo.io/t/how-to-integrate-photo-gallery-in-hugo-website/10868/1 "2018-03-05T20:15:05Z")

</div>

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](https://github.com/liwenyip/hugo-easy-gallery).

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](https://github.com/agrawalsuneet/agrawalsuneet/tree/dev) is the link to repo where I am trying to implement it.

---

<div class="post-metadata">

**Author:** ![brunoamaral](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/brunoamaral/32/21144_2.png) [@brunoamaral](https://discourse.gohugo.io/u/brunoamaral)\
**Post date:** [March 5, 2018, 9:48pm UTC](https://discourse.gohugo.io/t/how-to-integrate-photo-gallery-in-hugo-website/10868/2 "2018-03-05T21:48:14Z")

</div>

Here you go 🙂

> [@Adding a photoswipe gallery as a shortcode using Page.Resources](https://discourse.gohugo.io/t/adding-a-photoswipe-gallery-as-a-shortcode-using-page-resources/10672/8):
>
> The one above is the latest and should work almost out-of-the-box. It’s just that right now you can’t use the shortcode more than once in a page or post. frowning

---

<div class="post-metadata">

**Author:** ![agrawalsuneet](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/agrawalsuneet/32/4898_2.png) [@agrawalsuneet](https://discourse.gohugo.io/u/agrawalsuneet)\
**Post date:** [March 5, 2018, 11:59pm UTC](https://discourse.gohugo.io/t/how-to-integrate-photo-gallery-in-hugo-website/10868/3 "2018-03-05T23:59:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![brunoamaral](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/brunoamaral/32/21144_2.png) [@brunoamaral](https://discourse.gohugo.io/u/brunoamaral)\
**Post date:** [March 6, 2018, 12:19am UTC](https://discourse.gohugo.io/t/how-to-integrate-photo-gallery-in-hugo-website/10868/4 "2018-03-06T00:19:30Z")

</div>

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.