Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using variables in Jekylls Front Matter

Tags:

jekyll

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: "..."
---
like image 525
PeterLiguda Avatar asked May 29 '16 17:05

PeterLiguda


1 Answers

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!

like image 162
PeterLiguda Avatar answered Nov 15 '22 08:11

PeterLiguda