if and else Template Filters

The if and else template filters are provided to enable conditional attribute values with the ... attribute template tag:

<div {% ... class="class1"|if:variable_name|else:"class2" %}>

The if and else template filters are automatically available in your components' templates, in other templates be sure to {% load tetra %}.

if Filter

When the value of the right hand argument evaluates to True it returns the value of its left hand argument. When the value of the right hand argument evaluates to False it returns an empty string "" (a falsy value).

So when setting a class:

<div {% ... class="class1"|if:my_var %}>

if my_var=True you will generate this HTML:

<div class="class1">

if it's False then you will receive this:

<div class="">

else Filter

When the value of the left hand argument evaluates to True it returns the value of its left hand argument. When the value of the left hand argument evaluates to False (such as an empty string "") it returns the value of its right hand argument.

So with this:

<div {% ... data-something=context_var|else:"Default Value" %}>

If context_var="Some 'Truthy' String" then you will generate this HTML:

<div data-something="Some 'Truthy' String">

if it's False then you will receive this:

<div data-something="Default Value">

Chaining

if and else can be chained together, so with this:

<div {% ... class="class1"|if:variable_name|else:"class2" %}>

If variable_name="A 'Truthy' Value" then you will generate this HTML:

<div class="class1">

if it's False then you will receive this:

<div class="class2">

It is possible to further chain the the filters such as:

<div {% ... class="class1"|if:variable1|else:"class2"|if:variable2|else:"class3" %}>