Loop fluid not working properly in Jekyll

Question

I am using Jekyll's looping fluid to display page content based on this YAML structure:

work_left: isitgo: image: /images/isitgo.png caption: isitgoonair.net homepage description: a website disko: image: /images/disko.png caption: Disko description: a website work_right: qfi: image: /images/qfi.png caption: qfi.im description: a website 

This is the for loop:

 {% for item in page.work_left %} {{ item.image }} {% endfor %} 

item.image will not output the lines /images/isitgo.png and /images/disko.png .
If instead I just do {{ item }} , here is the result:

 isitgo { "image"=>"/images/isitgo.png", "caption"=>"isitgoonair.net homepage", "description"=>"an awesome website i made" } disko { "image"=>"/images/disko.png", "caption"=>"Disko", "description"=>"that site" } 

What causes this?

Answer 1

You get these results due to the way the fluid parses associative arrays, which is work_left . At each iteration, you get two elements: "key" and "value".

I warn you that in some cases this may give you problems. It is noteworthy that the order in which items will be displayed is not guaranteed - isitgo may appear after disko. (It depends on the version of ruby ​​you are using, as far as I know).

If you want you to always get the contents of work_left in the same order, you should use a list of associative arrays instead of an associative array of an associative array, as you do. Here's what it would look like:

 work_left: - name: isitgo image: /images/isitgo.png caption: isitgoonair.net homepage description: a website - name: disko image: /images/disko.png caption: Disko description: a website work_right: - name: qfi image: /images/qfi.png caption: qfi.im description: a website 

Then the code to print them:

 {% for item in page.work_left %} {{ item.name }} {{ item.image }} {% endfor %} 

Answer 2

It seems that an element created with a for loop should be treated as an array.

So for my case:

 {% for item in page.work_left %} {{ item[0] }} {% endfor %} 

Print the first element of the returned (2-element) array, which is a string: isitgo disko . {{ item[1].image }} will gain access to the .image property of the second element of the returned array, a variable, and it will display /images/isitgo.png /images/disko.png .