Skip to main content

Conditional Logic & Loops

Templates can be pretty powerful. They give you the ability to make your site dynamic, allowing what is displayed to change based upon user interaction, content, and other factors.

Conditional Logic

There may be instances where you want to display a block of content within a template only if certain conditions are met or not met. This is where <r:if> and <r:if_not> come in handy. These tags work by taking two inputs and comparing them using a given operator. If the comparison is true, <r:if> will render its block of content. If you would like to display the block of content when the comparison is false, you would use <r:if_not>.

CleanSlate Theme Development Tutorial Series
Video #24 - If/conditional statements

For example, let's say you want to display a block of content only if the name of the current page is named "Special".

<r:if value1="{page:name}" value2="Special" operator="=">
  <strong>This is a special page!!!</strong>
</r:if>

The same thing could be done with a little less typing:

<r:if v1="{page:name}" v2="Special" op="=">
  <strong>This is a special page!!!</strong>
</r:if>

Now suppose we only want to show a piece of content between a very specific time frame each day:

<r:if v1="now" v2="8:00 AM" op=">" type="Date">
  <r:if v1="now" v2="5:00 PM" op="<" type="Date">
     <strong>Displayed between 8 AM and 5 PM daily.</strong>
  </r:if>
</r:if>

Notice that, in the example above, we set type="Date" in the <r:if> tags. This tells the system to treat the values being compared as dates instead of strings, which is the default. If the values should be treated as numbers, you would need to specify type="Number".

Also keep in mind, for the time based example above, that the system may cache page content for a short time, typically around 10-15 minutes, so you may not see the expected result immediately.

NOTE: Variable names in <r:if> statements must not contain minus (-) characters. Replace minus characters with underscores ( _) or camelCase variable names.

Read the documentation on r:if and r:if_not for more information.

Loops

CleanSlate Theme Development Tutorial Series
Video #20 - Loops in CleanSlate

If you have a block of content that you need to repeat several times, <r:loop> can be used instead of manually copying & pasting repeatedly. You can loop over a list of items, given by a delimited string, a range of integers, or a set number of iterations. The items to be looped over can come from various places, such as page content, page attributes, custom page attributes, or even the URL.

<r:loop items="foo,bar,baz">
<p>Item Count: <r:item_count /></p>
<r:each>
    <p><r:item /></p>
  </r:each>
</r:loop>

Read the documentation on r:loop for more information.

Templates can be pretty powerful. They give you the ability to make your site dynamic, allowing what is displayed to change based upon user interaction, content, and other factors.

Conditional Logic

There may be instances where you want to display a block of content within a template only if certain conditions are met or not met. This is where {% if %} and {% unless %} come in handy. These tags work by taking two inputs and comparing them using a given operator. If the comparison is true, {% if %} will render its block of content. If you would like to display the block of content when the comparison is false, you would use {% unless %} or the doesn't equal (!=) operator.

For example, let's say you want to display a block of content only if the name of the current page is named "Special":

{% if page.name == "Special" %}
  This is a special page!!!
{% endif %}

Now suppose we only want to show a piece of content between a very specific time frame each day:

{% assign now = 'now' | to_time %}
{% assign t1 = '8:00 AM' | to_time %}
{% assign t2 = '5:00 PM' | to_time %}
{% if now > t1 and now < t2 %}
  <strong>Displayed between 8 AM and 5 PM daily.</strong>
{% else %}

Notice that, in the example above, we set | to_time in the variables via assign. This tells the system to treat the values being compared as dates instead of strings. If the values should be treated as numbers, you would need to specify | floor.

Also keep in mind, for the time based example above, that the system may cache page content for a short time, typically around 10-15 minutes, so you may not see the expected result immediately.

NOTE: Variable names in {% if %} statements must not contain minus (-) characters. Replace minus characters with underscores (_) or camelCase variable names to avoid unintended math operations.

Complex control flow operators

Unlike Radius, Liquid supports complex control flow operators like:

  • if
  • else
  • elseif
  • unless
  • case
  • when

These can come in handy and simplify your control flow compared to doing the same operations in Radius. For example:

{% if page.name == "Bears" %}
  We love bears!
{% else %}
  No bears here.
{% endif %}

Read the Tag Documentation for Conditional Logic on this site or go to the official Liquid documentation for control flow for more information.

Loops

If you have a block of content that you need to repeat several times, loops can be used instead of manually copying & pasting repeatedly. You can loop over a list of items, given by a delimited string, a range of integers, or a set number of iterations. The items to be looped over can come from various places, such as page content, page attributes, custom page attributes, or even the URL.

{% assign items = "foo,bar,baz" | split: "," %}
<p>Item Count: {{ items.size }}</p>
{% for item in items %}
   <p>{{ item }} {{ forloop.index }}</p>
{% endfor %}

Read the Tag Documentation for Loops or see what attributes/methods are available inside the forloop object.

Last updated on March 15, 2021.

We welcome all questions, feedback and bug reports. If you're having an issue, we usually need the following information:

  • A brief description of the issue
  • A link to the page where you saw the issue
  • Screenshots that illustrate the problem - How do I take a screenshot?

Kindly email CleanSlate@mail.wvu.edu for help or use the form on the request help page.