How to image process, after getting images with .Resources.Match

[powerfulwebdesign]

Thanks in advance for help, I have been scratching my head with this for quite a few hours now.

I have images stored as page resources, and I am running the following:

{{ range $image := .Resources.Match "*" }}
<img src="{{$image.RelPermalink}}">
{{ end }}

Works fine, but when I try to process the images inside the range, I get an error “error calling Resize: this method is only available for image resources”

{{ range $image := .Resources.Match "*" }}
{{ $resize := $image.Resize "100x100"}}
<img src="{{$image.RelPermalink}}">
{{ end }}

I can’t work it out. The reason that I am trying to process from within the loop, is I am using a partial, to complete the processing.

e.g.

{{ $ctx := . }}
{{ range $image := .Resources.Match "*" }}
  {{ partial "....html" (dict "ctx" $ctx "image" $image) }}
{{ end }}

Does anyone know how to get this working?

[jmooring]

You’re matching all resources, not just images. Perhaps you have a non-image page resource somewhere, or an image type that cannot be processed (e.g., avif). You might try this instead:

https://gohugo.io/functions/resources/bytype/

https://gohugo.io/methods/page/resources/#bytype

[powerfulwebdesign]

Spot on @jmooring I used ByType to ensure there were no unsupported images getting in.

I also used
where (.Resources.Match "dir_name/*") "ResourceType" "Image"

so I could get the images from a particular DIR, and then ensure that only supported images were selected.

Thanks for your very quick help!