I can't get .Resources or Image Processing to work

So for the life of me I can’t get Page Resources or Image Processing to work.

Each time I get the following error:
ERROR 2018/02/20 16:29:02 Error while rendering "home": template: index.html:7:25: executing "index.html" at <.Resources.GetMatch>: can't evaluate field Resources in type *hugolib.PageOutput

Hugo Version:
Hugo Static Site Generator v0.36.1 darwin/amd64

File structure:

|-  index.html
|_  section
    |_  docs.html

|-  _index.md
|-  test.jpg
|_  docs
    |-  _index.md
    |_  test.jpg

Simple test code on index.html and/or docs.html

{{ $image := (.Resources.ByType "image") }}
{{ with $image }}
{{ $resized := $image.Resize "300x" }}
  <img src="{{ $resized.Permalink }}" width="{{ $resized.Width }}" height="{{ $resized.Height }}">
{{ end }}

I’ve also tried the .Match method as well as a number of different techniques from searching these posts. I keep getting this error every time.

What am I doing wrong?


You are running with an old Hugo version. The error message is clear.

I was thinking this at first too, but hugo version is telling me it’s running 0.36 (as I noted above). I also tried to upgrade hugo today using brew and it said it’s up-to-date. So how am I running an old version?

So I kinda fixed the problem. I did some digging and just now figured out it was the hugo-bin dependency that was out of date from a Netlify template - it’s now up to 0.35.

So for others that come across this topic with the same issue - update your hugo-bin dependency if you are using a Netlify template (or added it yourself).

That said, I’ve only successfully got the following to work.

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

I have to use range to have an image/resource show up. How should I approach this to use on a single element like a header?

1 Like

How should I approach this to use on a single element like a header?

Instead of using range, use index to get the 0 element of the slice (i.e. the first element), or use .GetMatch, which returns only the first matched resource.