Liquid Template - Unable To Modify Jekyll Carousel Script

Question

I'm using the Jekyll framework and using the official Carousel script from their website (https://jekyllcodex.org/without-plugin/slider/) and I'm struggling to figure out how to make it possible to pass a name to the carousel.html script so that I can setup multiple carousels using the same script. My goal is to be able to just use:

 {% include carousel.html name="CatImages" height="20" unit="%" duration="7" %}

and it should be able to simply receive the images from a carousel.yml file that looks similar to: `

CatImages: 
  - /assets/img/cat1.png
  - /assets/img/cat2.png

I've tried to append the string to the variable name, which works but gives me a slightly different output - one that I can't figure out the type of. The resulting variable coming from

{{site.data.carousel.{{ include.name }}}}

returns {"CatImages"=>["/assets/img/cat1.png", "/assets/img/cat2.png"]} and when running through the for loops it returns the image paths as one whole string. For example, this:

 {% for item in images %}
            {{item}}           
 {% endfor %}

returns:

images/assets/img/cat1.png/assets/img/cat2.png

But overall, I don't understand what the variable is and I can't figure it out from googling. I'm new to Liquid templates, but for the life of me I can't figure out what the {""=>["",""]} notation is.

Any pointers or tips would be greatly appreciated!

Answer 1

I figured it out! It's pretty obvious now and I've learned a ton on the way (like I'm actually using Liquid and not Django).

My issues was that I was trying to do:

{{site.data.carousel.{{ include.name }}}}

But instead all I had to do was:

{{site.data.carousel[include.name]}}