hugo page resourceを使って,relative pathで画像を指定する

hugo 3.2.0でpage resourceという機能が追加されて,相対パスで画像を指定できるようになりました.

どういうことかというと,以前まで画像を参照したい時, /static/に置いて絶対パスで指定する必要がありました.

/content/post/hoge.md
/static/images/hoge-image.png ←に画像を置く

/content/post/hoge.md

---
title: hoge
date: XXXX
---
![image](/static/images/hoge-image.png) ←絶対パスで指定

で,hugo 3.2.0ではshortcodeをいい感じに書くすることで,相対パスでの指定ができるように成りました.

/content/post/hoge.md
/content/post/hoge-image.png ←に画像を置く
/layouts/shortcodes/img.html ←ここにhugo templateのコードを置く

/content/post/hoge.md

---
title: hoge
date: XXXX
---
{{< img src="hoge-image.png" />}}

shortcode

このとき,shortcodeとよばれるhugoの機能を利用しています. {{< img src="hoge-image.png" />}} は, layouts/shortcodes/img.htmlを参照しています. img.htmlの実態はhugo templateで書きます.

例えば,私はhugoドキュメントのコードを参考にしたこんなものを使っています.
(あとでもう少し綺麗にする予定)

https://gohugo.io/content-management/image-processing/

{{ $original := .Page.Resources.GetMatch (.Get "src") }}
{{ $mode := default "Resize" (.Get "mode")}}
{{ $size := default "512x" (.Get "size")}}
{{ $title := default $original.Name (.Get "title") }}

{{ if eq $mode "Fit"}}
{{    .Scratch.Set "image" ($original.Fit $size) }}
{{ else if eq $mode "Resize"}}
{{    .Scratch.Set "image" ($original.Resize $size) }}
{{ else if eq $mode "Fill"}}
{{    .Scratch.Set "image" ($original.Fill $size) }}
{{ else }}
{{    errorf "Invalid image processing mode: Must be one of Fit, Fill or Resize."}}
{{ end }}
{{ $image := .Scratch.Get "image" }}
<figure style="width: {{ add $image.Width 3 }}px; padding: 3px; background-color: #cccc">
  <img data-original="{{ $original.RelPermalink }}" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}"
       height="{{ $image.Height }}">
  <figcaption>
    <small>
      {{ with .Inner }}
      {{ . }}
      {{ else }}
      {{ $title }}
      {{ end }}
    </small>
  </figcaption>
</figure>

このあたりでいい感じに画像のpage resourceを解決して

{{ $original := .Page.Resources.GetMatch (.Get "src") }}

このあたりでいい感じに画像のサイズを変形してます.

{{ if eq $mode "Fit"}}
{{    .Scratch.Set "image" ($original.Fit $size) }}
{{ else if eq $mode "Resize"}}
{{    .Scratch.Set "image" ($original.Resize $size) }}
{{ else if eq $mode "Fill"}}
{{    .Scratch.Set "image" ($original.Fill $size) }}
{{ else }}
{{    errorf "Invalid image processing mode: Must be one of Fit, Fill or Resize."}}
{{ end }}

resizeしたものじゃなくてoriginalをあとで参照したいときに,javascript側で呼び出せるように, data-originalにoriginalの画像のurlをはっつけるようにしてます.

<img data-original="{{ $original.RelPermalink }}" src="{{ $image.RelPermalink }}" ~~~~~

そうすると↓こんなかんじにできます.
(popupするのはjsの方なので static/jsとか themeあたりを弄った)

{{< img src="hoge.png" title="test image" />}}
test image

べんり!

おすすめドキュメント

Share Comments
comments powered by Disqus