Pyon's Diary

舊 平成參拾年戊戌如月廿捌日 (金・晴)

記事と同じ場所に畫像を設置 (Hugo 0.32)

久振りにHugoのドキュメントに目を通してゐたらHugo (0.32)から記事と同じ場所に畫像を於けるやうに成つてゐた。

これは可成り便利。

畫面の大きさに合はせて畫像の大きさを變更

HugoのImage Processing機能を使用する。

畫面サイズと畫像サイズの關係は以下のやうにする。

畫面幅と畫像幅の關係
畫面幅畫像幅
512px以下384px
768px以下576px
1024px以下768px
1024px以上1024px

shortcode imgproc.html はこのやうな感じ。

{{ $image := .Page.Resources.GetMatch (printf "%s*" (.Get 0)) }}
{{/* Extra Large Image (1024x) */}}
{{ if gt $image.Width 1024 }}
{{ .Scratch.Set "xlarge" ($image.Resize "1024x") }}
{{ else }}
{{ .Scratch.Set "xlarge" ($image) }}
{{ end }}
{{ $xlarge := .Scratch.Get "xlarge" }}
{{/* Large Image (768x) */}}
{{ if gt $image.Width 768 }}
{{ .Scratch.Set "large" ($image.Resize "768x") }}
{{ else }}
{{ .Scratch.Set "large" ($image) }}
{{ end }}
{{ $large := .Scratch.Get "large" }}
{{/* Middle Image (576x) */}}
{{ if gt $image.Width 576 }}
{{ .Scratch.Set "middle" ($image.Resize "576x") }}
{{ else }}
{{ .Scratch.Set "middle" ($image) }}
{{ end }}
{{ $middle := .Scratch.Get "middle" }}
{{/* Small Image (384x) */}}
{{ if gt $image.Width 384 }}
{{ .Scratch.Set "small" ($image.Resize "384x") }}
{{ else }}
{{ .Scratch.Set "small" ($image) }}
{{ end }}
{{ $small := .Scratch.Get "small" }}
<figure>
  <img
  alt="{{ $image.Title }}"
  sizes="(max-width: 512px) 384px, (max-width: 768px) 586px, (max-width: 1024px) 768px, 1024px"
  src="{{ $small.RelPermalink }}?{{ now.Unix }}"
  srcset="{{ $small.RelPermalink }}?{{ now.Unix }} 384w, {{ $middle.RelPermalink }}?{{ now.Unix }} 586w, {{ $large.RelPermalink }}?{{ now.Unix }} 768w, {{ $xlarge.RelPermalink }}?{{ now.Unix }} 1024w"
  title="{{ $image.Title }}"
  >
  <figcaption>
    <small>
      {{ with .Inner }}
      {{ . }}
      {{ else }}
      {{ if $image.Title }}
      {{ $image.Title }}
      {{ else }}
      {{ $image.Name }}
      {{ end }}
      {{ end }}
    </small>
  </figcaption>
</figure>

前半部では愚直に以下の処理を行つてゐる。

  • 元畫像の横幅が1024pxより大きければ1024pxにリサイズして $xlargs に割當てる。
  • 元畫像の横幅が768pxより大きければ768pxにリサイズして $largs に割當てる。
  • 元畫像の横幅が576pxより大きければ576pxにリサイズして $middle に割當てる。
  • 元畫像の横幅が384pxより大きければ384pxにリサイズして $small に割當てる。

後半部では先づ sizes 屬性を設定してゐる。

  • 畫面サイズが512px以下なら384pxの畫像を使用する。
  • 畫面サイズが768px以下なら576pxの畫像を使用する。
  • 畫面サイズが1024px以下なら768pxの畫像を使用する。
  • 上記以外なら1024pxの畫像を使用する。

そして srcset 屬性を以下のやうに設定してゐる。

  • 畫像サイズが384pxなら $small を表示する。
  • 畫像サイズが576pxなら $middle を表示する。
  • 畫像サイズが768pxなら $large を表示する。
  • 畫像サイズが1024pxなら $xlargs を表示する。

これで畫面サイズに應じて事なる大きさの畫像を表示させる事が出來る。

參考ページ

晩御飯

  • スープカレー
comments powered by Disqus