GetMatch from assets dir

With the following structure:


I’m trying to get a list of product titles and images in layouts/products/list.html.

{{range .Pages}}
{{$logo := (resources.Get (printf "images/%s.png" .BaseFileName))}}
<img src="{{$logo.RelPermalink}}" alt="{{.Title}}" width="{{$logo.Width}}" height="{{$logo.Height}}

This works fine. But there are instances where I will also be using jpg images so I do not want to hardcode png into my code. I’ve tried using the .GetMatch function, but can’t get it to work. Not sure where to place the wildcard *.

{{range .Pages}}
{{$logo := (resources.GetMatch (printf "images/%s" .BaseFileName))}}
<img src="{{$logo.RelPermalink}}" alt="{{.Title}}" width="{{$logo.Width}}" height="{{$logo.Height}}

I get the following error message: "executing "products/list.html" at <resources>: can't evaluate field GetMatch in type interface {}"

Have you tried it like this?


Yes. I get the same error message as I posted above.

On second thought, I’m not sure if .GetMatch function is supported on items under the assets folder (someone correct me if I’m wrong).

In the meantime, try using a front matter param for the image format per page, whether it be jpg or png:

imgFormat: png

Then when making your logo:

{{$logo := (resources.Get (printf "images/%s.%s" .BaseFileName .Params.imgFormat))}}

No you only have .Get which takes the path relative to assets.

GetMatch and Match for assets are in the pipeline though I think.

I see.

Any suggestions on how to handle image format other than including a front matter param as per @zwbetz suggestion?

I have over 1000 markdown files and images so I was thinking there might be a better way. The reason I’m using the assets/images folder is because an image is going to be used in multiple sections, and I need to do image processing.

This is related to a question I asked a few days ago about where should an img be placed that will be used in multiple sections.

Well, the best way to benefit from image processing without assets is to create a Page Bundle to store all your images.

You can name it uploads and store it as content/uploads/ By setting the FM parameter headless to true, you make sure hugo will not publish this Upload page, but its resources: yes.

Once you’ve moved all your images to this upload directory, they become Page Resources subject to .Match, .GetMatch, etc…

Now, whenever you need to grab an image:

{{ $uploads := (.Site.GetPage "/uploads").Resources }}
{{ $img := $uploads.GetMatch "whatever.*" }}

Page Resource methods are now available to your images including Resize and the like.

Let me know if this makes sense to you.


Thanks @regis

I assumed (wrongly) that this would be possible to do through the assets folder.