HUGOでの画像の扱い

Image Processing | Hugo

使い方

画像をグローバルで管理して使用する

• ロゴマークや各ページで共通して使用するアイコン画像など
• テーマ/assets ディレクトリ配下に、適当なディレクトリを作成して管理するのが便利

assets/
└── img/
    └── logo.png    <-- global resourcecopy

• 変数に画像パスを指定したうえで呼び出す

{{ $logo := resources.Get "img/common/logo.png" }}
<img src="{{ $logo.RelPermalink }}" width="{{ $logo.Width }}" height="{{ $logo.Height }}">copy

画像をページ単位で管理して使用する

• 画像ファイルを Markdown ファイルと同じディレクトリに置く (Page Bundle) - まくまくHugoノート
• Hugoでの記事ファイルの配置と画像管理 - Marbles Day

Hugo の画像レンダリング機能を使うメリット

画像の width や height を自動で取得してくれる

リサイズや切り抜きなどもできる

svg はレンダリングできない

• svg ファイルに width や height 属性などを指定するとエラーになる

{{ $logo := resources.Get "img/common/logo.svg" }}
<img src="{{ $logo.RelPermalink }}" width="{{ $logo.Width }}" height="{{ $logo.Height }}">copy

error calling Width: this method is only available for raster images. To determine if an image is SVG, you can do {{ if eq .MediaType.SubType "svg" }}{{ end }}copy

• Width メソッドは、ラスタライズされた画像にしか使えない的なエラー内容
• {{ if eq .MediaType.SubType "svg" }}{{ end }} の処理を加えることで何とかなる様子だが、詳細は未確認
• とりあえず手動でマークアップするのは問題ない

{{ $logo := resources.Get "img/common/logo.svg" }}
<img src="{{ $logo.RelPermalink }}" width="100" height="30">copy