HugoでExif情報を表示する

HugoでExif情報を表示する方法、書いておこうと思います。

いよいよ新年度になりましたね。
今年も僕はまた揉まれてます。

先日の記事で、Exif情報をしれっと出力しました。
あれ、めちゃくちゃ便利だったので、やっぱり記事化して書いておこうと思います。

いきなりですが、shortcodeはこんな感じになっています。

{{ $src := .Get "src" }}
{{ $original := .Page.Resources.GetMatch $src }}
{{ if $original }}
    {{ $resized := $original.Resize "800x q90" }}
    <a href="{{ $original.RelPermalink }}" target="_blank">
        <img src="{{ $resized.RelPermalink }}" alt="{{ .Get "alt" }}">
    </a>
    {{ with $original.Exif }}
        <details>
        <summary>
            {{ with .Tags.Model }}Model: {{ . }}{{ end }}
        </summary>
        <ul>
            {{ with .Tags.Model }}<li>Model: {{ . }}</li>{{ end }}
            {{ with .Tags.Software }}<li>Software: {{ . }}</li>{{ end }}
            {{ with .Tags.ApertureValue }}<li>Aperture: {{ lang.NumFmt 2 . }}</li>{{ end }}
            {{ with .Tags.BrightnessValue }}<li>Brightness: {{ lang.NumFmt 2 . }}</li>{{ end }}
            {{ with .Tags.ExposureTime }}<li>Exposure Time: {{ . }}</li>{{ end }}
            {{ with .Tags.FNumber }}<li>F Number: {{ . }}</li>{{ end }}
            {{ with .Tags.DigitalZoomRatio }}<li>Digital Zoom Ratio: {{ . }}</li>{{ end }}
            {{ with .Tags.FocalLength }}<li>Focal Length: {{ . }}</li>{{ end }}
            {{ with .Tags.FocalLengthIn35mmFilm }}<li>Focal Length (in 35mm Film): {{ . }}</li>{{ end }}
            {{ with .Tags.ISOSpeedRatings }}<li>ISO Speed Ratings: {{ . }}</li>{{ end }}
            {{ with .Tags.LensModel }}<li>Lens Model: {{ . }}</li>{{ end }}
        </ul>
        </details>
    {{ end }}
{{ end }}

これを、layouts/shortcodes/resourceimg.htmlといった形で配置して、記事中で
{{<resourceimg src="images/xxxxxx.jpg" alt="xxxxxx" >}}と記載すると、Exif情報と共に画像が出力されます。
withで囲んでいるので、無いTagはスキップされる仕組み¹になってます。

使えるTagを選ぶのは少し悩んだのですが、僕は面倒くさかったので、一旦下記のようなshortcodeを作って全部出力させ、良い感じのモノのみピックアップしました。

{{ $src := .Get "src" }}
{{ $img := .Page.Resources.GetMatch $src }}
{{ with $img.Exif }}
{{ range $k, $v := .Tags }}
TAG: {{ $k }}: {{ $v }}
{{ end }}
{{ end }}

また、この形で画像を出力する場合は、普通にxxxxx.mdをcontent/postに入れる方法では駄目で、ディレクトリを使う構成にしないといけません。
ディレクトリを作って、その下にindex.mdファイルやその他使用するファイルを置くという構成です。
こんな感じですね。

content/post/
 +01_xxx.md
 +02_xxx.md
 +03_xxx/
   +index.md
   +images/
     +01.jpg
     +02.jpg

今結構ファイル散らばってるので、最初からこれ知ってたら良かったなと思ってます。