Weird behavior with resources inside list template

support
1

Hi there, this is my first post so I’ll do my best to respect the rules but be kind if I missed something out :wink:

I’m having an unexpected behavior while building a list page using Resources.

Here’s my content structure :

> my-section
    _index.md
    > some-branch-bundle
        _index.md
        > first-leaf-bundle
            index.md
            image-1.jpg
            image-2.jpg
        > second-leaf-bundle
            index.md
            image-1.jpg
            image-2.jpg

on each leaf bundle index.md, I set a param named thumbnail wich equals to the name of one of the images of said leaf bundle.

on the branch bundle I set the type to my-section.

In my layout structure, I have a my-section folder which contains a list.html
So far so good (I hope) and my branch bundle use the list.html to render.

Now here’s the code inside my list.html template :

{{ define "main" }}
    <div class="container-fluid pt-5">
        <div class="row justify-content-center">
            {{ range .Pages.Reverse }}
                <div class="col-sm-10 col-md-5 col-xl-3 mb-4">
                    <div class="card card-gallery text-center">
                        {{ $thumbnail := .Resources.GetMatch .Params.thumbnail }}
                        {{ $thumb_sd := $thumbnail.Fill "460x460 center" }}
                        {{ $thumb_hd := $thumbnail.Fill "920x920 center" }}
                        <img src="{{ $thumb_sd.RelPermalink }}" srcset="{{ $thumb_sd.RelPermalink }} 1x, {{ $thumb_hd.RelPermalink }} 2x" class="card-img-top" alt="">
                        <div class="card-img-overlay d-flex flex-column justify-content-between">
                            <h4 class="card-title">{{ .Title }}</h4>
                            <a href="{{ .Permalink }}" class="btn btn-block btn-secondary">
                                <i class="far fa-images"></i> Discover...
                            </a>
                        </div>
                    </div>
                </div>
            {{ end }}
        </div>
    </div>
{{ end }}

And of course this template fails to render, with the following error :

Error: Error building site: failed to render pages: render of "section" failed: "/my-project/layouts/my-section/list.html:7:68": execute of template failed: template: my-section/list.html:7:68: executing "main" at <.Params.thumbnail>: invalid value; expected string

First problem, I don’t understand why it fails, because if I just call {{ .Params.thumbnail }} I do get the string corresponding to the filename I specified. So I can’t figure out why I have this error.

But what’s even weirder is that while trying to debug, I discovered that if I launch hugo serve without all my thumbnail generation code in the template AND THEN add it incrementaly while the live rendering is running, I don’t get any errors and the template renders fine!

But as soon as I stop hugo serve and relaunch, I’m again stuck with the error.

I hope the community will help me figure it out!

EDIT : An interesting point is that in this project, I have the almost exact same template for a list page in another section, with the same logic for thumbnail, the only difference is that the list is for the root section, not a nested branch bundle. And in this case, everything is rendering fine.

2

Answering myself because I’m dumb…

Problem was that by creating a list.html I was also rendering the my-section page with this template and the section _index.md didn’t have the thumbnail param. So I added a custom layout to render my branch bundle and now everything is rendering fine.

Sorry about the useless post…

1 Like
3

Hey - don’t be sorry about a ‘useless post’. I reckon we’ve all done this before! The most helpful thing you’ve done is not only pressed on and worked out the solution yourself (I wonder if typing out the question sometimes helps present the answer to us) but you’ve come back and let the community know the solution - so it can be found by others.

4

thx for that!