Accessing page resources by name?

I have some images in a page bundle. What I would like to do is refer to these image resources by their name so I can range through my array of objects and get the correct image. Here’s my front matter:

---
title: "We're Legit"

resources:
  - src: "images/certas-logo.svg"
    title: "Certas Logo"
    name: certas-logo
  = src: "images/trading-standards-logo.svg"
    title: "Trading Standards Logo",
    name: trading-standards-logo
  - src: "images/no-rouge-traders-here-logo.png"
    title: "No Rouge Traders Here Logo"
    name: no-rouge-traders-here-logo
  - src: "images/home-pro-logo.webp"
    title: "Home Pro Logo"
    name: home-pro-logo

accreditations: [
  {
    title: Certas,
    url: https://www.certasenergy.co.uk,
    number: "#",
    image: certas-logo
  },
  {
    title: Trading Standards,
    url: https://www.tradingstandards.uk,
    number: "#",
    image: trading-standards-logo
  },
  {
    title: No Rouge Traders Here,
    url: https://www.noroguetradershere.com,
    number: N/A,
    image: no-rouge-traders-here-logo
  },
  {
    title: Home Pro,
    url: https://www.homepro.com,
    number: "#",
    image: home-pro-logo
  }
]
---

Testing

As you can see I have a list of accreditations. I need to load the image resource for each one. I have attempted like so but I get unknown in the src attribute.

{{ with .Site.GetPage "accreditations/index.md" }}
<div class="uk-section">
  <h2>{{ .Title }}</h2>
  {{ with .Content }}
  <p class="summary">{{- . -}}</p>
  {{ end }}

  <ul class="uk-grid-small uk-child-width-expand@s uk-text-center" uk-grid>
    {{ range .Params.accreditations }}
    <li>
      {{ $img := .Resources.Match (.image) }}
      <img src="{{ $img.RelPermalink }}">
      <h3>{{ .title }}</h3>
      <p>{{ .number }}</p>
    </li>
    {{ end }}
  </ul>
</div>
{{ end }}

There are several good resources about the “context” or “the mystery of the dot” out there, but the short story here is that “.Resources” will not work here.

If you do:

{{ with .Site.GetPage "accreditations/index.md" }}
$resources := .Resources
...

 {{ $img := $resources.Match (.image) }}

1 Like

Ooooh yes because the . is the range context. I totally missed that. I need to put in some time to learn Go properly.

For anyone who has a similar problem here’s my complete working solution:

{{ with .Site.GetPage "accreditations/index.md" }}
{{ $resources := .Resources }}
<div class="uk-section">
  <h2>{{ .Title }}</h2>
  {{ with .Content }}
  <p class="summary">{{- . -}}</p>
  {{ end }}

  <ul class="uk-grid-small uk-child-width-expand@s uk-text-center" uk-grid>
    {{ range .Params.accreditations }}
    <li>
      {{ with $resources.GetMatch (.image) }}
      <img src="{{ .Permalink }}">
      {{ end }}
      <h3>{{ .title }}</h3>
      <p>{{ .number }}</p>
    </li>
    {{ end }}
  </ul>
</div>
{{ end }}
1 Like