Accessing images as resources


I’m trying to insert an image as a resource to allow the built-in image processing that Hugo enables, but I keep getting a result. What am I doing wrong?

I have the identical structure to the documentation, i.e.:

└── images/
    └── sunset.jpg    <-- global resource

But when I try and do anything with that image, it gives an error (or <nil> if trying to print it).


{{ $image := resources.GetMatch "sunset.jpg" }}
{{ printf "%#v" $image }}

Will output <nil>. And anything else I try (for example {{ printf "%#v" $image.RelPermalink }} just causes an error.

What am I missing here?

{{ $image := resources.GetMatch "images/sunset.jpg" }}
1 Like

I tried that, and it says:

execute of template failed at <.image>: can’t evaluate field image in type resource.Resource

My follow-up question to this is “How do I access the path of the image via a parameter from a file”? It’s for a carousel on the homepage, with each item of the carousel defined in it’s own yaml file. For example:

# item1.yaml
title: "Item 1"
description: "This is item 1"
use_image: "images/carousel/item1.jpg"
alt: "Image of item 1"
weight: 1

and in the partial I would like something like:

{{ range sort .Site.Data.carousel "weight" }}
{{ $image := .Page.Resources.GetMatch .use_image}}
<picture class="img-responsive">
<source srcset="{{ $image }}" width="{{ $image.Width }}" height="{{ $image.Height }}" type="image/webp">
<img src="{{ .image }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ if .alt }}{{ .alt }}{{ end }}">
{{ end }}

Is this in the assets directory (e.g., assets/images/carousel/item1.jpg)?

Yes, I have tried it there, but with no luck :confounded:

Take this for a spin.

git clone --single-branch -b hugo-forum-topic-46077 hugo-forum-topic-46077
cd hugo-forum-topic-46077
hugo server
1 Like

That is working perfectly! I will see what I can do to apply it to my case…

1 Like

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