# Headless + Resources combination

**URL:** <https://discourse.gohugo.io/t/headless-resources-combination/32222>\
**Category:** support\
**Tags:** headless\
**Created:** [April 7, 2021, 6:22pm UTC](https://discourse.gohugo.io/t/headless-resources-combination/32222 "2021-04-07T18:22:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![stephlocke](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stephlocke/32/4387_2.png) [@stephlocke](https://discourse.gohugo.io/u/stephlocke)\
**Post date:** [April 7, 2021, 6:22pm UTC](https://discourse.gohugo.io/t/headless-resources-combination/32222/1 "2021-04-07T18:22:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [April 7, 2021, 11:44pm UTC](https://discourse.gohugo.io/t/headless-resources-combination/32222/2 "2021-04-07T23:44:43Z")

</div>

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

```auto
-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:

```auto
{{ $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”.

---

<div class="post-metadata">

**Author:** ![stephlocke](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/stephlocke/32/4387_2.png) [@stephlocke](https://discourse.gohugo.io/u/stephlocke)\
**Post date:** [April 8, 2021, 12:07pm UTC](https://discourse.gohugo.io/t/headless-resources-combination/32222/3 "2021-04-08T12:07:08Z")

</div>

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
---
```

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [April 10, 2021, 12:07pm UTC](https://discourse.gohugo.io/t/headless-resources-combination/32222/4 "2021-04-10T12:07:11Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.