# Image gallery

**URL:** <https://discourse.gohugo.io/t/image-gallery/594>\
**Category:** feature\
**Created:** [January 15, 2015, 10:20am UTC](https://discourse.gohugo.io/t/image-gallery/594 "2015-01-15T10:20:27Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sergei\_G](https://avatars.discourse-cdn.com/v4/letter/s/7feea3/32.png) [@Sergei\_G](https://discourse.gohugo.io/u/Sergei_G)\
**Post date:** [January 15, 2015, 10:20am UTC](https://discourse.gohugo.io/t/image-gallery/594/1 "2015-01-15T10:20:27Z")

</div>

I wish I was able to use hugo to generate a simple image gallery for photos located in a directory. It would’ve been album per directory.

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [January 15, 2015, 3:39pm UTC](https://discourse.gohugo.io/t/image-gallery/594/2 "2015-01-15T15:39:31Z")

</div>

Agree. But in the meantime you could pick up a tip here:

> **[Howto: Integrate Google Plus galleries](https://discourse.gohugo.io/t/howto-integrate-google-plus-galleries/281)**
>
> Even though the lib I reference supports other galleries too, Google Plus (or Picasa) is what I’ve used. I posted this topic a while ago: So I wanted to replace the WP galleries on my personal blog, now moved to Hugo. Since then I have done some...

---

<div class="post-metadata">

**Author:** ![tomhelmer](https://avatars.discourse-cdn.com/v4/letter/t/ecae2f/32.png) [@tomhelmer](https://discourse.gohugo.io/u/tomhelmer)\
**Post date:** [January 16, 2015, 6:16pm UTC](https://discourse.gohugo.io/t/image-gallery/594/3 "2015-01-16T18:16:11Z")

</div>

I have written an article on how I implemented PhotoSwipe with some shortcodes. [http://www.thehome.dk/article/photoswipe-gallery-hugo/](http://www.thehome.dk/article/photoswipe-gallery-hugo/)

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [January 16, 2015, 6:21pm UTC](https://discourse.gohugo.io/t/image-gallery/594/4 "2015-01-16T18:21:51Z")

</div>

Nice. A little tip with 0.13-shortcodes:

```
{{ < gallery title="Example gallery" >}}

```

Can be replaced with

```
{{</* gallery title="Example gallery" */>}}

```

It’s an hidden feature I added to support showing shortcode examples in doc.

etc.

(to avoid shortcode rendering)

---

<div class="post-metadata">

**Author:** ![tomhelmer](https://avatars.discourse-cdn.com/v4/letter/t/ecae2f/32.png) [@tomhelmer](https://discourse.gohugo.io/u/tomhelmer)\
**Post date:** [January 16, 2015, 8:33pm UTC](https://discourse.gohugo.io/t/image-gallery/594/5 "2015-01-16T20:33:47Z")

</div>

Nice, I have updated the article.

---

<div class="post-metadata">

**Author:** ![liwenyip](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/liwenyip/32/3546_2.png) [@liwenyip](https://discourse.gohugo.io/u/liwenyip)\
**Post date:** [March 7, 2017, 9:21pm UTC](https://discourse.gohugo.io/t/image-gallery/594/6 "2017-03-07T21:21:52Z")

</div>

I’ve written an article on how I implemented PhotoSwipe to work with existing `figure` shortcodes. I also used jQuery instead of vanilla JS to do the initialisation.

Article: [https://www.liwen.id.au/photoswipe/](https://www.liwen.id.au/photoswipe/)  
Code: [https://github.com/liwenyip/hugo-pswp](https://github.com/liwenyip/hugo-pswp)

Thanks tomhelmer - your article helped me a lot.

Also thanks bep for the tip to avoid shortcode rendering. I spent ages searching the docs for that feature!

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [March 7, 2017, 10:10pm UTC](https://discourse.gohugo.io/t/image-gallery/594/7 "2017-03-07T22:10:17Z")

</div>

Very nice article – I esp. like how your gallery is so composable.

Only one little comment: Having a init type of shortcode that loads JS etc. doesn’t seem very user friendly. I have used the presence of a front matter param for that, and then load the code once in the template. But from your example, that may not be an option.

We could, however, fairly easily, add a method to Page checking for the presence of a shortcode, so:

```auto
{{ if .HasShortCode "gallery" }}
// Include JS stuff
{{ end }}

```

If that sounds like a viable solution, please open an issue on GitHub.

---

<div class="post-metadata">

**Author:** ![rwi](https://avatars.discourse-cdn.com/v4/letter/r/cc9497/32.png) [@rwi](https://discourse.gohugo.io/u/rwi)\
**Post date:** [March 7, 2017, 10:18pm UTC](https://discourse.gohugo.io/t/image-gallery/594/8 "2017-03-07T22:18:29Z")

</div>

> [@bep](#):
>
> We could, however, fairly easily, add a method to Page checking for the presence of a shortcode, so:

Even my comment is not related to the initial topic. But this feature you just mentioned here would **be simply awesome**! This is something caused a big workaround in my AMP-Theme. Could we add something similar like `.HasPartial` for the whole layout?

@liwenyip - Cool work! 🙂

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [March 7, 2017, 10:22pm UTC](https://discourse.gohugo.io/t/image-gallery/594/9 "2017-03-07T22:22:03Z")

</div>

> [@rwi](#):
>
> Could we add something similar like .HasPartial for the whole layout?

No… a partial has no connection to a `Page`.

Thinking about it:

The above issue could have been solved by using `Scratch` and just include the init code directly in the `gallery` shortcode, and only include the JS code if a page scoped `Scratch` flag had not already been set.

---

<div class="post-metadata">

**Author:** ![liwenyip](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/liwenyip/32/3546_2.png) [@liwenyip](https://discourse.gohugo.io/u/liwenyip)\
**Post date:** [March 12, 2017, 10:53pm UTC](https://discourse.gohugo.io/t/image-gallery/594/10 "2017-03-12T22:53:59Z")

</div>

> [@bep](#):
>
> The above issue could have been solved by using Scratch and just include the init code directly in the gallery shortcode, and only include the JS code if a page scoped Scratch flag had not already been set.

That would certainly work for any use cases where you need to check for presence of a shortcode - just set a Scratch flag from the shortcode(s) you’re interested in.

---

<div class="post-metadata">

**Author:** ![liwenyip](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/liwenyip/32/3546_2.png) [@liwenyip](https://discourse.gohugo.io/u/liwenyip)\
**Post date:** [March 24, 2017, 9:37pm UTC](https://discourse.gohugo.io/t/image-gallery/594/11 "2017-03-24T21:37:49Z")

</div>

I’ve created a better version of my PhotoSwipe gallery.

Article: [https://www.liwen.id.au/heg/](https://www.liwen.id.au/heg/)  
Code: [https://github.com/liwenyip/hugo-easy-gallery/](https://github.com/liwenyip/hugo-easy-gallery/)

---

<div class="post-metadata">

**Author:** ![dkebler](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/dkebler/32/7285_2.png) [@dkebler](https://discourse.gohugo.io/u/dkebler)\
**Post date:** [March 31, 2017, 2:28am UTC](https://discourse.gohugo.io/t/image-gallery/594/12 "2017-03-31T02:28:12Z")

</div>

Nice @liwenyip. Your code would be all one would need for displaying a handful at a time.

But for a whole directory of images (changing in time) I’ve been manually, for now, using [thumbsup](https://github.com/thumbsup/thumbsup) to generate a set of thumbs and full images from a directory of raw images. Then I take the `<li>'s` from the code it generates and put in a shortcode that then gets dropped into a md file.

See it here in action here. [http://4005.kebler.net/#photos](http://4005.kebler.net/#photos).

But awhile back I made an issue with the developer of Thumbsup and looks like there is going to be a nice solution where thumbsup will export the data model created by processing all the images in a directory. Then I (or anyone) can build a partial from that data model and a shortcode for easy embedding. BTW his code accesses each photo’s metadata for the caption so instead of having to add captions to each photo manually in a shortcode that can be done “inside” the photo itself.

[https://github.com/thumbsup/thumbsup/issues/59](https://github.com/thumbsup/thumbsup/issues/59)

It’s not perfect (as Thumbs up is not written in Go) but hey someone has written a nodejs module wrapper for Hugo so one can pretend Hugo is written in Nodejs…ha ha and besides DRY and I already use node for doing things like uglifying, minifying and concatenating plus deployment.

So maybe between what @liwenyip has done and what I’ll do with Thumbsup Hugo has a nice solution for small or large galleries (with lightbox) that are added with a simple shortcode.

---

<div class="post-metadata">

**Author:** ![liwenyip](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/liwenyip/32/3546_2.png) [@liwenyip](https://discourse.gohugo.io/u/liwenyip)\
**Post date:** [March 31, 2017, 7:10pm UTC](https://discourse.gohugo.io/t/image-gallery/594/13 "2017-03-31T19:10:23Z")

</div>

Thanks @dkebler.

Let me know when thumbsup is able to export a data model, and I’l look at making heg able to generate a gallery from a data file.

---

<div class="post-metadata">

**Author:** ![liwenyip](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/liwenyip/32/3546_2.png) [@liwenyip](https://discourse.gohugo.io/u/liwenyip)\
**Post date:** [April 1, 2017, 9:55pm UTC](https://discourse.gohugo.io/t/image-gallery/594/14 "2017-04-01T21:55:35Z")

</div>

I’ve just added the ability to generate a gallery from a directory of images.

See:

> **[Hugo Easy Gallery](https://www.liwen.id.au/heg/#gallery-usage)**
>
> Automagical PhotoSwipe image gallery with a one-line shortcode

[https://github.com/liwenyip/hugo-easy-gallery/commit/5c7171497ceca912cc9d61d7340f9b9cdf213f67](https://github.com/liwenyip/hugo-easy-gallery/commit/5c7171497ceca912cc9d61d7340f9b9cdf213f67)

---

<div class="post-metadata">

**Author:** ![dkebler](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/dkebler/32/7285_2.png) [@dkebler](https://discourse.gohugo.io/u/dkebler)\
**Post date:** [April 6, 2017, 5:54am UTC](https://discourse.gohugo.io/t/image-gallery/594/15 "2017-04-06T05:54:33Z")

</div>

@liwenyip The directory gallery addition is nice.

I’ll end up doing flexbox version of the shortcode and css as my theme is 100% flexbox.

Actually mostly what thumbsup was doing was processing the images with [http://www.graphicsmagick.org/](http://www.graphicsmagick.org/) into smaller images and thumbs. So one could still use it do to that and use your code to take it from there. He dumps the separates the images into /large /thumbs

The one thing that graphicsmagick and a data model would do would allow one to grab captions from the image itself instead of using the filename which I was using to order the images in gallery.

Anyway…thanks for the great example on using the filesystem functions. The hugo template functions can do an amazing amount of stuff now.

---

<div class="post-metadata">

**Author:** ![liwenyip](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/liwenyip/32/3546_2.png) [@liwenyip](https://discourse.gohugo.io/u/liwenyip)\
**Post date:** [April 6, 2017, 9:52pm UTC](https://discourse.gohugo.io/t/image-gallery/594/16 "2017-04-06T21:52:57Z")

</div>

There’s a proposal for Hugo to have image processing capabilities built in:

[https://github.com/spf13/hugo/issues/3158](https://github.com/spf13/hugo/issues/3158)

In the meantime, how hard would it be for Hugo to read EXIF data from images using [https://github.com/rwcarlsen/goexif](https://github.com/rwcarlsen/goexif)? Is it worth raising an issue to request this as a new feature?

---

<div class="post-metadata">

**Author:** ![Akronym\_Rising](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/akronym_rising/32/3769_2.png) [@Akronym\_Rising](https://discourse.gohugo.io/u/Akronym_Rising)\
**Post date:** [August 1, 2017, 9:24pm UTC](https://discourse.gohugo.io/t/image-gallery/594/17 "2017-08-01T21:24:52Z")

</div>

I hacked together a script to process multiple images for use in Hugo Easy Gallery.

It creates reasonably sized images, creates matching -thumb images, sets read file permissions, attempts to wipe clean the OSX ‘quarentine’ bit, adds an ‘index.html’ file to the gallery directoryblock index views, and finally calls Hugo to create a new [gallery.md](http://gallery.md) file.

> **[ronliskey/hugo\_scripts](https://github.com/ronliskey/hugo_scripts)**
>
> hugo\_scripts - Various scripts for working with Hugo Static Site Generator