Liquid Tags
As in most programming languages, you can control the logic of Liquid using tags. We currently support the following tags:
if/else/unless
An if-statement lets you define output based on a conditional expression. It checks whether an expression is true, and if this is the case, everything between the if and endif statements is evaluated.
Let's say we are working with a layout block showing thumbnails of videos, and we want to check the number of photo-objects available in the photos-array and output that number, if it is greater than zero. The if-statement allows us to do just that:
{% if photos__length > 0 %}
<p>Number of photo-objects in array: {{photos__length}</p>
{% endif %}
The else tag lets us specify what should be output, if the condition is false:
{% if photos__length > 0 %}
<p>Number of photo-objects in array: {{photos__length}}</p>
{% else %}
<p>The array is empty</p>
{% endif %}
The unless tag is the opposite of the if tag. It evaluates a conditional statement, and only if the statement is false does it output the content between the unless and endunless tags:
{% unless photos__length == 0 %}
<p>The array is not empty</p>
{% endunless %}
for
You can use for-loops with the for tag that lets you iterate through arrays, i.e. the photos-array in a thumbnail layout-block. You define the name of a variable that for each iteration will be a reference to a new object in the specified array. If we want to output the title of each video in the photos-array, we could do the following:
{% for photo in photos %}
The title of this video is {{photo.title}}
{% endfor %}
While iterating through an array, the forloop object provides several helper variables:
Variable name | Value |
---|
forloop.length | Number of items in the array |
forloop.index | Index of the current iteration |
forloop.rindex | Number of remaining items in the array |
forloop.first | true if this is the first iteration |
forloop.last | true if this is the last iteration |
case
The case tag lets you evaluate a statement or variable and define different output based on its value. This is especially useful, if there is more than two different values the statement or variable can possibly contain (otherwise you might aswell use the if tag). Let's say we have set up a tag-cloud consisting of 5 tags, and we want two of those tags, "tag3" and "tag4", to each have their own color, red and green, respectively. We want to achieve this by adding an extra class to each of the links containing those tags, so that we afterwards can style them using CSS. In the tag cloud layout block, the following lines output the tags:
{% for tag in tags %}
<a id="item_{{forloop.index}}"
href="{{site.site_url}}/tag/{{tag.tag_url}}"
style="font-size:{{tag.fontsize}}px; text-decoration:none;"
class="one-tag">
{{tag.display_tag}}
</a>
{% endfor %}
By using the case tag, we can differentiate how the tag is output to the browser:
{% for tag in tags %}
{% case tag.display_tag %}
{% when "tag3 %}
<a id="item_{{forloop.index}}"
href="{{site.site_url}}/tag/{{tag.tag_url}}"
style="font-size:{{tag.fontsize}}px; text-decoration:none;"
class="one-tag red-tag">
{{tag.display_tag}}
</a>
{% when "tag4" %}
<a id="item_{{forloop.index}}"
href="{{site.site_url}}/tag/{{tag.tag_url}}"
style="font-size:{{tag.fontsize}}px; text-decoration:none;"
class="one-tag green-tag">
{{tag.display_tag}}
</a>
{% else %}
<a id="item_{{forloop.index}}"
href="{{site.site_url}}/tag/{{tag.tag_url}}"
style="font-size:{{tag.fontsize}}px; text-decoration:none;"
class="one-tag">
{{tag.display_tag}}
</a>
{% endcase %}
{% endfor %}
Now, tag3 and tag4 have an extra class (either "red-tag" or "green-tag") and all other tags will just be output normally.
comment
If you want to insert comments to explain the code you have written, you can use the comment tag. As in other programming languages, everything enclosed by the comment and endcomment tag is ignored and will not be output to the videosite's HTML.
{% comment %}This is a comment and will not be shown on the videosite{% endcomment %}
variable assignment
You can assign values to your own variables to be used in output or other Liquid tags. You can store values of the types string, integer, or boolean using the assign tag:
{% assign message = "Hello, World!"}
{% assign showMessage = true %}
{% if showMessage == true %}
{{message}}
{% end if %}