Trying to reference YAML front matter in a shortcode

In creating a newsletter-style template I want to include common info each month in the YAML front-matter of the page and reference it in a shortcode. I’ve done this successfully, but have come across a scenario where what’s worked in the past doesn’t work for this example.

My (simplified) page:

# Calendar information
    - date: April 4, 2023
      event: Event1
      location: Location1
      time: 6:30pm
      notes: Note1

    - date: April 21-22, 2023
      event: Event2
      location: Location1

# Dinner information
    - vendor: "Jack's BBQ"
        - BBQ ribs
        - BBQ baked beans
        - Mac and cheese
        - Rolls
        - Tea
      cost: "$20"
      name: "John Doe"
      email: ""
      img: "/assets/img/bbq.img"

{{< calendar >}}

{{< dinner >}}

calendar.html works fine:

{{with $.Page.Param "calendar"}}
    <aside id="calendar" class="box calendar shadow">
        <h1>Upcoming Events</h1>

            {{range .}}
                <tr class="calendar-row">
                    <td width="33%">{{.day}}<br>{{.date}}</td>
                    <td width="50%">{{.event}}<br>{{.location}} {{.time}}<br>{{with .notes}}{{.}}{{end}}</td>

dinner.html does not, using the same approach:

{{with $.Page.Param "dinner"}}
<aside id="dinner" class="box shadow">
    <h1>Join us for dinner</h1>
      <img src="{{ .img }}" alt="a picture"> //* <<<< THIS IS WHERE IT BREAKS *//
    <p>Please make plans to join us for dinner! By popular demand, {{ .name }} has cooked up the following delicious meal from {{ .vendor }}:</p>
      {{ range .items }}
      <li>{{ . }}</li>
      {{ end }}
    <button class="button"><a href="mailto:{{ .email }}">Reserve your spot now!</a></button>

When attempting to fire up a hugo server I get this error:

Error: Error building site: "/Users/jdoe/Projects/newsletter/content/issues/2023-04/": failed to render shortcode "dinner": failed to process shortcode: "/Users/jdoe/Projects/newsletter/layouts/shortcodes/dinner.html:5:19": execute of template failed: template: shortcodes/dinner.html:5:19: **executing "shortcodes/dinner.html" at <.img>: can't evaluate field img in type []interface {}**

Does anyone have any idea why one works and the other doesn’t (and how to fix the broken one)?

Thanks in advance

We need to see the actual repository or a reproducible test case. Nothing stands out in what you’ve shown (at least for me).

I figured it out. I was not processing nested lists correctly. This fixed it:

{{range .}} /*needed to add this outer loop
  {{range .items}}
1 Like

I missed that dinner was a list. Glad you figured it out.

1 Like