Trying to use a front matter element in a liquid {% for %} loop

[bobmonsour]

I have the following front matter in an html file:

---
layout: default
title: Fausto Bellino Tasca | Montecito
permalink: "/montecito.html"
imageSet: "montecito"
---

In the body of the html, I have the following:

{% for image-info in galleries.{{ imageSet }} %}
  <li class="splide__slide">
    <img src="/images/{{ imageSet }}/{{ image-info.filename }}" alt="{{ image-info.caption }}">
    <div class="main-slider-caption">
      {{ image-info.caption }}
    </div>
  </li>
{% endfor %}

The front matter reference {{ imageSet }} within the img tag works fine, but when I attempt to use it in the for loop, eleventy throws an error with the following:

`TemplateContentRenderError` was thrown
> Having trouble compiling template ./src/montecito.html

`TemplateContentCompileError` was thrown
> illegal tag: {% for image-info in galleries.{{ imageSet }} %}, file:./src/montecito.html, line:11

`ParseError` was thrown
> illegal tag: {% for image-info in galleries.{{ imageSet }} %}

`AssertionError` was thrown:
    AssertionError: illegal tag: {% for image-info in galleries.{{ imageSet }} %}

There is additional error info, noting the liquid js files that threw the error.

When I simply replace the {{ imageSet }} in the for loop with the text itself, i.e., 'montecito' in this case, it works fine.

Any thoughts would be welcome as I've got a lot of pages that will look like this and I'd like to make a shortcode out of this and pass in the front matter item.

Thanks.

[pdehaan]

Try galleries[imageSet] syntax.

[bobmonsour]

That worked! Thanks, @pdehaan!

Is there somewhere you can point me to that explains why that works? Is it because galleries is a json data file?

[pdehaan]

Excellent question. I don't see anything specifically in the liquidjs or eleventy docs that specifically mentions dynamically accessing properties, although not sure if this helps: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

[bobmonsour]

Thanks again, Peter. I'm guessing that given the structure of the json file, the array reference syntax makes some sense.

[edwardhorsford]

I know this as square bracket notation - which you need to use when you want to populate with a dynamic variable. Where the one you used was dot notation - but also wrapped in nunjucks syntax which was invalid - as you were already inside a nunjucks block.

[bobmonsour]

Thanks, @edwardhorsford. I also realized that I didn't even need to use front matter for the variable I wanted. page.fileSlug represented the variable that I needed. And yes, I now realize that I needed to use bracket notation even for that.