Displaying Exif Tags with Hugo

This site is powered by Hugo and therefore statically generated. I post a lot of pictures and like to show the corresponding Exif tags. Up until a few weeks ago, I did this by embedding a JavaScript library that would parse the tags on the client and inject additional information into the DOM.

While that worked fine, it wasn’t the most elegant solution and I wanted to finally utilize Hugo’s capabilities. With version 0.58, it had gained support for Exif processing at build time. It requires the use of page resources and for each image that’s part of the page resources, an Exif object can be received and processed.

The following shows how I’m utilizing this information to generate the image captions on this blog. First of all, we need to enable support for all Exif fields (the defaults omit location for example):

Then, we can create a new shortcode that can be integrated into posts and will be replaced with the image itself and generated caption. The code assumes that the fontawesome webfont is already integrated. Of course, the icons can also be removed.

And finally, we now have exifTags and exifElement that we can style. Here’s an excerpt from my SCSS:

Now, we can add the shortcode to a post…

… and the result looks like this: