GetMatch from assets dir

support
1

With the following structure:

assets
  images
    apple,png
    microsoft.png
content
   products
     _index.md
     apple.md
     microsoft.md

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

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

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}}
{{.Title}}
{{$logo := (resources.GetMatch (printf "images/%s" .BaseFileName))}}
<img src="{{$logo.RelPermalink}}" alt="{{.Title}}" width="{{$logo.Width}}" height="{{$logo.Height}}
{{end}}

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

2

Have you tried it like this?

"images/%s*"
3

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

4

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))}}
5

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

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

6

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.

7

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/index.md. 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.

5 Likes
8

Thanks @regis

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