I created my personal website using Hugo, so all source documents are created as Markdown files. I wanted to have photo albums on the site as well, using the PhotoSwipe viewer. I also wanted to easily set photo descriptions, quickly update albums when photos change, and have responsive image sizes and thumbnails automatically generated. HugoPhotoSwipe makes all this easily possible.
See my blog post here for more about my motivations for making this tool.
Hugo generally works with Markdown files. So, this program creates a markdown
file for Hugo to work with based on Hugo shortcodes. These shortcode are
then used to create the HTML code that PhotoSwipe needs. See the
directory for the shortcodes.
HugoPhotoSwipe is available on PyPI, you can install it easily with pip:
pip install hugophotoswipe
After installation, you should be left with a
This is a brief overview. See the Wiki for a full description.
Create a new directory for HugoPhotoSwipe and switch to it. For instance:
mkdir hugophotos cd hugophotos
Next, initialize a HugoPhotoSwipe configuration with:
This creates a new HugoPhotoSwipe configuration file, called
hugophotoswipe.yml. This is a YAML file. In this configuration file, you need
to set at least the
output_dir variables. These are
respectively the directory where the markdown needs to be placed and the
directory where the processed photos need to be placed. You may also want to
url_prefix variable, which is added before the path to the photo
Create a new album using:
HugoPhotoSwipe will ask you for the name of the new album, and create a
directory with that name for you. Try to keep the names short, they are not
the final title of the album. Spaces in the name are automatically replaced
with underscores. In the new directory you will find an
album.yml file and
At this point, you should place some photos in the
photos directory and
set the title field of the album in the
album.yml file. You can also set
the album date, the copyright line, and the filename of the coverimage.
Key/Value pairs you place under the
properties line will be placed in the
preamble of the markdown file, so you can use them in Hugo layouts. For
instance, you may want to add a country field, camera details, etc.
In the main directory (where the
hugophotoswipe.yml file is), you can now
To create the markdown file, the resized photos, and will update the
album.yml file. HugoPhotoSwipe creates large and small photo sizes, as
well as thumbnails using SmartCrop.py.
If you now open the
album.yml file, you'll notice that the fields for the
photos and the hashes have been extended. Under
photos: all the photos in
the directory will be listed, with for each photo a
caption field. The last three fields can be edited by you.
Doing this can be useful for SEO of your photos, but is not required. The
hashes field in the
album.yml file is used to detect changes in the
photos, and don't need to be edited by you.
Finally, if you want to regenerate all the markdown and resized photos, you can always use:
to clean everything. This will of course not touch the original photo files.
I've noticed that thumbnails are slightly nicer with SmartCrop.js than with SmartCrop.py. So, in the
file, you can set the option
True and the
smartcrop_js_path to the path of the smartcrop-cli.js utility. This ensures thumbnails
are created with SmartCrop.js.
HugoPhotoSwipe is free software, licensed under the GNU General Public License, version 3 or later (GPLv3). Copyright G.J.J. van den Burg, all rights reserved.