Nested sections within content type

support
1

My project has the following content structure:

content/
└── products/
    └── live-monitor/
        ├── tiles/
        |   └── live-monitoring-dashboard/
        |       ├── index.md           ← Front matter: `headless: true`
        |       └── img/
        |           └── featured.jpg   ← Image you want to fetch
        └── index.md

Inside layouts/products/single.html I am trying to iterate over the tiles and display their content as well as the image resource.

Here is the index.md file’s content (tiles/live-monitoring-dashboard):

---
title: Live Monitoring Dashboard
headless: true
img:
  'img/featured.jpg'
resources:
- name: Featured
  src: 'img/**.{png,jpg}'
  title: Stock image
---

- Real-time weather parameters
- Historical trends analysis
- Crop calendar integration

If anyone has an idea on how I can achieve this, I am all ears.
I’ve triend extensive web search as well as AI tools, but I am still falling short of the solution for this one.

Many thanks in advance.

2

You need to change some of your regular pages into sections, and those sections will be rendered by a list.html template not a single.html template.

content/
├── products/
│   ├── live-monitor/
│   │   ├── tiles/
│   │   │   ├── live-monitoring-dashboard/
│   │   │   │   ├── img/
│   │   │   │   │   └── features.jpg
│   │   │   │   └── index.md  <-- page kind = page
│   │   │   └── _index.md     <-- page kind = section
│   │   └── _index.md         <-- page kind = section
│   └── _index.md             <-- page kind = section
└── _index.md                 <-- page kind = home
3

Thank you very much for replying.
Please don’t mind my ignorance on the matter, sometimes I struggle understanding Hugo.
My goal is to have single page for every product, like live-monitor in my example and then somehow have a section in the same page of the product that contains some cards, like the tiles.
Basically every product would have these mini set of cards on their individual pages.

Does your suggestion fit into this? Again, sorry if I miss-understood.

P.S. Something like this

image
image354×448 3.97 KB

4

If I click on card (or something in it), should the browser navigate to the underlying page?

5

No, the cards are there just as a sub-section (for lack of better term) of the product page. They are supposed to be iterated over and contain an image as a resource as well as some content, but they should not produce any single page of their own nor should they be accessible via the URL. They basically should not exist outside the context of the product content type.

I can easily achieve this on landing pages, 'cause those have fixed path, but when it comes to content types, like product in this example, I am completely clueless.

6 
git clone --single-branch -b hugo-forum-topic-54291 https://github.com/jmooring/hugo-testing hugo-forum-topic-54291
cd hugo-forum-topic-54291
hugo server

Files of interest:

  • hugo.toml (lines 6-19)
  • layouts/produts/single.html
  • layouts/products/tile.html
1 Like
7

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