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 }}