Headless Bundle Resources always empty

support
1

I tried to get the new page bundles with resources working for the landing page, but with no luck. Can somebody give me a hint on what I am doing wrong?

In the past I had some service.toml inside the data-folder similiar to this:

[[service]]
title = "Lorem"
text = "Lorem.ipsum"
image  = "img/services/lorem.jpg"
[[service]]
....

And in Frontmatter:

{{ range .Site.Data.services.service }}
...
{{ end }}

I tried to convert this now to the new headless page bundles in combination with resources. I Created therefore a ā€œbundleā€ folder inside content.
Folder structure:

  • content
    • bundles
      • services
        • images
        • index.md (contains ā€˜headless: trueā€™)
        • service1.md
        • service2.md

A service.md looks like this:

title: Service1
resources:
    -   src: "images/service1.jpg"
        name: "thumbnail"

According to a discussion from https://github.com/gohugoio/hugo/issues/4311#issuecomment-359461045 I tried to iterate inside my index.html:

{{ $headless := .Site.GetPage "page" "bundles/services" }}
  {{ $services := $headless.Resources.Match "*" }}
  {{ range $services }}
    {{ $image := .Resources.GetMatch "*thumbnail*" }}
    {{ with $image }}
      {{ $scaled := .Resize "600x" }}
      <img src="{{ $scaled.Permalink }}" alt="{{ with $.Page.Params.title }}{{ . }}{{ end }}">
    {{ end }}
    <h3>{{ .Title }}</h3>
    {{ .Content }}
  {{ end }}

The image is not displayed. After adding a

<pre>{{ .Resources }}</pre>

I get an empty array.

Can someone please tell me what am I doing wrong? I just want to move my data files to headless bundles for using the image processing.

Iā€™m using Hugo v0.37.1

2

You need ā€œ**ā€ (the famous double asterisk) to match in sub folders.

1 Like
3

I was actually wondering if even that would work (I havenā€™t testedā€¦)ā€¦ Can ā€œpageā€ resources fetch the image resources at the same level? I thought that only index or _index can have the resources front-matter.

4

You plan to match just the service*.md page resources here, right, and not the images? In that case, you can narrow down the match to just {{ $services := $headless.Resources.Match "service*" }}.

5

Adding double asteriks results in the following error:
"executing ā€œmainā€ at <.Resources.GetMatch>: canā€™t evaluate field Resources in type resource.Resource"

which references the following line:

{{ $image := .Resources.GetMatch "*thumbnail*" }}
6

Yea, you got to read a blog post posted here some time ago about ā€œscopes in Hugoā€. Your loop construct does not work. I would ā€œfix itā€ for you, but it would be better for you to understand it.

Someone will point to that blog article. Donā€™t remember where.

7

Here you go: https://regisphilibert.com/blog/2018/02/hugo-the-scope-the-context-and-the-dot/

2 Likes
8

I now really think that this is the actual problem, as I am Not able to get it working. Can somebody clarify if this is possible? Or do I need to restructure my bundles folder?

9

Someone may.

You can wait for that or read the article, especially the part about range and with and $.

I wrote this piece so people would grasp the scope and context logic of Go Template. And also in the hope questions about it would not multiplicate the the forums as Hugo adoption grew. It seems to have work a bit but when one of those questions comes up, we try and save some time by mentioning the link rather than finding a solution for the reader to just copy and paste. For after all, that copy and paste most certainly means the person will be back here next time with a similar question.

In this spirit, please give it another go after reading the piece and if you canā€™t find the problem by yourself (or itā€™s bigger than suspected) someone will be here to help (when we get the time). If you can fix it yourself though: Congrats :slight_smile:

1 Like
10

Thanks guys for your help! I restructured my bundles folder and itā€™s working now.

In case somebody wants to know what I did:

  • Moved all resource definitions to the index.md inside the bundles/services.md and deleted the other ā€œservices.mdā€ files.
  • Every resource definition inside the index file has now its own parameters for title, subtitle, etc.
  • In Frontend iterating over the Resources of the headless bundle and accessing the resources parameters if needed
11

What do you mean by that? Typo somewhere?

But as per my theory (sorry, havenā€™t yet got a chance to prove it), the resources front-matter can exist only in index or _index filesā€¦ Do you see that in practice too?

i.e. Leaf bundle page resources (service1.md in your example) cannot have their own resources.

If above is incorrect, let me know and Iā€™ll fix my comment.

12

Yes, typo indeed, sorry smartphone & typing :wink:

bundles/services.md should instead be bundles/services/index.md

Structure now like the following:

  • content
    • bundles
      • services
        • images (folder)
        • index.md

Index.md contains the following resource definition:

[...]
resources:
    -   src: "images/service1.jpg"
        params:
            title: "Service #1"
            subtitle: "..."
            description: "..."
[...]

I tried to get it to work with multiple files as stated above, but was not able to get it to work - working with this single index.md works like a charm!

2 Likes