Jekyll liquid if statement confusion

Question

I'm trying to make a if statement work according to my markdown post's liquid header where if a variable is set to true, do a thing, else and if it doesn't exist do the other thing. Just can't seem to get it to work properly.

I've tried changing the if statement to {% unless %} . trying different combos of != false and swapping the image code around.

{% capture banner %}{{ page.banner }}{{ post.banner }}{% endcapture %}
{% capture no-border %}{{ page.no-border }}{{ post.no-border }}{% endcapture %}
{% capture title %}{{ page.title }}{{ post.title }}{% endcapture %}

{% if banner != "" %}
    {% if no-border == true %}
    <img class="center no-border" src="{{ banner }}" alt="{{ title }}"/><br/>
    {% else %}
    <img class="center" src="{{ banner }}" alt="{{ title }}"/><br/>
    {% endif %}
{% endif %}

I expected to see: if no-border is set to true in markdown file liquid portion, remove border of banner image.

Answer 1

Your capture tag, without page.no-border or post.no-border , returns an empty string, which evaluates to true because all values in liquid are truthy, except for false and nil . Try this instead (or something like it) :

{% capture banner %}{{ page.banner }}{{ post.banner }}{% endcapture %}
{% capture title %}{{ page.title }}{{ post.title }}{% endcapture %}

{% if page.banner or post.banner %}
    {% if page.no-border or post.no-border %}
        <img class="center no-border" src="{{ banner }}" alt="{{ title }}"/><br/>
    {% else %}
        <img class="center" src="{{ banner }}" alt="{{ title }}"/><br/>
    {% endif %}
{% endif %}

This is all untested and you could accomplish it a few different ways.

Edit: Clarification

Detailed Explanation:

capture is a function. It evaluates whatever is inside, and stores it as a string in a variable. If the contents are nil (nothing), then it returns an empty string ( "" ).

In programming, every value is considered 'truthy' or 'falsy'. This means that (among other things) when placed in an if statement, truthy values will execute the statement and falsy values won't. Take an integer value of 1 for example; in most languages, this is a truthy value, so

if 1
  puts 'hello world'
end

will print 'hello world' to the console. nil is generally a falsy value, so

if nil
  puts 'hello world'
end

will do nothing.

Exactly which values are truthy or falsy depend on the programming language. In Liquid, everything is truthy except for nil and false . capture always returns a string, and all strings, even empty ones, are truthy.

If you write this:

{% if "" %}
<img class="center no-border" src="{{ banner }}" alt="{{ title }}"/><br/>
{% else %}
<img class="center" src="{{ banner }}" alt="{{ title }}"/><br/>
{% endif %}

You will always get the no-border version. Replace that if statement with if "true" , or if true and you will get the same result.