Jekyll - declare the image path in the front question as a variable using {{site.url}}

Question

When I use the {{ site.url }} tag for the image path inside the variable in the front question, it does not translate to HTML.

The following works fine:

 --- 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 the message, and not as a variable, it works.

Analysis of the created site shows that Jekyll does not convert the {{site.url}} tag when I use it in the image variable defined in the front question.

So the question is: how can I get Jekyll to correctly translate the image path into the front YAML field?

Answer 1

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

So, in your front, do the following:

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

And in your /post.html layout 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-line for demo purpose. You better place everything on one line.

Note. I use {{site.baseurl}} instead of {{site.url}} because if your site is not in the root of the baseurl domain it will save you from broken asset paths.

And now you have a clear separation of problems, clear pit management and user-friendly code. Cool, right?

Answer 2

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

so I changed the use of the variable inside the message:

 {{ post.img }} 

in

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

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