HUGO

How to approach basic Gallery sourced by frontmatter

#1

So I have a gallery page that currently looks as follows:

content
├── gallery
…   ├── apple.jpg
    ├── orange.jpg
    ├── banan.jpg
    └── _index.md

This is being fed by a CMS which populates the frontmatter like so:

---
title: Gallery
images:
  - image:
      description: An apple
      imagefile: apple.jpg
  - image:
      description: Citrus fruit
      imagefile: orange.jpg
  - image:
      description: Yellow and bent
      imagefile: banana.jpg
---

I need to rely on the frontmatter as the source, as the CMS can rearrange the items there, thereby “sorting” the gallery.

Question

For Hugo, would this be a single page (listing its associated resources) or a list page? I sometimes have difficulty figuring that out.

I noticed that:

  • gallery/index.md ignores layouts/gallery/single.html
  • gallery/_index.md uses layouts/gallery/list.html

In the end, I want to iterate over the frontmatter list and process the images a bit:

{{ range .Params.images }}
  {{ $path := .image.imagefile }} # works
  {{ $i := .Resources.GetMatch $path }} # no luck
{{ end }}

Does fetching the resources not work that way because I’m in a “list” template?

Any guidance into the right direction welcome, I’m a bit overwhelmed by this.

#2

_index.md > list page
index.md > single page

The second one is correct; _index.md > list page > use list.html

content/gallery/index.md is a single page, but it is a top-level single page. It is basically equivalent to content/gallery.md. As such, it is not under a section; it has no .Section.

It will use _default/single.html unless a more specific layout is defined.

layouts/gallery/single.html would apply to pages like

content/gallery/first-gallery/index.md
content/gallery/other-gallery.md
...

It does not work because you are inside the range context; the dot here is .Params.images[i], when you are trying to get the .Page context.

Docs: https://gohugo.io/templates/introduction/#the-dot

1 Like
#3

I’m super busy right now, I’ll try this and respond once I find the time. Thanks @pointyfar!

#4

content/gallery/index.md is a single page, but it is a top-level single page. It is basically equivalent to content/gallery.md . As such, it is not under a section; it has no .Section .

It will use _default/single.html unless a more specific layout is defined.

layouts/gallery/single.html would apply to pages like

 content/gallery/first-gallery/index.md
 content/gallery/other-gallery.md

What would a more specific layout look like? I tried different paths like layouts/gallery.html, layouts/_default/gallery.html to no avail.

Basically, what I’m asking is: can my gallery be an index.md and have its own template? Or does it have to be a list-type template by virtue of its use? That’s the part I have a hard time understanding. For me it’s a single page, since it won’t have any *.md siblings.

Edit

I’m making some progress. If I define layout: gallery in the frontmatter of /content/gallery/index.md, it picks up layouts/_default/gallery.html (not layouts/gallery.html though). Will the lookup rules prevent any gallery.html from taking precedence over _default/single.html without adding such a hint?

#5

It does not work because you are inside the range context; the dot here is .Params.images[i] , when you are trying to get the .Page context.

Docs: https://gohugo.io/templates/introduction/#the-dot

This works splendid btw, I switched to $.Resources.GetMatch and the page bundle resources are being found as desired.

#6

You can also set the type: gallery which should then pick up layouts/gallery/single.html.

1 Like
#7

That’s nice, I much prefer that – keeping the template in its own folder, as I also did so for the other pages/sections. :+1: