Image gallery


#1

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.


#2

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


#3

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


#4

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)


#5

Nice, I have updated the article.


#6

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/
Code: 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!


#7

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:

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

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


#8

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! :slightly_smiling:


#9

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.


#10

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.


#11

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

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


#12

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 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.

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

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.


#13

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.


#14

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

See:

https://github.com/liwenyip/hugo-easy-gallery/commit/5c7171497ceca912cc9d61d7340f9b9cdf213f67


#15

@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/ 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.


#16

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

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? Is it worth raising an issue to request this as a new feature?


#17

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 file.