HUGO

Why using images placed inside bundle does not work in partial

I’m trying to make image processing work with forestry.io and use component-like partials at the same time. So I’m trying to make it work like this:

  • in my index.html template, I’m rendering list of content
{{ range first 2 (where site.RegularPages "Type" "in" "featured") }}
   {{ .Render "summary" }}
{{ end }}
  • in summary.html template, I’m including my “component” partial like this
{{ partial "components/card3" (dict "context" . "imgwidth" "50") }}
  • in my card3.html template, I’m trying to render an image like this:
{{ with .context.Params.image }}
    {{ $imageResource := ($.Site.GetPage "section" "uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }}
    {{ $resized := $imageResource.Fill "200x200" }}
    <img src="{{ $resized.RelPermalink }}" />
{{ end }}

This doesn’t work (src is empty) even when .context.Params.image
correctly returns name of image linked in the frontmatter

Interestingly, if I use my summary.html template directly like this:

{{ with .Params.image }}
    {{ $imageResource := ($.Site.GetPage "section" "uploads").Resources.GetMatch (strings.TrimPrefix "/uploads/" . ) }}
    {{ $resized := $imageResource.Fill "200x200" }}
    <img src="{{ $resized.RelPermalink }}" />
{{ end }}

it seems to be working fine. What am I doing wrong here?

In card3.html replace $.Site.GetPage with site.GetPage.

1 Like

Thanks, this works fine. Now I just need to understand why…

$ is the global context. “Global” from within the partial is the context that you pass to it, ie:

(dict "context" . "imgwidth" "50")

… which does not have .Site.

ref: https://gohugo.io/variables/site/#get-the-site-object-from-a-partial

In your example, either of these will work:

site.GetPage
$.context.Site.GetPage

.Site is available from .Page, and at the root context of your partial .Page is represented by .context.

$ --> root context of partial
.context --> .Page