Error: <.Resource.GetMatch>: can't evaluate field Resource in type goldmark.imageLinkContext`

support
1

Hi,
I am slowly building toward the perfect image rendering that does not use javascript nor LCP, using assets/, something I never considered, so that I can access the totality of my Images folder without worrying about removing what I don’t use, since hugo will only included stuff refered to by a (Rel/)Permalink.
So I took inspiration mainly from Responsive and optimized images with Hugo | BryceWray.com
Because my wishes are bit different from what is proposed I modified the code, which is challenging since I don’t understand it entirely… well I do but could not reproduce it from scratch.

Now I have execute of template failed: template: _default/_markup/render-image.html:2:21: executing "_default/_markup/render-image.html" at <.Resource.GetMatch>: can't evaluate field Resource in type goldmark.imageLinkContext, so I put the code below and you’ll most likely see what I try to do, and what went wrong.
Yes I did see a few posts seemingly mentioning that error, but either didn’t understand them or thought they didn’t fit my case.

Thanks !

{{- $src := .Resource.GetMatch (printf "%s%s" .Destination) -}}
{{- $dataSzes := "(min-width: 1024px) 100vw, 50vw" -}}
{{- $actualImg := $src.Resize "640x" -}}

<figure>{{ with .Title }}
	<figcaption>{{.|$.Page.RenderString}}</figcaption>{{ end }}
		<picture>
			<source
				srcset="
				{{- with $respSizes -}}
					{{- range $i, $e := . -}}
						{{- if ge $src.Width . -}}
							{{- if $i }}, {{ end -}}{{- ($src.Resize (printf "%sx%s" ) ).RelPermalink }} {{ . }}w
						{{- end -}}
					{{- end -}}
				{{- end -}}"
				sizes="{{ $dataSzes }}"
			/>
		</picture>
</figure>
2

If you are using the assets folder to host your images, use resources.Get instead.

3

Ok, I put {{- $src := resources.Get (printf "%s%s" .Destination) -}} and in general resources.Get wherever there was .Resource.GetMatch
and now the error is:

