hugoで画像サイズ変更
主にhugoでの編集はvscodeで行っていますがその場合の、画像サイズ変更のあれこれです。
1 htmlタグの書き方でやる
基本としてhtmlの書き方としては
<img src="image.jpg" width="50%">
↑ができます。これで元画像に対して横幅が半分の画像になります。アスペクト比は保持されます。
マークダウンでもこのタグは大体の場合使えまして、hugoではもちろん大丈夫なのでこれでも使えます。
<img src="image.jpg" width="100px">
↑のようにすれば割合ではなく具体的なピクセル単位でのサイズ指定ができます。
htmlタグの方法は確実にできる方法ですが書き方は割と面倒。
2 hugoのショートコードを使う
参考↓
画像したい（/layouts/shortcodes/figure.html）
hugo には Shortcodesという特定の要素を埋め込むテンプレート的なのがありまして、画像用のショートコードを使うというやり方。
書き方はこんな感じ↓
{{< figure src=“image.jpg” alt=“alt text” width=“300” >}}
面倒具合はhtmlタグとあまり変わらないがより詳細に画像を設定したいならこっちのほうが楽。 例えば画像にリンクを貼りたい、とかキャプションも付け足したいとかならいい。まあでもサイズ変更するだけならあまり楽じゃない。
3 Markdown attributes を使う
参考↓
マークダウンを使いながら最低限のhtmlタグを付加したい、みたいな需要に答える仕組みです。{}で囲んだ部分がhtmlタグとして認識されます。
使うには設定のhugo.tomlにこれを付け足します。yamlのときはそれように変えてください。
[markup]
[markup.goldmark]
[markup.goldmark.parser]
wrapStandAloneImageWithinParagraph = false
[markup.goldmark.parser.attribute]
block = true
title = true
画像に使うにはこんな感じ↓
{width="300" }
vscodeで画像をドラッグ＆ドロップすると
になるので{}でサイズを追加するだけなので一番楽でおすすめです。
改行してタグの中身を書くのが注意かと。
また使用しているテーマによっては画像のレンダリングを独自に作っている場合があり、これをやっても適用されないことがあります。そのため設定を変更してもこれが反映されないならテーマをまずは疑いましょう。
一応、サイトテーマで無効化されている場合の対処方法
GitHub - chipzoller/hugo-clarity: A theme for Hugo based on VMware Clarityというテーマでの方法であり他のテーマでもできる保証はまったくありませんが。
layouts/_default/_markup/render-image.htmlをつくります。
内容は以下の通り。コピペしてください。hugo.tomlは上の通りの設定です。
{{- $u := urls.Parse .Destination -}}
{{- $src := $u.String -}}
{{- if not $u.IsAbs -}}
{{- $path := strings.TrimPrefix "./" $u.Path }}
{{- with or (.Page.Resources.GetMatch $path) (resources.Get $path) -}}
{{- $src = .RelPermalink -}}
{{- end -}}
{{- end -}}
<img src="{{ $src | safeURL }}"
alt="{{ .Text }}"
{{ with .Title }} title="{{ . }}"{{ end }}
{{- with .Attributes -}}
{{- range $k, $v := . -}}
{{- printf " %s=%q" $k $v | safeHTMLAttr -}}
{{- end -}}
{{- end -}}
>
結論
ということで3の Markdown attributesが一番楽でいいかなという印象です。ただ1のhtmlタグの書き方のほうがより一般的なのでhugoから他のものに移行したりするときはそのままできて便利そう。
