Jekyll - declare image path in front matter as variable using {{ site.url }}

Question

When I use the {{ site.url }} tag for an image path inside a variable in the front matter, it doesn't get translated into HTML.

The following works perfectly:

---
layout: post
title: chickpea
img: <img class="caption__media" data-interchange="[../asset/img/chickpea-small.jpg (small)], [../asset/img/chickpea-medium.jpg, (medium)], [../asset/img/chickpea-large.jpg, (large)]">
---

This does NOT work:

---
layout: post
title: chickpea
img: <img class="caption__media" data-interchange="[{{site.url}}/asset/img/chickpea-small.jpg (small)], [{{site.url}}/asset/img/chickpea-medium.jpg, (medium)], [{{site.url}}/asset/img/chickpea-large.jpg, (large)]">
---

But when I use the same image link with the {{site.url}} tag inside a post and not as a variable, it works.

Analysing the generated site shows that Jekyll doesn't convert the {{site.url}} tag when I use it in the image variable defined in the front matter.

So the question is: How can I get Jekyll to translate the image path in the YAML front matter correctly?

score 23 · Accepted Answer · answered Aug 14 '14 at 04:48

23

You're mixing data and template in the yaml. Your image tag (which is a template) will be duplicated in all your posts. But the only thing you need here are your image urls.

So, in your yaml front matter, do :

---
layout: post
title: chickpea
img:
  small:  chickpea-small.jpg
  medium: chickpea-medium.jpg
  large:  chickpea-large.jpg
---

And in your layout/post.html you can add :

{% if page.img %}
  <img class="caption__media" data-interchange="
  {% for img in page.img %}
    [{{site.baseurl}}/asset/img/{{img[1]}} ({{img[0]}})]
    {% unless forloop.last %}, {% endunless %}
  {% endfor %}
  ">
{% endif %}

this code is multi-lines for demo purpose. You'd better put all on one line.

Note: I'm using {{site.baseurl}} instead of {{site.url}} because if your site is not at the root of a domain baseurl will save you from broken assets paths.

And now you have a clean separation of concerns, clear yaml front matter and maintainable code. Cool isn't it ?

answered Aug 14 '14 at 04:48

David Jacquel

51,670
6
121
147

works perfect! the only thing i had to edit is i had to change "post" to "page". how does this array-kind-of adressing of the image in yaml work? that you adress the first part with img[0] and the second behind the colon with img[1] ? i cant find any documentation on that :( – Vin Banton Aug 14 '14 at 08:56
Liquid documentation https://github.com/Shopify/liquid/wiki/Liquid-for-Designers#for-loops – David Jacquel Aug 14 '14 at 09:58
When i use your recommended code in the post layout, it works perfectly fine. When i use it _inside a post_, it seems jekyll doesnt generate the html. the link-text is displayed 1:1 instead of the corresponding image. any clue? i tried putting it into a div with markdown="1" but that doesnt work. :( – Vin Banton Aug 15 '14 at 08:19
I now outsourced the image code to the layout file -> less code and cleaner posts :) Anyway the question resides: why doesnt jekyll generate html out of the same code when its inside a post? – Vin Banton Aug 15 '14 at 08:38
1

Code needs to be all on one line : **** – David Jacquel Aug 15 '14 at 13:39

score 3 · Answer 2 · edited May 23 '17 at 12:34

3

I just solved the problem using this technique: Include jekyll / liquid template data in a YAML variable?

therefore i changed the use of the variable inside the post from:

{{ post.img }}

to:

{{ post.img | replace: '..', site.url }}

I hope this helps someone with the same problem. :)

edited May 23 '17 at 12:34

Community

1
1

answered Aug 13 '14 at 20:58

Vin Banton

365
1
3
16

Jekyll - declare image path in front matter as variable using {{ site.url }}

2 Answers2

Linked