Referencing a page resource from front matter

support
4

I suggest you access the images as page resources. I find it easiest to use a consistent file name.

structure

content/
├── projects/
│   ├── avatar-editor/
│   │   ├── cover.png
│   │   └── index.md
│   └── script-assets/
│       ├── cover.png
│       └── index.md
└── _index.md

layouts/projects/card.html

{{ with .Resources.GetMatch "cover.*" }}
  {{ with .Resize "600x webp" }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

By using a page resource we can resize, encode to another format, etc.
https://gohugo.io/content-management/image-processing/

5 Likes