💯 HugoのCore Web Vitals対策で画像の縦横サイズが自動で入るようにした

2021-11-27 /Development #Hugo
この記事は最終更新日から1年以上経過しています。

ちょっと前にCore Web Vitalsが話題になっていたので自分のサイトを調べてみたら、CLS(Cumulative Layout Shift)が低かったので対応しておきました。

調べてみたらHugoでは .Page.Resources でページ内のリソースが参照できるようになっているみたいで、面倒な事をしなくても画像サイズが指定できるようになっているようです。便利ですね。

というわけで Markdown Render Hooksrender-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
Profile

石原 悠 / Yu Ishihara

デザインとプログラミングと編み物とヨーグルトが好きです。