Pass variable from frontmatter to shortcode?


#1

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 allow for maximum ventilation without letting in rain." },
{ title="Casement Windows", img="/img/window-types/casement.svg", description="Casement windows are side-hinged with sashes that open outwards from the frame. They provide significant ventilation when open. When closed they provided maximum energy efficeny by limiting heat leakage to a minimum." },
]
+++

How do I pass this variable into a shortcode? I’ve tried the following:

{{< CardList items=windowTypes >}}

But get an error:

ERROR 2019/03/16 21:54:54 “E:\Projects\impressive\frontend\content\upvc-windows-solihull.md:23:20”: unterminated quoted string in shortcode parameter-argument: 'windowTypes >}}

Is it possible to do this at all?


#2

Perhaps this helps:


#3

I actually use this method in my theme, except in this case not possible.

I have a shortcode that produces a list of cards. Could be a list of anything tbh, but I need to pass that list into the shortcode because in this case I need to produce 3 separate lists on the page and use the shortcode 3 times. As the data to produce the list could be anything depending on the page I can’t do it in reverse order as I can’t rely on a specific variable being set in the frontmatter.


#4

The way you’re trying to do it isn’t possible.

But, you could use the param shortcode and pass it as the .Inner of another shortcode.

For example:

{{< CardList >}}
  {{< param windowTypes >}}
{{< /CardList >}}

#5

Ah, that’s a bit unfortunate. It’s something I think would be a very useful feature for passing arrays into short codes from markdown frontmatter.

In the end I created a shortcode as a wrapper, and a CardListItem that is the card/list item. It does the job:

{{< CardList title="" description="" >}}
    {{< CardListItem title="" description="" img="" >}}
    {{< CardListItem title="" description="" img="" >}}
    {{< CardListItem title="" description="" img="" >}}
{{< /CardList >}}