CODEWITHSUNDEEP
jekyll
orschiro
orschiro

Reputation: 21725

Jekyll: site.url not interpreted in include tag

I am using the following include tag in my posts:

{% include image.html url="{{ site.url }}/files/image.png" description="Figure 1.  image description." %}

The included image.html looks as follows:

<figure>
  <img src="{{ include.url }}" alt="{{ include.description }}">
  <figcaption>{{ include.description }}</figcaption>
</figure>

In _config.yml I use url: "http://domain.com".

However, when serving my Jekyll blog, {{ site.url }} is not interpreted, resulting in:

<figure>
  <img src="{{ site.url }}/files/image.png" alt="Figure 1.  image description.">
  <figcaption>Figure 1.  image description.</figcaption>
</figure>

Can anyone tell me why interpretation does not work in this case?

Upvotes: 1

Views: 360

Answers (2)

Christian Specht
Christian Specht

Reputation: 36421

First possible solution:

(if your Jekyll site is at the root of the domain)

You don't need to use {{ site.url }} at all.

Technically, if the HTML is on a page somewhere at http://domain.com,

<img src="/files/image.png">

is the same as

<img src="http://domain.com/files/image.png">

Second possible solution:

(if your Jekyll site root is in a subdirectory like http://domain.com/jekyll/, so you can't just use /files/image.png)

Don't pass {{ site.url }} from your actual pages to the include. Prepend it inside the include instead:

{% include image.html url="/files/image.png" description="Figure 1.  image description." %}

and then

<figure>
  <img src="{{ site.url }}{{ include.url }}" alt="{{ include.description }}">
  <figcaption>{{ include.description }}</figcaption>
</figure>

If you want to display images from external URLs as well, you can't just slap {{ site.url }} in front of every image URL.
In this case, you could check if the image URL begins with / and only prepend {{ site.url }} when this is the case:

<figure>
  {% assign tmp = include.url | truncate: 1, '' %}
  <img src="{% if tmp == '/' %}{{ site.url }}{% endif %}{{ include.url }}" alt="{{ include.description }}">
  <figcaption>{{ include.description }}</figcaption>
</figure>

Upvotes: 0

David Jacquel
David Jacquel

Reputation: 52799

To use relative url

{% capture imgFullUrl %}{{ site.url }}{{ site.baseurl }}/files/image.png{% endcapture %}
{% include img.html url=imgFullUrl description="Figure 1.  image description." %}

To use full url

{% capture imgRelativeUrl %}{{ site.baseurl }}/files/image.png{% endcapture %}
{% include img.html url=imgRelativeUrl description="Figure 1.  image description." %}

Upvotes: 1

Related Questions