Exif Tags

I always like to see the technical details of a photo via the Exif tags and Hugo supports this out of the box via custom made shortcodes. I tried first following this post but was unable to get it working at all. In all my troubleshooting I suspect that it was unable to find the image and hence threw an error when trying to extract the Exif tags, that may be completely wrong, Hugo error messages are often not helpful.

Next stop was here and this worked first time but I modified it to use <figure> and <figcaption> tags and to use the alt tag as a caption above the Exif information. I also removed the location tags, most of the font-awesome icons, except for the camera, and the individual <div> around every tag. I added a calendar icon and the date and time when the photo was taken. The end result was the following file called img.html located in <site>/layouts/shortcodes. I suspect that many of the if statements below are overkill but haven't tried removing them.

{{- $imageName := .Get "src" -}}
{{- $originalImage := (.Page.Resources.ByType "image").GetMatch (printf "**%s**"
 (.Get "src")) -}}
{{- $noExif := .Get "noExif" -}}

<figure>
    <a href="{{$originalImage.RelPermalink}}">
        <img src="{{$originalImage.RelPermalink}}" alt="{{ .Get "alt" }}"/>
    </a>
    <figcaption>
    {{ with .Get "alt" }}{{ . }}<br/>{{ end }}
    {{ if (and $originalImage.Exif (ne $noExif "true")) }}
        <div class="exifTags">
            {{ with $originalImage.Exif }}
            {{ with .Date }} <i class="far fa-calendar"></i> {{ .Format "Mon
, 02 Jan 2006, 15:04" }}{{ end}}
                {{ if .Tags.Model }}
                        <i class="fas fa-camera"></i>
                        {{ .Tags.Model }},
                {{ end }}
                {{ if .Tags.FocalLength }}
                   focal length 
                        {{ .Tags.FocalLength }} mm,
                {{ end }}
                {{ if (or .Tags.ExposureTime .Tags.FNumber .Tags.ISOSpeedRatings
) }}
                  exposure
                {{ end }}
                {{ if .Tags.ExposureTime }}
                        {{ .Tags.ExposureTime }} seconds
                {{ end }}
                {{ if .Tags.FNumber }}
                       at f/{{ .Tags.FNumber }}, 
                {{ end }}
                {{ if .Tags.ISOSpeedRatings }}
                        ISO{{ .Tags.ISOSpeedRatings }}
                {{ end }}
            {{ end }}
        </div>
    {{ end }}
  </figcaption>
</figure>

Usage is as simple as adding a line to the markdown file as follows. It doesn't matter whether src or alt comes first. In this example, the image is in the same directory as index.md.

 {{</* img src="20190601-083043.jpg" alt="Sarnen reservoir in the morning" */>}}

Which produces this:

{{< img src="20190601-083043.jpg" alt="Sarnen reservoir in the morning" >}}

Prevent Hugo interpreting a shortcode you want to display as text

Additional learning while writing this post is that Hugo will interpret {{</* code */>}} even if inside a markdown code block. To display it simply as text requires the following {{</*/* code */*/>}} in the markdown file.