Can't get resource metadata from leaf bundle

support
1

Hugo newbie here so please bear with me! I’m trying to create leaf bundles to support a photo gallery separated by month. Here’s my directory structure:

    + content
        + photography
            - _index.md
            + july
                - index.md
                - img1.jpg
                - img2.jpg
            + august
                - index.md
                - img3.jpg
                - img4.jpg
    + layouts
        + _default
            - photography.html
        + photography
            - single.html

The _index.md is content for the landing page photography.html. Each month is its own single page under the Photography section, for instance: www.mydomain.com/photography/jul-20/

Here is what index.md looks like in the july folder:

    ---
    title: "July 2020"
    url: "/photography/jul-20"
    layout: "bundle"
    resources:
    - src: "/img1.jpg"
      location: "Boston"
      day: 8
    - src: "/img2.jpg"
      location: "New York City"
      day: 16
    ---

I’m trying to access the image resources in my single.html template in the layouts/photography folder:

    {{ define "main" }}
    <div class="container">
      <span> {{ lower .Page.Title }} </span> 
    </div>
    <div id="gallery" class="container-fluid">
      <div class="row">
        {{ range .Resources.Match "jpg" }}
          <figure class="col-xl-4 col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <img id="gallery-photo" src="{{ .Permalink }}">
          </figure>
        {{ end }}
      </div>
    </div>
    {{ end }}

This shows nothing on the page. The only time I get something other than nothing is adding the following in single.html:

{{ .Resources }}

which gives me the array:

[img1.jpg, img2.jpg]

but if I try to range over this array and access any of the other image resource metadata like .Location or .Day, I get the error:

Failed to render pages: render of "page" failed: "/layouts/photography/single.html:9:5": 
execute of template failed: template: photography/single.html:9:5: executing "main" at <.Location>: 
can't evaluate field Location in type resource.Resource

I’m not sure why Hugo is failing to grab the resource metadata from my index.md files.

I’ve read Hugo’s documentation on page bundles, content organization, metadata, front matter, and image processing. I’ve also read Laura Kalbag’s, Kaushal Modi’s, and Regis Philibert’s, plus so many Hugo discourse threads I’ve lost count.

Is there something obvious I’m missing here? I’ve been banging my head against a wall about this for 4 days now :frowning: would be so grateful for any help!

2

You need to nest your custom metadata under params: https://gohugo.io/content-management/page-resources/#resources-metadata-example

3

Thanks for the quick reply! I updated index.md to look like:

---
title: "July 2020"
url: "/photography/jul-20"
layout: "bundle"
resources:
- params:
    src: "/img1.jpg"
    location: "Boston"
    day: 8
- params:
     src: "/img2.jpg"
     location: "New York City"
     day: 16
---

and I get the error:

content/photography/2020/aug/index.md:8:1": 
failed to unmarshal YAML: yaml: line 7: 
found character that cannot start any token

(line 7 is the first params: in this index.md file)

4

Check if you are using tab characters instead of spaces. YAML doesn’t like tabs.

Also: src (and title and name if you use them) are non-custom metadata field, so should be in the top level:

resources: 
- params:
    location: "Boston"
    day: 8
  src: "/img1.jpg"
- params:
    location: "New York City"
    day: 16
  src: "/img2.jpg"

I have some examples you could have a look at, maybe it helps: demo / source