Skip to content

Instantly share code, notes, and snippets.

@dschanoeh
Last active August 12, 2020 14:37
Show Gist options
  • Save dschanoeh/4eaffa91ed446ebc30d336ad14787f83 to your computer and use it in GitHub Desktop.
Save dschanoeh/4eaffa91ed446ebc30d336ad14787f83 to your computer and use it in GitHub Desktop.
Displaying Exif Tags using Hugo
[imaging.exif]
includeFields = ".*"
{{- $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>
.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;
}

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment