Twig Code Blocks - Conditions

Objectives
  • Create basic conditional statements in Twig.
  • Create conditional statements with multiple branches / execution paths in Twig.
Prerequisites
  • Working with {{ }} and {% %} tags.
  • Working with conditional operators in Twig.
  • Basic programming concepts (variables (particularly booleans), operators)
Last revision:

Overview

There are several ways to express conditions, from basic to more complex:


if some condition is (not) true → do something.

 

if some condition is (not) true → do something
 else → do a different thing.

 

if some condition is (not) true → do something
 else, if some other condition is (not) true → do a different thing
 else,  if some other condition is (not) true → do another different thing
 ...
 else → do the thing you want to do if all the conditions are evaluated as false.

Twig tags

You can write conditional statements like these in Twig code blocks using the following tags:

  • {% if %}
  • {% else %}
  • {% elseif %}
  • {% endif %}

Examples

Example 1

If a variable is false, print something.

{% if site_online == false %}
   <p>Our website is in maintenance mode. Please come back later.</p>
{% endif %}

Shorter syntax:

{% if not site_online == true %}
   <p>Our website is in maintenance mode. Please come back later.</p>
{% endif %}

Even shorter:

{% if not site_online %}
   <p>Our website is in maintenance mode. Please come back later.</p>
{% endif %}


Example 2

Combining two conditions and providing an alternative execution path.

{% if age < 18 and parental_consent == false %}
   <p>Sorry, you're not allowed to use our site. Please come back when you're older.</p>
{% else %}
 <p>Welcome! Glad you could join us.</p>
{% endif %}


Example 3

Combining conditions and providing multiple alternative execution paths:

{% set age = 15 %}
{% set has_permission = true %}

{# Scope:
 - Grant access to adults.
 - Grant access to people aged 16 to 18 if they have permission.
 - Deny access with specific message to 16-18 year olds if no permission.
 - Deny access with other specific message to 12-16 year olds.
 - Deny access to everyone else.
#}

{% if age >= 18 %}
Access granted.
{% elseif age >= 16 and age < 18 and has_permission == true %}
Access granted.
{% elseif age >= 16 and age < 18 and has_permission == false %}
Access denied, but if you get permission, access will be granted.
{% elseif age >= 12 and age < 16 %}
You are a bit too young. Please come back in a few years.
{% else %}
Access denied
{% endif %}

Switch statements?

PHP lets you use switch statements that offer a more readable alternative to long and complex if-elseif-elseif-elseif-else statements.

Though some documentation sites mention that Twig supports this syntax, at the time of writing Twig itself does NOT support switch statements. However, this syntax is available via third-party Twig plugins. 

Activity 1A

A Twig template receives three variables:

  • number
  • message_less (string)
  • message_greater (string)

If the number is less than 10, show message_less. 

If the number is greater than 10, show message_greater.

The message should read "Number is smaller than 10" or "Number is greater than 10".

Tip: Use the less than (<) and/or greater than (>) operators to test the value of number.

Use Twig Playground to set up and test this scenario.

Answer / solution

Twig template:

{% if number < 10 %}
<p>{{ message_less }}</p>
{% else %}
<p>{{ message_greater }}</p>
{% endif %}

PHP variables:

$number = 5;
$message_less = 'Number is less than 10.';
$message_greater = 'Number is greater than 10.';

Activity 1B

Let's improve the code from Activity 1A.

Both messages should now include the number that is being tested, without changing the Twig template code.

Example output:

42 is greater than 10.
Hints

You are instructed not to change the template code. The only things left that you can change are the values of the variables injected into the template.

Answer / solution

Twig template:

No changes from 1A.

PHP variables:

$number = 42;
$message_less = $number . ' is less than 10';
$message_greater = $number . ' is greater than 10.';

Activity 1C

Starting again from Activity 1A, improve the code to achieve the same result as requested in Activity 1B, but this time:

  • change the template code and use the number variable to print the value you are testing
  • change the PHP variables code so the message variables contain " is greater than 10" and " is less than 10"

The output should still be:

42 is greater than 10.
Answer / solution

Twig template:

{% if number < 10 %}
<p>{{ number }}{{ message_less }}</p>
{% else %}
<p>{{ number}}{{ message_greater }}</p>
{% endif %}

PHP variables:

$number = 42;
$message_less = ' is less than 10';
$message_greater = ' is greater than 10.';

Activity 1D

Recreate the logic and output from Activity 1C, but this time the Twig template should not contain any logic or expressions. The template should only contain HTML and Twig variables. All conditional message logic should happen in PHP.

The output should still be:

42 is greater than 10.
Answer / solution

Twig template:

{{ message }}

PHP variables:

$number = 42;

if ($number < 10) {
  $message = $number . " is less than 10.";
}
else {
  $message = $number . " is greater than 10.";
}

Summary

  • Use {% if %}, {% else %}, {% elseif %}, and {% endif %} to apply conditional logic.
  • Use and and or to combine conditions.