Using variables in Jekylls Front Matter

Question

I have created a data file with images which I use normally for posts.

ImageKey:
  - url: "/assets/logos/Image.png"
    title: "Image Title"

Now I want to use this image paths in my post headers.

---
layout: page
image:
 - site.data.images.ImageKey
---

And my HTML looks like

{% for image in page.images %}
            <div>
                <div class="img-thumbnail">
                    <img class="img-responsive" src="{{site.baseurl}}{{image.url}}" alt="{{image.title}}">
                </div>
            </div>
{% endfor %}

But anything is wrong here. There will no picture be rendered.

It works if I use values in the fronter matter directly.

---
layout: page
image:
 - url: "..."
   title: "..."
---

Okay. I thought that is a problem. Then I will use grunt to provide that. — PeterLiguda
@PeterLiguda - David Jacquel is 100% correct (as always!). But if your question is: Is there a way to reference an item in a data file for use in a post or page and using the post's or page's front matter? You can. If you update your question I would be happy to respond showing how. — TBB
@TBB I want create a collection of images which i can use in several posts. Also the image should have a title (copyright information). I do not want to update all by text replace. Now I use grunt and assemble to use string replace with grunt automatism. — PeterLiguda
@PeterLiguda I have posted an answer. If this is correct, can you please edit your question to something more appropriate like: "Jekyll > Referencing image data file items from within content or front matter"? — TBB

PeterLiguda PeterLiguda · Accepted Answer · 2016-06-01T20:14:42

I have the problem / request solved.

My _data\images.yml looks like

Image_Key_Name
  url: /assets/file.png
  alt: ....
  title: ....
  copyright: ....

My _posts\postXYZ.md

---
layout: post
author: Ben

titleImages:
  - Image_Key_ Name
  - Another_Image_Key_Name

abc...
---

And my _layouts\post.html

now iterates over the keys and uses them as array index.

<div class="title-images">
  {% for titleImageKey in page.titleImages %}
  {% assign titleImage = site.data.images[titleImageKey] %}
  <img src="{{site.baseurl}}{{titleImage.url}}" alt="{{titleImage.title}}" />
  {% endfor %}

That's it!

Using variables in Jekylls Front Matter

1 Answers