I have been wanting to transition my photography site to Hugo as well but have not investigated how to utilize Hugo’s image processing capabilities. Yesterday I came across Wivik’s helpful shortcodes that display EXIF information and presents the photo with a frame and a caption. I’m experimenting with it now and might modify it and eventually migrate my photography content.

I ran into nil pointer evaluating resource.Resource.Resize error when running the shortcode and tried out the built-in figure shortcode with the same path to verify that it wasn’t an actual path issue. The answer lies in Hugo’s use of Page Bundles, essentially standalone directory per post which bundles the text and images in a single folder. Many thanks to Tim Walls’ post explicitly helping future sufferers of the same error and DuckDuckGo for indexing the page keywords well.

I still have to smooth out the edges for making the page bundle play nice with the short-code within ox-hugo. Kudos to Kaushal Modi for already supporting page bundles elegantly in ox-hugo. But for this post, I can “cheat” because I need to show the old style rendering anyway for a comparison. By inserting the image directly, ox-hugo will copy the image to the right location so Hugo can do image processing on that page bundle.

The “old” method is just the original image linked directly with no captions or EXIF metadata:

Howe Lake in Glacier National Park reflecting the yellow larch and pink alpine glow of sunset kissing the top of the snow-capped peaks on a perfectly still mirror surface

Note: I did wrap this in a proper img tag to support alt-text but the rendered effect is the same as just putting a raw file in.

And the “new” method which uses the shortcode to resize the image to save bandwidth (the original image can be viewed at full resolution by clicking it… I’m not thrilled with the compression quality but it’s decent) and also shows the EXIF metadata. I plan to do a bit more with the EXIF info but this is a great start thanks to the shortcode, the caption parameter I added (to provide descriptive alts for accessibility independent of the caption) and icons from the Remixicon project who provide high-quality FOSS icons.

Update: Shortcode appears to be working locally when testing with hugo server -D but failing on sourcehut ci/cd, I’ll investigate with fresh eyes tomorrow.

Howe Lake in Glacier National Park reflecting the yellow larch and pink alpine glow of sunset kissing the top of the snow-capped peaks on a perfectly still mirror surface
Howe Lake at Glacier National Park
ILCE-7M2 DT 70-200mm F4 SAM f 9 109mm 1/8 s ISO 100

Update 2: Kaushal happened to see my toot and quickly provided a work-around, I’ll sing his praises more preemptively so he can do troubleshooting for me without even asking :), more later.