Hugo の Image Processing を使ってサムネイルを生成する

Hugo の Image Processing を使ってサムネイル画像の生成、記事への画像挿入をする。

前回の記事で baguetteBox.js を使うと書いたばかりだが、 Hugo の標準機能として画像のリサイズなどの画像処理機能を持っていてサムネイルの作成等もできるらしいので試してみる。

実装

ショートコードの作成

実装に関しては公式の Example や先人の記事を参考にさせてもらった。（記事のURLは参考リンクにまとめて記載）それらと似たような中身ではあるが一応貼っておくと、最終的なショートコードとしては以下。

{{- $src := .Get "src" -}}
{{- $alt := .Get "alt" -}}
{{- $size := .Get "size" -}}
{{- $caption := .Get "caption" -}}

{{ if or ( not $src ) ( not $alt )  }}
  {{ errorf "missing value of params 'src' or 'alt' : %s" .Position }}
{{ end }}

{{ $img := .Page.Resources.GetMatch $src }}
{{ $img_src := $img.RelPermalink }}

{{ $thumb := $img }}
{{ if $size }}
  {{ $thumb = $img.Fit $size }}
{{ end }}
{{ $thumb_src := $thumb.RelPermalink }}

<figure>
  <a href="{{ $img_src }}" target="_self" >
    <img src="{{ $thumb_src }}" alt="{{ $alt }}">
  </a>
  {{ if $caption }}
    <figcaption>
      {{ $caption }}
    </figcaption>
  {{ end }}
</figure>

その他

一通り動くのを確認してコミットしようとした段階で気付いたが、 Image Processing で生成した画像は /resources/_gen/ 配下にファイルとして配置される様子。

❯ tree resources/
resources/
└── _gen
    ├── assets
    └── images
        └── posts
            └── 2022
                └── 11
                    └── 08
                        └── hugo-image-processing-for-thumbnail
                            └── image
                                └── image1_huddb85fd66c8681e58f877494e6396a92_92186_400x400_fit_q75_h2_box_2.webp

9 directories, 1 file

また、 Hugo ビルド時 public 配下に出力されるHTML等の生成物とは違い、 hugo server -D などで仮想サーバを立ち上げる際にも生成されていた。

今のブログ構成として Hugo プロジェクトのリポジトリと Hugo 生成物のリポジトリを分けており、 Hugo プロジェクトのリポジトリの方にはコミットする必要の無いモノなので .gitignore に追加した。

/.hugo_build.lock
/public/
/resources/_gen/

とはいえ、ローカルファイルとして生成されることは変わらないので気付いたらディレクトリ肥大化してそうな気がするのと、画像増えていった時大丈夫なんだろうか、というのは少し気になった。

が、仮に何か問題になるにしてもそれなりに先だろうということで、ここではそのうち考えようくらいに留めておく。

実行例

{{< image src="images/image1.webp" alt="動作確認画像" size="400x400" caption="市ヶ谷の橋から撮った写真" >}}

baguetteBox.js とどっち使うか

今後はこっちを使っていく予定。

baguetteBox.js を使う場合と比べて良いなと思ったポイントとしては以下辺り

外部のライブラリに依存しない Hugo の標準機能である点
- 使っているテーマに手を加えなくて良い
面倒で作らなくなりそうと思っていたサムネイル生成を手動でやらなくても良い点
ブラウザで画像を直接表示する際の挙動になるので、素直に操作できると感じた
- baguetteBox.js を使った場合の画像表示中の操作感に若干違和感があった
  - 元画像を表示している最中の操作（拡大縮小スクロール）が、 baguetteBox.js レイヤー裏の記事部分にも効く（ちらつく）
  - PCで見ている時、画像の表示サイズの上限がブラウザウィンドウの横幅もしくは縦幅になる

baguetteBox.js の方が格好良いは格好良いので若干勿体無い気もしたが、画像の表示はブラウザで画像単体表示した時の挙動に任せてしまってブラウザバックで記事に戻る、の方が個人的には見やすいかなと感じた。（ Qiita が似た感じなのでそれに慣れていたからかもしれない）

あとがき

この記事を含め Hugo の設定を弄った事それ自体を記事にしたりしているが、弄った結果それ以前の記事が意図した通りに表示されなくなる事もあるということを理解した。

具体的には、前回の記事内で baguetteBox.js 用のショートコードを作って記事内の実行例でもそのまま使っていたのだが、今後は {{< image 〜 >}}を使うということで、 baguetteBox.js 用のショートコードは削除して手を加えたテーマも戻したい。ただ当たり前の話ではあるが、それらを使っている記事も修正する必要があり特に実行例部分の修正が面倒になっている。（とりあえず GIF に置き換えようと思ってはいるが）

世の中の Hugo でブログしてる人の中には、Hugo のブログはそれとして持ちつつ、 Zenn 等の別媒体にブログ自体のメンテナンスに関する記事を書いたりしている人も居て、こういう事があるのを考えると「なるほどなぁ」と思ったりした。