Headless + Resources combination

[stephlocke]

I’m trying to make a homepage that’ll get generated by iterating through block pages and their associated resource images.

I created a headless bundle (content/homepage/index.md) with headless=true. Inside that bundle I then have block*/ folders each with an index.md and an image. The block*/index.md files have resource details in the frontmatter.

So:
-content/
–homepage/
—index.md
—block1/
----index.md
----img.png

I wrote the following partial for my index.html

{{ $headless := .Site.GetPage "/homepage" }}
{{ $pages := $headless.Resources.ByType "page" }}
<!-- access the toplevel page deets - note it's an "index.md", no underscore required for the headless stuff to work  -->
{{ with $headless }}
<h1>{{ .Title }}</h1>
    {{ .Content }}
{{ end }}
<!-- iterate through resources in the bundle that are of type page -->
{{ range $pages }}
<h2>{{ .Title }}</h2>
    {{ .Content }}
    <!-- this doesn't find resources associated with the page -->
    {{ range .Resources.ByType "image" }}
    {{ .RelPermalink}}
    {{ end }}
{{ end }}
<!-- It looks like image resources are children of the parent level 🤔 -->
{{ range $headless.Resources.ByType "image" }}
{{ .RelPermalink}}
{{ end }}

I would like to be able to handle images within the loop of block pages and not at the homepage level overall.

How should the code (or content!) be structured to support the iteration?

Background / extra info

Why I need images resources

As I’m building AMP pages, I want to be able to have images associated with each content block via resources so I can scale them with image pipelines.

Headless or norender?

I’m not sure if I should be using bundles with the latest nobuild type options but when I’ve tried it without the headless=true and treating it as standard pages I’ve struggled getting the image to appear too.

Repro info

• wsl2 ubuntu 20.04
• hugo hugo v0.82.0+extended linux/amd64

[pointyfar]

The question of a Page having Page Resources is separate from whether a Page is headless.

-content/
–homepage/
—index.md     # Note A
—block1/
----index.md  # Note B
----img.png

Note A: Rename this to _index.md

Note B: Currently, this is a page-type resource that belongs to Note A index.md. As it is a resource, not a page, it does not have its own resources. The img.png resource actually belongs to Note A index.md.

Once you have Note A renamed to _index.md, block1/img.png will become a image resource belonging to block1/index.md

---

You will need to change your partial as well:

{{ $homepage := .Site.GetPage "/homepage" }}

{{ with $homepage }}
  {{ $pages := $homepage.Pages }}

@stephlocke

Headless or norender?

I personally prefer using build options, as they are more flexible than just “headless” vs “not-headless”.

[stephlocke]

Thanks @pointyfar ! That combination solved it

Outlined below the completed partial and frontmatter for folks who might check out this post later.

Partial now looks like

{{ $homepage  := .Site.GetPage "/homepage" }}
{{ with $homepage }}
<h1>{{ .Title }}</h1>
    {{ .Content }}
{{ end }}
{{ range $homepage.Pages }}
    <h2>{{ .Title }}</h2>
        {{ .Content }}
    {{ range .Resources.ByType "image" }}
        {{ .RelPermalink}}
    {{ end }}
{{ end }}

And the /homepage/_index.md has the following front matter

---
title: Homepage
description: Homepage blocks
cascade:
  _build:
    render: never
    list: local
---