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?
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 %}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With