CODEWITHSUNDEEP
yamljekyllliquid
Romain
Romain

Reputation: 103

Jekyll YAML file with nested elements

I would like to access to nested element in my "benefit.yml" file and call those element with a loop. But it doesn't work and nothing show up.

Here my "benefit.yml":

locales:
  en:
    title: "Games"
    detail: "To relax and take breaks during the day, we play football, table tennis and Xbox"
    icon: benefit1.png
  fr:
    title: "Jeux"
    detail: "To relax and take breaks during the day, we play football, table tennis and Xbox"
    icon: benefit1.png

  en:
    title: "Drink"
    detail: "The fridge is full of beer cans and Coca-Cola, Ice Tea and coffee. You can drink whatever makes you happy, all day!"
    icon: benefit2.png
  fr:
    title: "Boissons"
    detail: "The fridge is full of beer cans and Coca-Cola, Ice Tea and coffee. You can drink whatever makes you happy, all day!"
    icon: benefit2.png

And here is my loop:

  {% for benefit in site.data.benefits.locales.en %}
    <div class="s-column6">
      <div class="kiwup-benefit pb1 mb1">
        <img src="/image/benefit/{{ benefit.icon }}" alt="kiwuper">
        <div class="kiwup-benefit-info">
          <h3 class="h4-like text-dark">{{ benefit.title }}</h3>
          <p>{{ benefit.detail }}</p>
        </div>
      </div>
    </div>
  {% endfor %}

Upvotes: 2

Views: 1248

Answers (1)

David Jacquel
David Jacquel

Reputation: 52789

1. your datas file is wrong you have overlapping entries for locales.en and locales.fr. Correct nesting can be :

locales:

games:
  en:
    title: "Games"
    detail: "To relax and take breaks during the day, we play football, table tennis and Xbox"
    icon: benefit1.png
  fr:
    title: "Jeux"
    detail: "To relax and take breaks during the day, we play football, table tennis and Xbox"
    icon: benefit1.png

drink:
  en:
    title: "Drink"
    detail: "The fridge is full of beer cans and Coca-Cola, Ice Tea and coffee. You can drink whatever makes you happy, all day!"
    icon: benefit2.png
  fr:
    title: "Boissons"
    detail: "The fridge is full of beer cans and Coca-Cola, Ice Tea and coffee. You can drink whatever makes you happy, all day!"
    icon: benefit2.png

2. Data file name

If your data file name is benefit.yml you access your datas with site.data.benefit.locales.drink

3. Your loop is wrong

Then looping over gives you something like :

benefit = Array
["en",{"title"=>"Drink", "detail"=>"The fridg...!", "icon"=>"benefit2.png"}]

where benefit[0] = en and benefit[1] = hash{"title"=>"Drink", "detail"=>"The fridg...!", "icon"=>"benefit2.png"}

If you want to access datas here you can do {{ benefit[1].title }}

Complete code for games locales :

{% for benefit in site.data.benefit.locales.games %}
<div class="s-column6">
  <div class="kiwup-benefit pb1 mb1">
    <img src="/image/benefit/{{ benefit[1].icon }}" alt="kiwuper">
    <div class="kiwup-benefit-info">
      <h3 class="h4-like text-dark">{{ benefit[1].title }}</h3>
      <p>{{ benefit[1].detail }}</p>
    </div>
  </div>
</div>
{% endfor %}

Upvotes: 6

Related Questions