Processing Frontmatter Images with Forestry

I’ve setup a content > uploads folder for use with Forestry as described: https://forestry.io/blog/how-to-use-hugo-s-image-processing-with-forestry/

All pages are within the content folder (no subdirectories).
The filename of the image to be processed is stored in the frontmatter for each page, eg.

Image = "IMG_5709-web2srgb.jpg"

refers to this file:

content > uploads > IMG_5709-web2srgb.jpg

I have the following code to generate a homepage (index.html):

{{ range where .Data.Pages.ByDate.Reverse "Type" "Current" }}

{{ with .Params.Image }}
{{ $imageResource := ($.Site.GetPage "section" "uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }}
{{ $resized := $imageResource.Fill "200x200" }}
{{ end }}

<div class="feature">
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
<a href="{{ .RelPermalink }}">
<img alt="{{ .Title }}" src="{{ $resized.RelPermalink }}" />
</a>
</div>

{{ end }}

Hugo fails to rebuild giving the following error:

parse failed: template: index.html:55: undefined variable "$resized"

Any help appreciated!

Not tested, but you can try this.

{{ range where .Data.Pages.ByDate.Reverse "Type" "Current" }}
+ {{ $resized := "" }}

{{ with .Params.Image }}
{{ $imageResource := ($.Site.GetPage "section" "uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }}
+{{ $resized = $imageResource.Fill "200x200" }}
{{ end }}

<div class="feature">
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
+{{ with .Params.Image }} <!-- only render if .Params.Image set -->
<a href="{{ .RelPermalink }}">
<img alt="{{ .Title }}" src="{{ $resized.RelPermalink }}" />
</a>
+{{  end }}
</div>

{{ end }}
1 Like

Wonderful. It lives!
Thanks so much.

1 Like