Trying to reference YAML front matter in a shortcode

support
1

In creating a newsletter-style template I want to include common info each month in the YAML front-matter of the _index.md 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) _index.md page:

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

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

# Dinner information
dinner:
    - vendor: "Jack's BBQ"
      items:
        - BBQ ribs
        - BBQ baked beans
        - Mac and cheese
        - Rolls
        - Tea
      cost: "$20"
      name: "John Doe"
      email: "jdoe@someplace.com"
      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>

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

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>
    <ul>
      {{ range .items }}
      <li>{{ . }}</li>
      {{ end }}
    </ul>
    <br><br>
    <button class="button"><a href="mailto:{{ .email }}">Reserve your spot now!</a></button>
    <br><br>
  </aside>
{{end}}

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

Error: Error building site: "/Users/jdoe/Projects/newsletter/content/issues/2023-04/_index.md:98:1": 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

2

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

3

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

{{range .}} /*needed to add this outer loop
  <ul>
  {{range .items}}
    <li>{{.}}</li>
  {{end}}
{{end}}
1 Like
4

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

1 Like