💯 HugoのCore Web Vitals対策で画像の縦横サイズが自動で入るようにした
この記事は最終更新日から1年以上経過しています。
ちょっと前にCore Web Vitalsが話題になっていたので自分のサイトを調べてみたら、CLS(Cumulative Layout Shift)が低かったので対応しておきました。
調べてみたらHugoでは .Page.Resources
でページ内のリソースが参照できるようになっているみたいで、面倒な事をしなくても画像サイズが指定できるようになっているようです。便利ですね。
というわけで Markdown Render Hooks
の render-image.html
の記述をこんな感じにしておきました。
コピーしました
{{ $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}
{{ if $image }}
<figure>
<span>
<img src="{{ .Destination | safeURL }}" alt="{{ .PlainText }}" {{ with .PlainText }} title="{{ . }}" {{ end }}
decoding="async" width="{{ $image.Width }}" height="{{ $image.Height }}" />
</span>
{{ with .PlainText }}<figcaption>{{ . }}</figcaption>{{ end }}
</figure>
{{ else }}
<figure>
<span>
<img src="{{ .Destination | safeURL }}" alt="{{ .PlainText }}" {{ with .PlainText }} title="{{ . }}" {{ end }}
decoding="async" />
</span>
{{ with .PlainText }}<figcaption>{{ . }}</figcaption>{{ end }}
</figure>
{{ end }}
Comment
comments powered by Disqus