Displaying Exif Tags using Hugo

config.toml

[imaging.exif]
    includeFields = ".*"

shortcode.html

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

<p>
    <a href="{{$originalImage.RelPermalink}}">
        <img src="{{$originalImage.RelPermalink}}" alt="{{ .Get "alt" }}"/>
    </a>
    {{ if (and $originalImage.Exif (ne $noExif "true")) }}
        <div class="exifTags">
            Taken

            {{ with $originalImage.Exif }}
                {{ if and .Tags.GPSLatitude .Tags.GPSLongitude }}
                    {{ $latSign := 1 }}
                    {{ if eq .Tags.LatRef "S" }}
                        {{ $latSign = -1 }}
                    {{ end }}
                    {{ $lonSign := 1 }}
                    {{ if eq .Tags.LonRef "W" }}
                        {{ $lonSign = -1 }}
                    {{ end }}
                    {{ $lat := mul $latSign (add (index .Tags.GPSLatitude 0) (add (div (index .Tags.GPSLatitude 1) 60) (div (index .Tags.GPSLatitude 2) 3600))) }}
                    {{ $lon := mul $lonSign (add (index .Tags.GPSLongitude 0) (add (div (index .Tags.GPSLongitude 1) 60) (div (index .Tags.GPSLongitude 2) 3600))) }}
                    <div class="exifElement">
                        <a href="http://www.openstreetmap.org/?mlat={{ $lat }}&mlon={{ $lon }}&zoom=16&layers=M">
                            <i class="fa fa-map-marked"></i>
                            here
                        </a>
                    </div>
                {{ end }}

                {{ if .Tags.Make }}
                    with a(n)
                    <div class="exifElement">	
                        <i class="fa fa-tag"></i>
                        {{ .Tags.Make }}
                    </div>
                {{ end }}

                {{ if .Tags.Model }}
                    <div class="exifElement">
                        <i class="fa fa-camera"></i>
                        {{ .Tags.Model }}
                    </div>
                {{ end }}

                {{ if .Tags.FocalLength }}
                    using a focal length of
                    <div class="exifElement">
                        <i class="fa fa-expand-alt"></i>
                        {{ .Tags.FocalLength }} mm
                    </div>
                {{ end }}

                {{ if (or .Tags.ExposureTime .Tags.FNumber .Tags.ISOSpeedRatings) }}
                at
                {{ end }}

                {{ if .Tags.ExposureTime }}
                    <div class="exifElement">
                        <i class="fa fa-clock"></i>
                        {{ .Tags.ExposureTime }}
                    </div>
                {{ end }}

                {{ if .Tags.FNumber }}
                    <div class="exifElement">
                        <i class="fa fa-bullseye"></i>
                        f/{{ .Tags.FNumber }}
                    </div>
                {{ end }}

                {{ if .Tags.ISOSpeedRatings }}
                    <div class="exifElement">
                        ISO{{ .Tags.ISOSpeedRatings }}
                    </div>
                {{ end }}

            {{ end }}
        </div>
    {{ end }}
</p>

style.scss

.exifTags {
  font-size: 80%;
  font-style: italic;
  width: 100%;

  color: $lightcolor;
  @media (prefers-color-scheme: dark) {
    color: $lightcolor_dark;
  }
}

.exifTags:hover {
  color: $textcolor;
  @media (prefers-color-scheme: dark) {
    color: $textcolor_dark;
  }
}

.exifElement {
  margin-left: 4px;
  margin-right: 4px;
  display:inline-block;
}

usage.md

{{< shortcodeName src="image.jpg" alt="" >}}