Range config elements based on frontmatter values (restrict shortcode based on frontmatter variable)

[idarek]

When we got [menu] and its elements specified in hugo.toml file, we can easely range them and output in spedific template using something like {{ range .Site.Menus.main }}.

I used simillar approach for custom properties but additionally wanted to limited to whats matched with post frontmatter.

The idea and working example (to best of my knowledge, what I managed to figure out).

---

[params]
 [[params.slide]]
   identifier = "drink"
   name = "Your fav drink"
   picture = "/img/drink.jpg"
   path = "https://example1.com/show-me-drinks"
 [[params.slide]]
   identifier = "meal"
   name = "Meals of the Day"
   picture = "/img/meal.jpg"
   path = "https://example2.com/meals-of-the-day"
 [[params.slide]]
   identifier = "side"
   name = "Sides in a Menu"
   picture = "/img/side.jpg"
   path = "https://example3.com/menu/sides"
 [[params.slide]]
   identifier = "dessert"
   name = "Places where I can buy desserts"
   picture = "/img/dessert.jpg"
   path = "https://example4.com/local/places/shop/for/dessert"

Having that specified, I would like to range it and return on page via shortcode.

{{< slides >}}

Content of the shortcut (working)

<div id="slides">
{{ range .Site.Params.slide }}
<div class="slide">
   <a href="{{ .path }}">
     <img src="{{ .picture | absURL }}" />
     <span>{{ .name }}</span>
   </a>
</div>
{{ end }}
</div>

This is working. This will list (range) all items from config file. This will be good for one page that contain all, but on some pages I want to display it only based on frontmatter values - limit to identifieds stated like:

---
title: "Recipe for Coconut Drink"
slides: 
 - drink
 - dessert
---

Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum 

{{% slides %}}

Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum

In such way, when there is fontmatter limit in place, only to specified identifiers, it will output only as follow:

<div id="slides">
 <div class="slide">
   <a href="https://example1.com/show-me-drinks">
     <img src="https://example.com/img/drink.jpg" />
     <span>Your fav drink</span>
   </a>
 </div>
 <div class="slide">
   <a href="https://example4.com/local/places/shop/for/dessert">
     <img src="https://example.com/img/dessert.jpg" />
     <span>Places where I can buy desserts</span>
   </a>
 </div>
</div>

I come out with something like that (it may be a bit complex unnecessarly, but its initially working)

<div id="slides">
    {{ range .Site.Params.slide }}

        {{ $siteIdentifier := .identifier }}
        {{ $siteName := .name }}
        {{ $sitePicture := .picture | absURL }}
        {{ $sitePath := .path }}
    
        {{ range $.Page.Params.slides }}
            {{ $pageIdentifier := . }}

            {{ if eq $pageIdentifier $siteIdentifier }}
                <div class="slide">
                    <a href="{{ $sitePath }}">
                        <img src="{{ $sitePicture }}" />
                        <span>{{ $siteName }}</span>
                    </a>
                </div>
            {{ end }}

        {{ end }}

    {{ end }}
</div>

Any idea to improve, correct final one will be appreciated.

---

Reference posts:

Pass variable from frontmatter to shortcode?

In my frontmatter I have an array of objects. I’d like to pass these to a shortcode that renders a “card list”. I am trying to pass the variable from the frontmatter, to the shortcode, but I’m facing errors. +++ windowTypes = [ { title="Awning Windows", img="/img/window-types/awning.svg", description="Awning windows are a type of casement window that are hinged at the top and open outward from the frame. They are generally made for openings in which the width is greater than the height. They al…

How to access frontmatter variable in shortcode

Within a shortcode I’m trying to range over an array defined in the frontmatter but get only error messages if I’m trying to access the fields. Here’s a stripped down version of the frontmatter I’m using: --- title: A demo post gallery: [ { thumbnail: thumb1.jpg, "img1.jpg" }, { thumbnail: thumb2.jpg, "img2.jpg" }, { thumbnail: thumb3.jpg, "img3.jpg" } ] --- Inside the shortcode a loop should range over gallery and create a list with thumbnails: <ul> {{ range $.Params.gallery }} …

[irkode]

approach: Use Collection with Where and In

hugo.toml

[params]
   [params.slider]
      [[params.slider.slide]]
         identifier = "drink"
         name       = "Your fav drink"
      [[params.slider.slide]]
         identifier = "meal"
         name       = "Meals of the Day"
      [[params.slider.slide]]
         identifier = "side"
         name       = "Sides in a Menu"
      [[params.slider.slide]]
         identifier = "dessert"
         name       = "Places where I can buy desserts"

Page with slide selection

---
title: Selected Slides
params:
   slides:
      - drink
      - dessert
---

{{< slides >}}

shortcode: slides.html

<h2>Use Collections</h2>

{{ $allSlides := site.Params.Slider.Slide }}
{{ $frontmatterIds := $.Page.Params.Slides }}

<h3>Selected Slides only</h3>
<ul>
   {{ with $frontmatterIds }}
      {{ range where $allSlides "identifier" "in" . }}
         <li>selected: {{ .identifier }}-{{ .name }}</li>
      {{ end }}
   {{ else }}
      {{ range $allSlides }}
         <li>all: {{ .identifier }}-{{ .name }}</li>
      {{ end }}
   {{ end }}
</ul>

[idarek]

A quick thank you.
I really like simple approach