/section/photos layout structure

support
1

Hi, I’m a bit overwhelmed by Hugo's Lookup Order | Hugo

I have a site, with structure like:

Beef - a section?
https://hg.goserverless.sg/beef/photos/ - photos of that section (not working)

This is the layout of photos which doesn’t work hg.goserverless.sg/layouts at main · kaihendry/hg.goserverless.sg · GitHub

What am I missing please?

2

I hope that this helps:

It works for chicken locally, you can made for beef by yourself

image
image526×965 39.9 KB

3

If I understand

correctly, beef would by default be a section, unless it were a “leaf bundle”. Now a leaf bundle is described as

Since your beefdirectory does contain an index.md, it is a leaf bundle. Which in turn means that it is not a section.

That …/photos does “not work” may be, but since you do not say what “not work” means, it is difficult to judge. If I click on that link, I actually see an directory listing with “images” as its only content. That and your directory structure indicate that your images are in fact not in “photos” but in “photos/images”. So you should either move them to “photos” or adjust your links if (which you didn’t say, so I’m making an assumption here) you want the user to see actual images when they click on “photos”.

4

When I click /section/photos I want this template to show the images:

Does that make sense? Not a directory listing.

So I should my code not to be leaf bundle right?

5

I don’t want to duplicate the “chicken” layout for all other types of meat, if that makes any sense, haha

6

You do not have to duplicate your layout. First, you have to clean up your directory structure. Then you can set the desired layout in the frontmatter of your index.md (use the type parameter). This is explained in the documentation:

7

Thanks for the type hint, that helped ! Use type · kaihendry/hg.goserverless.sg@582efa3 · GitHub

However, when jiggling between a section (_index.md) and “leaf bundle” (index.md) I again have become confused. First hugo serve has to be restarted when moving these around as it gives me misleading stale responses!

Now I’m confused because the leaf bundle https://hg.goserverless.sg/chicken shows the breadcrumb navigation but doesn’t show the photos https://hg.goserverless.sg/chicken/photos/

The beef “section” Beef now misses breadcrumb navigation does show the photos Beef photos

So I guess “single.html” is not being rendered on the section hg.goserverless.sg/single.html at main · kaihendry/hg.goserverless.sg · GitHub

So how do I figure out what does?

8

Some notes:

content
├── _index.md
├── beef
│   ├── _index.md      # 1
│   └── photos
│       ├── images     # 2
│       │   ├── bbq.jpeg
│       │   └── beef.jpeg
│       └── index.md
└── chicken
    ├── index.md      # 3
    └── photos
        ├── images
        │   ├── chicken.jpeg
        │   └── nasi-ayam.jpeg
        └── index.md   # 4

  1. If you have: content/beef/_index.md the images need to be under /beef/ to be considered Page Resources belonging to /beef/_index.md.

  2. The photos under /beef/photos/images belong to beef/photos/index.md.

  3. content/chicken/index.md is a single page of type page, because you do not specify a type on the frontmatter. It is equivalent to content/chicken.md; i.e. it is not under a subfolder, which would have given it a non-default value for type. Therefore it uses the default single layout.

  4. content/chicken/photos/index.md is a Page-type Page Resource belonging to content/chicken/index.md because content/chicken/index.md is a leaf node.

References:

Maybe this helps: https://cocky-aryabhata-833924.netlify.app/layout-lookup/ | GitHub - pointyfar/hugo-content-naming-layouts

10

  1. Why doesn’t the breadcrumb show up on beef? hg.goserverless.sg/single.html at main · kaihendry/hg.goserverless.sg · GitHub … because it’s a list view? How do I know what hugo thinks that view/template is for that “beef” path?

  2. So type is ignored? I don’t quite understand why https://hg.goserverless.sg/chicken/photos/ doesn’t render.

11

/beef/ is content/beef/_index.md; therefore it is a list, with type beef because you do not specify otherwise.

/beef/photos/ is content/beef/photos/index.md, which is a single, with type photos because you specify on its frontmatter.

Read point 4 in my response above.

Look at the lookup rules.
For /beef/_index.md:

Kind => {{ .Kind }} => `section`
Layout => not specified
Output Format => html
Language => n/a because not multilingual
Type => {{ .Type }} => beef
Section => {{ .Section }} => beef

Then scroll down to the correct table for section Kind: Template lookup order | Hugo

Which one is most appropriate?

RSS section posts
Section list for “posts” section
Section list for “posts” section with type set to “blog”
Section list for “posts” section with layout set to “demoLayout”

Clearly, the second, because you do not set the type; neither do you set the layout.

So now you have the possible places Hugo will check for a layout file. The most specific one wins; i.e. option 5 is more specific than option 12, so given both Hugo will pick option 5.

Obviously replace posts here with beef because that is the value of your Type / Section.

1 Like
12

Thanks though I didn’t find that terribly easy.

I think I stumbled upon the solution by renaming single.html → section.html in my layouts/_default

Now the site behaves how I want it to I think. Not sure why my chicken image is upside down, https://hg.goserverless.sg/chicken/photos/ haha