Resizing a page bundle resource

support
1

Hello !

I’m very new to Hugo (and Go), but I’m trying to create a theme for a personal note-keeping blog.

I am working slowly on the “list” template for now, and I’m already having an issue. I have a page bundle with my index.md and an illustration image named illustration.jpg which I would like to resize and display in the template.
I have no problem getting and displaying the image, but I’m having difficulties resizing it – I think I am getting entangled in the Go context.

Here is my code:

{{ define "main" }}
  {{ range .Pages }}
    <article class="article-list-item">
      {{ $cover := .Resources.GetMatch "illustration.jpg" }}
      {{ $cover := $cover.Resize "1200x" }}
      <div class="article-list-item__illustration" style='background-image: url({{ $cover.Permalink }})' >
        <p class="article-list-item__taxonomy">
          <span class="article-list-item__category">{{ .Params.category }}</span>
          <span class="article-list-item__tags">
            {{ range $tag := .Params.tags }}
              <span class="article-list-item__tag">{{ $tag }}</span>
            {{ end }}
          </span>
        </p>
        <h2 class="article-list-item__title"><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
      </div>
      <p class="article-list-item__summary">{{ .Summary }}</p>
      <p class="article-list-item__read-on">{{ i18n "continueReading" }}</p>
    </article>
  {{ end }}
{{ end }}

My first problem is that I cannot figure out how to chain the resource fetching with the resizing. Something like {{ $cover := (.Resources.GetMatch "illustration.jpg").Resize "1200x" }} gets me an error message (_default/list.html:5:25: executing "main" at <$cover.Resize>: can't evaluate field Resize in type resource.Resource).

Even separating the two functions like I did doesn’t work, the only way that seems to be working is using with to fetch the resource, but then I don’t know how I can refer back to the context of the range instead of the context in with.

I don’t really know what else to try, and I’m quite surprised that I cannot just chain my function calls like in any other language…

Thank for your help :slight_smile:

2

The example you gave should work (I just tested it locally):

{{ range .Pages }}
  {{ $cover := (.Resources.GetMatch "illustration.jpg").Resize "1200x" }}
  <!-- rest of code -->
{{ end }}

So you must be doing something else in your template.

If you share your code, I’ll look into this more. If you can’t provide a link to the site git repo, then create a small sample repo that reproduces the issue, then post that.

3

1st. in line 5 you redefine the variable $cover, just use $cover = … You must have Hugo >= 0.48

You can use a 2nd name (hugo < 0.48) or the Scratch function, see sample near the end