Pass a array subscript value to Jekyll include

Question

I am defining a list of images in YAML:

images:
 - image_1.png
 - image_2.png

I then later would like to use it as:

{% include image.html path=page.images[1] %}

The contents of image.html include is

{% assign image = site.data.images[include.path] %}
<figure>
  <img src="/images/{{include.path}}">
  <figcaption>
    <div>{{image.title}}</div>
    <div class="byline">{{image.artist}}</div>
  </figcaption>
</figure>

This does not work. If I assign page.images[1] to a variable I can use that. Is there a way to make this work?

Answer 1

So when I run your code I get the following error message:

Liquid Exception: Invalid syntax for include tag: path=page.images[1] Valid syntax: {% include file.ext param='value' param2='value' %} in index.html

It looks like Jekyll doesn't like the bracket notation used in the include. I've found that Jekyll is pretty fussy with this stuff and only accepts strings or liquid variables (assign, capture) with no modifiers. Not sure if this is the best fix but I always set an additional variable before the include to take care of it.

{% assign image = page.images[1] %}
{% include image.html path=image %}

If you paste that in your code it should work. Obviously its not the cleanest syntax for including an image, but it's a way to get past this quirk of Jekyll. If you are directly placing images, you could skip the front matter altogether and pass the image string 'image_2.png' .