Referencing a page resource from front matter

support
1

hi, i’m trying to make a page that displays “cards” in a grid of my projects, along with an image on the card. for this i was thinking i would setup my content folder to look something like this, with the project folder containing each project, the index.md for it, and the images, like this.
image

i want to put the card image and the alt text for it in the front matter like this.

content/project/avatar-editor/index.md
---
title: "avatar editor"
summary: "simple and easy to integrate avatar editor"
card_image: ""
card_image_alt: ""
---

i’ve tried just putting avatar.jpeg in it but it doesn’t seem to work. how can i reference the avatar.jpeg file in the card_image parameter? is there a better way to do this?

2

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

1 Like
3

thanks, i made my repo public.

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
5

this works perfectly, thanks for the help!! being able to use this to convert to webp seems really useful too.

1 Like
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.