execute of template failed:
template: _default/_markup/render-image.html:4:22:
executing 
"_default/_markup/render-image.html" at 
<$src.Resize>: nil pointer evaluating resource.Resource.Resize
Built in 215 ms```
4

This approach uses a shortcode and assumes a user is using page bundles. Try the approach below.

5

Great.
And the code is simpler too.
But I get an error "Error: add site dependencies: load resources: loading templates: "/home/drm/WEBSITE/themes/hugo-book/layouts/_default/_markup/render-image.html:40:1": parse failed: template: _default/_markup/render-image.html:40: unexpected EOF
and it’s annoying af, because it gives no more information and I can’t seem to pin-point the syntax typo. Is there somewhere a code validator for go+html or somethin’ ?

Without that typo, normally,

{{ $img := .Page.Resources.GetMatch .Destination }}
{{ if and (not $img) .Page.File }}
{{ $path := path.Join .Page.File.Dir .Destination }}
{{ $img = resources.Get $path }}
{{ end }}
{{ with $img }}
{{ $largest := $img.Resize "1500x" }}
{{ $large := $largest.Resize "1200x" }}
{{ $medium := $large.Resize "900x" }}
{{ $small := $medium.Resize "400x" }}

{{if .IsBlock}}

<figure>{{ with .Title }}<figcaption>{{.|$.Page.RenderString}}</figcaption>{{ end }}<a href="{{$img.RelPermalink}}" target="_blank">

<picture>
	<source srcset="{{ $small.RelPermalink }} 400w,
			        {{ $medium.RelPermalink }} 900w,
			        {{ $large.RelPermalink }} 1200w,
			        {{ $largest.RelPermalink }} 1500w"/>
	<img src="{{ $medium.RelPermalink }}" loading="{{with .Attributes.loading}}{{.}}{{else}}lazy{{end}}" alt="{{ default (.Title|$.Page.RenderString) .Text }}" {{ with .Title }}title="{{ markdownify . }}"{{ end }}/>
</picture>
</a></figure>

{{ else }}

<span> {{ with .Title }}<span>{{.|$.Page.RenderString}}</span>{{ end }}<a href="{{$img.RelPermalink}}" target="_blank">

<picture>
	<source srcset="{{ $small.RelPermalink }} 400w,
			        {{ $medium.RelPermalink }} 900w,
			        {{ $large.RelPermalink }} 1200w,
			        {{ $largest.RelPermalink }} 1500w"/>
	<img src="{{ $medium.RelPermalink }}" loading="{{with .Attributes.loading}}{{.}}{{else}}lazy{{end}}" alt="{{ default (.Title|$.Page.RenderString) .Text }}" {{ with .Title }}title="{{ markdownify . }}"{{ end }}/>
 </picture>

 </a></span>
{{ end }}

should work just fine, close.
Also I remove the - in Go tags because I have no idea what they do and never needed them.

6

Try adding {{ end }} at the very end and test again

They trim white spaces in HTML. Look at your source code with and without them.

7

I had tried adding that end.

/themes/hugo-book/layouts/_default/_markup/render-image.html:12:5":
execute of template failed:
template: _default/_markup/render-image.html:12:5: executing 
"_default/_markup/render-image.html" at <.IsBlock>:
can't evaluate field IsBlock in type resource.Resource
Built in 269 ms

What the fudge now ?

8

I would like to simplify the start like this, is there a similar IsRemote function ?

{{ if IsRemote .Destination }}
	{{ $img := resources.GetRemote .Destination }}
{{ else }}
	{{ $img := .Page.Resources.GetMatch .Destination }}
 {{end}}
{{ $largest := $img.Fit "1500x1200" }}
{{ $large := $largest.Fit "1200x1000" }}
{{ $medium := $large.Fit "900x400" }}
{{ $small := $medium.Fit "400x400" }}

Also second issue, written like that $img is limited to the if expression’s scope.
This is irritating, I can’t seem to write

{{ $img = {{ if hasPrefix .Destination "http" }}
	{{resources.GetRemote .Destination }}
{{ else }}
	{{ .Page.Resources.GetMatch .Destination }}
 {{end}}
 }}

which would be the more natural way. How do we do that, in this crappy language ?

9

There’s 3 errors in the above, try:

{{- $src := .Page.Resources.GetMatch .Destination -}}

10

Ok, now I have this

{{ if hasPrefix .Destination "http" }}
	{{ $img := resources.GetRemote .Destination }}
{{ else }}
	{{ $img := .Page.Resources.GetMatch .Destination }}
 {{end}}
{{ $largest := $img.Fit "1500x1200" }}
{{ $large := $largest.Fit "1200x1000" }}
{{ $medium := $large.Fit "900x400" }}
{{ $small := $medium.Fit "400x400" }}

{{if .IsBlock}}

and it says as expected it says render-image.html:6: undefined variable "$img". I need to sort out that problem first.

11

Try below

{{- $img := "" -}}
{{ if hasPrefix .Destination "http" }}
	{{ $img = resources.GetRemote .Destination }}
{{ else }}
	{{ $img = .Page.Resources.GetMatch .Destination }}
 {{end}}
12

Error:

themes/hugo-book/layouts/_default/_markup/render-image.html:7:20": execute of template failed: template: _default/_markup/render-image.html:7:20: executing “_default/_markup/render-image.html” at <$img.Fit>: nil pointer evaluating resource.Resource.Fit

with the code starting with

{{- $img := “” -}}
{{ if hasPrefix .Destination “http” }}
{{ $img = resources.GetRemote .Destination }}
{{ else }}
{{ $img = .Page.Resources.GetMatch .Destination }}
{{end}}
{{ $largest := $img.Fit “1500x1200” }}
{{ $large := $largest.Fit “1200x1000” }}
{{ $medium := $large.Fit “900x400” }}
{{ $small := $medium.Fit “400x400” }}
{{if .IsBlock}}

13

Here’s a sample, that produces the same error

https://drive.google.com/drive/folders/1T8W44IB40eVfwJdvvIaixqsP6RkSXaIi?usp=share_link

14

You need to check if the image was found, e.g.:

{{ if $img }}
{{ $largest := $img.Fit “1500x1200” }}
{{ $large := $largest.Fit “1200x1000” }}
{{ $medium := $large.Fit “900x400” }}
{{ $small := $medium.Fit “400x400” }}
{{ end }}
15

First, you said your images are in the assets folder, but you don’t have an assets folder in the base folder of your project. Second, you should create images and their paths based on the path in your markdown content i.e assets/images/space/andromeda-galaxy.jpg. So, do that.

Based on the answer by @bep, I modified your code a bit.

{{- $img := "" -}}
{{ if hasPrefix .Destination "http" }}
{{ $img = resources.GetRemote .Destination }}
{{ else }}
{{ $img = resources.Get .Destination }}
{{end}}
{{- if $img }}
{{ $largest := $img.Fit "1500x1200" }}
{{ $large := $largest.Fit "1200x1000" }}
{{ $medium := $large.Fit "900x400" }}
{{ $small := $medium.Fit "400x400" }}

{{if .IsBlock}}

<figure class="image flex flex-col right {{with .Attributes.class}}{{.}}{{end}}">{{ with .Title }}<figcaption
		class=figcaption_class>{{.|$.Page.RenderString}}</figcaption>{{ end }}<a href="{{$img.RelPermalink}}"
		target="_blank">
		<picture>
			<source srcset="{{ $small.RelPermalink }} 400w,
{{ $medium.RelPermalink }} 900w,
{{ $large.RelPermalink }} 1200w,
{{ $largest.RelPermalink }} 1500w" />
			<img src="{{ $medium.RelPermalink }}" loading="{{with .Attributes.loading}}{{.}}{{else}}lazy{{end}}"
				alt="{{ default (.Title|$.Page.RenderString) .Text }}" {{ with .Title }}title="{{ markdownify . }}" {{
				end }} />
		</picture>
	</a></figure>

{{ else }}

<span class="image flex flex-col right {{with .Attributes.class}}{{.}}{{end}}"> {{ with .Title }}<span
		class=figcaption_class>{{.|$.Page.RenderString}}</span>{{ end }}<a href="{{$img.RelPermalink}}" target="_blank">
		<picture>
			<source srcset="{{ $small.RelPermalink }} 400w,
{{ $medium.RelPermalink }} 900w,
{{ $large.RelPermalink }} 1200w,
{{ $largest.RelPermalink }} 1500w" />
			<img src="{{ $medium.RelPermalink }}"
				loading="{{if .Attributes.loading}}{{.}}{{else if ge 4 .Ordinal }}eager{{else}}lazy{{end}}"
				alt="{{ default (.Title|$.Page.RenderString) .Text }}" {{ with .Title }}title="{{ markdownify . }}" {{
				end }} />
		</picture>
	</a></span>

{{ end }}
{{ end }}
16

I do have assets in my base folder !

/home/drm/WEBSITE
├──􀀂 archetypes …
├──􀀂 assets
│ └──􀀂 Images …
├──􀌜 config.toml
├──􀀂 content
│ ├──􀇱 _index.md
│ └──􀀂 docs …
├──􀆄 package-lock.json
├──􀆄 package.json
├──􀀂 public
│ ├──􀀀 404.html
│ ├──􀀂 audio
│ └──􀀀 19 unlisted
├──􀀂 resources
│ └──􀀂 _gen …
├──􀀂 static
│ ├──􀀂 audio
│ ├──􀅣 favicon.ico
│ └──􀀂 2 unlisted
└──􀀂 themes
└──􀀂 hugo-book …

17

You still must check if resources.Get... and .Page.Resources.Get... returned something! The nil pointer error is related to a resource that couldn’t be found, probably because of a typo.

19

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