CODEWITHSUNDEEP
htmlrubyjekyllliquid
John L. Godlee
John L. Godlee

Reputation: 601

Liquid variable inside jekyll include parameter

I have a jekyll partial in _includes which wraps a coloured div around its content. The partial (callout.html) looks like this:

<div markdown="1" class="callout">
    {{ include.content }}
</div>

And I call it in test.md like this:

{% include callout.html content="Content to be filled with a URL: {{ site.baseurl }}/img/test.png" %}

However, this causes Liquid to throw an error:

  Liquid Exception: Invalid syntax for include tag: ... 
" Valid syntax: {% include file.ext param='value' param2='value' %} in
bundler: failed to load command: jekyll (/usr/local/lib/ruby/gems/2.6.0/bin/jekyll)

I believe the issue is due to my inclusion of {{ site.baseurl }} in the content parameter.

How can I get around this restriction?

Upvotes: 1

Views: 1905

Answers (2)

Brian J
Brian J

Reputation: 11

There are a couple exceptions to this which aren't well documented.

With an {% include %}, the arguments such as the filename to be included and any variables to be included ("content" in this case) can be passed through as a reference:

{% include {{ file }} content='...' url='...' %}

Regarding the example you listed, how I would do it:

{% assign image_url = site.baseurl | append: '/img/test.png' | strip %}
{% include callout.html text='Content to be filled with a URL:' url=image_url %}

Then of course in the callout.html included file:

<div class="callout">
 {{ include.text }} {{ include.url }} 
</div>

Not sure if it's cleaner/better/faster, but I don't like mixing/matching text and variables in a content include, it just feels icky.

To add more complexity and further customization... might be a little off-topic, but it does demonstrate the true power of the include.

I do want to stress that with an include and passing variables as reference to human-entered text on the page or front matter or templating, you should always consider making the text "safe":

| strip, | uri_escape, etc are your friends:

{% if page.callout.enabled == true %}
{% assign file = 'callout.html' %}
{% assign text = 'Content to be filled with a URL: ' %}
{% assign image_url = site.baseurl | append: page.image | uri_escape | strip %}
{% include {{ file }} text=text image_url=image_url %}
{% elsif page.comments.enabled == true %}
{% assign file = 'components/comments/disqus.html' %}
{% include {{ file }} %}
{% endif %}

I specifically didn't include | strip on the text variable in this case because it would have removed the trailing space. Prefer to leave the spaces int the templating included files, rather than variables passed in this way -- they are impossible to compare and/or process after, but when separating them out into individual variables what are then passed into the include, you can.

Upvotes: 1

John L. Godlee
John L. Godlee

Reputation: 601

https://jekyllrb.com/docs/includes/#passing-parameter-variables-to-includes

I found the answer in the Jekyll documentation soon after posting.

The value of the content parameter should be stored as a variable separately before passing it to the include, using capture. For the example above:

{% capture callout_content %}
Content to be filled with a URL: {{ site.baseurl }}/img/test.png
{% endcapture %}

{% include callout.html content=callout_content %}

Upvotes: 3

Related Questions