How to use Twig

The complete Twig documentation can be found here: https://twig.symfony.com/

Using Twig

If you want to retrieve values of a contact or variable, use the double bracket

"{{value}}"

to open and close:

{{contact.firstname}}, {{block.text.value}}

An often used function is the default function that sets a certain value if the field is empty:

{{contact.firstname|default('klant')}}

If you want to create dependencies, use the bracket and percent to open and close:

"{% if statement %}"

Retrieving variables in your template or block with Twig

When you are creating a template or block, you can also add variables for customers. When the customer, for example, wants to be able to edit their mailing title, you have to add a variable in your template ("mailing title"), and retrieve the filled in content in your HTML.

Adding a variable

When you are working on an HTML template or block template, you can add a variable by clicking on "+ add variable". After you added one, you can fill in the following items:

1. The name of the variable that you will use to retrieve in the HTML (contains only letters and numbers). NOTE: the variables are case-sensitive.
2. The type of input field that the client will see, you can choose from the list on the next page.
3. The title of the variable that the client will see.
4. Add the variable to your template or block with the TWIG code. The structure is as following:

{{block/layout/template.variableName.kindOfVariable}}

The first one depends on what you are working on. Are you working in the template, then it will be:

{{template.variableName.kindOfVariable}}

 If you are working in a block:

 {{block.variableName.kindOfVariable}}

The second one depends on the name of the value that you filled in.

The third one depends on what kind of variable you’ve picked.

Variable Twig combinations

{{block.variable.align}}

 {{block.variable.borderStyle}}

 {{block.variable.borderColor}}

{{block.variable.value}}

{{block.variable.value}}

{{block.variable.value}}

{{block.variable.family}}

{{block.variable.size}}

 {{block.variable.lineHeight}}

{{block.variable.Color}}

{{block.variable.style}}

{{block.variable.url}}

{{block.variable.text}}

{{block.variable.title}}

{{block.variable.src}}

{{block.variable.alt}}

{{block.variable.width}}

{{block.variable.height}}

{{block.variable.align}}

{{block.variable.width}}

{{block.variable.margin}}

{{block.variable.paddingTop}}

{{block.variable.paddingBottom}}

{{block.variable.paddingLeft}}

{{block.variable.paddingRight}}

{{block.variable.value}}

{{block.variable.width}}

{{block.variable.style}}

{{block.variable.color}}

{{block.variable.align}}

{{block.variable.value}}

{{block.variable.value}}

{{block.variable.value|raw}}

{{block.variable.regions.region_1}}

{{block.variable.regions.region_2}}

{{block.variable.value}}

{{block.variable.value}}

Retrieving contact data in your template/blocks

It is also possible to retrieve data of a contact into your template or block. If, for example, you want to retrieve the first name of a contact, you can retrieve it with

{{contact.firstname}}

The “contact.” part means you are referring to a contact, the second part is a database field that you want to retrieve. This can be any database field. You can also use contact.id for the ID (for the example contact this is contact.id == '1').

Commonly used Twig functions

With Twig, it is possible to build various functions to add to your HTML code. For example, to show or hide content, get dates, filter values, trim values and so on. The most used functions are described below:

Show or hide pieces of your HTML code if a variable is filled or empty

You have a piece of code as shown below, but when the title is not filled, you want to hide the surrounding row, so the text below the title will be in the place of the title. You add the following code, so that the HTML within the IF statement will hide when it is empty:

{% if block.title.value is not empty %}
<tr>
  <td>
    {{ block.title.value }}
  </td>
</tr>
{% endif %}
<tr>
  <td>
     {{ block.text.value|raw }}
  </td>
</tr>

Show or hide something when a value is the same as

Occasionally, you want something to happen when a value of a dropdown or radio field is a specific kind of value. For example, when the value of a dropdown is “Red”, then the text color needs to be red:

<tr>
  <td style="{% if block.color.value == ‘Red’ %} color:#ff0000;"
             {% else %} color:#000000;
             {% endif %}">
    {{ block.title.value }}
  </td>
</tr>

Set a value to retrieve more items in the code

If you want to set a value, for example, you have many titles in your block or template, and you wish to change the font-size of the title in only 1 place, you can set the font size and retrieve it in the code:

{% set titleSize = '20px' %}
<tr>
  <td style="font-size: {{titleSize}}">
    {{block.title1.value}}
  </td>
</tr>
<tr>
  <td style="font-size: {{titleSize}}">
    {{block.title2.value}}
  </td>
</tr>

SkipContact function

With the skipContact function, you can ensure no mail is sent to a contact when a field for personalization is empty, or improperly set. You can also provide a reason. For example, the Twig below will skip contacts for whom the firstname is not known:

{% if contact.firstname is not empty %}
{{ contact.firstname }}
{% else %}
{{ skipContact("Firstname unknown") }}
{% endif %}

You can easily test this with a quicksend, although the same is applied to a definitive sendout. You can also view the skipped emails in the trace mailing.

This function is especially useful for RSS blocks. Here is an example skipping an email based on External Content:

{% set externalContent = externalContent(block.Feed.value) %}
{% for item in externalContent.channel.item %}
{% if item.variable is empty %}
{{ skipContact("no content available") }}
{% endif %}
{% endfor %}