Hugo Photoswipe Gallery Script helper - datenwalze.de

, categorized under: infra

I found a nice little Blog Post about how to integrate a Photoswipe Gallery into Hugo. But something was missing…

Problem is that you manually have to put a lot of meta stuff into your Markdown Pages. So I made a small quick’n’dirty Bash script that does those things.

I’m running this under OS X & ITerm2, but Linux should be fine, too.

Dependencies

Installation

First of all, follow the steps in the Blog Post above, if you haven’t done that yet.

Now, put this Script into your Hugo’s Project root.

Edit the header of that script:

#!/bin/bash
# Bjoern Pohl, License: CC0

###setup

#Imagesize. Currently only Landscape
imagesize="1280x960"

#Thumbnail size. 100x100 is good.
thumbnailsize="100x100"

#incoming pictures folder relative to script location's folder.
inc_folder="incoming_pictures"

###end of setup

Add an “incoming_pictures” Folder to the root of your Hugo Git Project ( you’re using Git, aren’t you)? where you simply throw Pictures you want to use for your Blog Post. Mine is called “incoming_pictures”. Place a .gitkeep inside, add that folder to .gitignore and throw a git add -f <folder>/.gitkeep to put that folder under Version control while ommiting all those pictures coming in.

Why that?

The Script will pick those pictures up from there and will put it under ./static/img/<galleryname> and ./static/img/thumbnails/<galleryname>.

Run it

So,

  1. Put some Images into you incoming folder ( Script currently just looks for .jpg/.JPG/)
  2. Run the Script: ./to_gallery. No Options required
  3. it will ask you for a Gallery Name
  4. it will ask you for Captions for each Image. If imgcat is installed, it will show a small thumbnail.
  5. finally, it will output all that meta stuff you need to show the Galley in your Hugo Post.

In Action

Perhaps it is possible to mix that with Hugo’s Archetypes, haven’t figured that out…

Does it work? Yes:


Have fun!