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.
1 Like
Agree. But in the meantime you could pick up a tip here:
2 Likes
I have written an article on how I implemented PhotoSwipe with some shortcodes. http://www.thehome.dk/article/photoswipe-gallery-hugo/
3 Likes
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)
2 Likes
Nice, I have updated the article.
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!
3 Likes
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.
1 Like
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! 
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.
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.
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/
3 Likes
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.
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.
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
2 Likes
@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.
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?
2 Likes
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.