Hugoで画像のサイズを自動設定する方法!

  Hugo   ,




こんにちは! コツコツとHugoをいじり続けているAki(@akisnote)です!

今回はHugoで画像のwidth、height属性を自動設定する方法です。

画像のサイズ指定は、サイトをAMP化する時に必須になってきますので、今後対応する時にきっと役に立つと信じてます! (自分で対応するならという話ですが……)

AMP対応を抜きにしても、サイズを指定しておくとレイアウトが崩れないというメリットはありますし、 設定の自動化が可能なら、手動での設定が面倒、画像を差し替えた時の修正が手間というデメリットも打ち消せます。

今回テストに使った画像は、以下のとおりです。ダミー画像なので全く意味はありませんが、ソースを覗いてみると属性がきちんと設定されているのがわかると思います。

今回実装した内容を見せるためのサンプル画像を出力しています。画像はダミーであり全く意味はありません。

なお、画像の格納場所は、staticフォルダの場合と、Markdownファイルと同じフォルダの2パターン載せています。

では、早速実装方法を見ていきましょう!

ショートコードを作る

画像を表示させるためにショートコードを作成します

ファイル名は任意で構いませんが、ここではlayout/shortcodes/img.htmlというファイルを作りました。

画像を置く場所によって記述が変わりますので、順番に見ていきましょう。

画像をstaticフォルダに置く場合

{{ $src := .Get "src" }}
{{ $config := imageConfig (printf "/static/%s" $src) }}
<img src="{{ .Site.BaseURL | absLangURL }}{{$src}}"
    width="{{$config.Width}}"
    height="{{$config.Height}}"
    alt="{{ .Get "alt" }}"
    title="{{ .Get "title" }}">

imageConfigを使って高さや幅を取得しています。

{{ .Site.BaseURL | absLangURL }}を使い絶対パスを指定していますが、これがないと相対パスで同一フォルダ内を見に行ってしまうので注意です。

(もっとスマートな書き方があるような気もしますが……)

Markdownファイルと同じフォルダに置く場合

{{ $src := .Get "src" }}
{{ $config := .Page.Resources.GetMatch (printf "%s" $src) }}
<img src="{{$src}}"
    width="{{$config.Width}}"
    height="{{$config.Height}}"
    alt="{{ .Get "alt" }}"
    title="{{ .Get "title" }}">

同じフォルダ内の画像を取得したいので、.Page.Resources.GetMatchを使っています。

Markdownファイルの記述

ショートコードができたら、Markdownファイルからショートコードを呼び出しましょう。 ショートコードを呼び出すためのMarkdownの書き方です。

{{/*< img src="test.png" alt="代替テキスト" title="タイトル" >*/}}

※コメントアウトしています。実際に使用するときはコメントを外す必要があります。

出力されたソース

以下は、同一フォルダに画像を置いた場合です。 staticフォルダの場合はhttp://example.com/test.pngのようになります。

<img src="test.png"
    width="600"
    height="400"
    alt="代替テキスト"
    title="タイトル">

高さと幅が自動で設定されました!

(おまけ)別の記述方法

src=という書き方ではなく、以下のように省略して書いてもいいです。

{{/*< img "img" "alt" "title" >*/}}

画像をstaticフォルダに置く場合

{{ $src := .Get 0 }}
{{ $config := imageConfig (printf "/static/%s" $src) }}
<img src="{{ .Site.BaseURL | absLangURL }}{{$src}}"
    width="{{$config.Width}}"
    height="{{$config.Height}}"
    alt="{{ .Get 1 }}"
    title="{{ .Get 2 }}">

Markdownファイルと同じフォルダに置く場合

{{ $src := .Get 0 }}
{{ $config := .Page.Resources.GetMatch (printf "%s" $src) }}
<img src="{{$src}}"
    width="{{$config.Width}}"
    height="{{$config.Height}}"
    alt="{{ .Get 1 }}"
    title="{{ .Get 2 }}">

あとがき

かなり試行錯誤しましたが、なんとか動いてよかったです。

画像のサイズを一つずつ確認して、手動で設定するなんて大変ですからね。ショートコードを使うだけなら手間もかからないので、今後はこの方法でやっていこうと思います。

あとは、過去の記事を全て修正するだけ……。うーん、別にしなくてもいいかな……。うーん……。

参考にさせていただいたサイト様