Liquid for loop not working properly in Jekyll

Question

I'm using a liquid for loop in Jekyll 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 result into the strings /images/isitgo.png and /images/disko.png being output.
If instead I just do {{ item }}, here's 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's causing this?

Answer 1

You are getting those results because of the way liquid parses associative arrays - which is what work_left is. On each iteration you get two items: the "key" and the "value".

I warn you that in some occasions this can give you problems. Notably, the order in which the items will appear is not guaranteed - isitgo could appear after disko. (This depends on the version of ruby you are using, as far as I know).

If you want to make sure that you always get the contents of work_left in the same order, you must use list of associative arrays instead of an associative array of associative array, as you where doing. Here's how it would look:

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 appears that the item created with a for loop has to be treated as an array.

So for my case:

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

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