Twig is a new feature template engine for PHP. It replaces the PHP templates(.php). Twig works based on Symfony2 framework and Drupal 8 used the Symfony2 code. In Drupal 8, all the theme development works in Twig template while using function and filters. Drupal 8 uses the .html.twig extention in template file.
Twig uses all syntaxes in two formats:
– Write anything between the {{…}}, it will display on Front.
– EX:- 1. {{ TEST }} => TEST
2. {{ DOM-MASTER }} => DOM-MASTER
data
– Write Logic between the {%…%}, like, Conditions, Loop, Set variables values etc.
– EX:-
1. Set variable:-
{% set var_name = var_value %}
Now, print the variable:- {{ var_name }}
2. Conditions:-
{% if (a or b) %}
{% endif %}
3. Loop:-
{% for key in row %}
{{ key.value }}
{% endfor %}
* How to use Twig Functions in Drupal 8:-
1. file_url($uri)
– file_url funcion fetch the relative path of file from the root and generate the uri for file.
– Syntax :-
– Fetch multiple files using file_url and fop loop:-
– Syntax:-[code]{% for item in content.file_machine_name[‘#items’] %}
{{ file_url(item.entity.uri.value) }}
{% endfor %}[code]
– Ex:-{% for item in content.field_middle_image['#items'] %}
<img src="{{ file_url(item.entity.uri.value) }}" />
{% endfor %}
2. link($text, $url, $attributes)
– link () function is used for the create link with attributes. - $text: - Title of Link
- $url: - URL of link
- $attributes: - Add attributes like classes and name.
Mainly, this function is used for the render menu in template.
3. path ($name, $parameters, $options)
4. url($name, $parameters, $options)
data
1. length
– It returns the length of character or element from the string or array.
– Syntax: – {{ node.field_name.value|length }}
– Ex:- {{ node.field_dom_text.value|length }}
2. raw
– It returns with the HTML text, not a plain text.
– Syntax: – {{ node.field_name.value|raw }}
– Ex: – {{ node.field_dom_text.value|raw }}
3. batch – Batch helps to break the element from loop.
4. trim – It removes the white extra spaces of string.
5. round –
– It return the round figure of number.
– Syntax:- {{ node.field_name.value|round }}
– Ex:- {{ node.field_dom_number.value|round }}
6. date
– It is used for the change of date format.
– Syntax:- {{ date }}
– Ex:- {{ now | date(‘d/m/Y’) }}
7. t
– It is used for the language of translation.
8. placeholder
– It return the text with Italic font style.
– Syntax:- {{ node.field_name.value|placeholder }}
– Ex:- {{ node.field_dom_text.value|placeholder }}
9. reverse
– It return the reverse string to origional string.
– Syntax:- {{ node.field_name.value|reverse }}
– Ex:- {{ node.field_dom_text.value|reverse }}
data
1. label
– It returns the name of node title.
– Syntax:- {{ label }}
2. fieldDefinition.label
– It returns the label of field.
– Syntax:- {{ node.field_machine_name.fieldDefinition.label }}
– Ex:- {{ node.field_dom_number.fieldDefinition.label }}
data
Drupal 8 provides the option to override all templates that are producing HTML mark-up so that you can control the whole structure of mark-up using twig. To know which template is producing the mark-up for a particular element, you can use Twig’s built in debug option. The Twig engine allows for configuring debugging, automatic reloading (recompiling) of templates, and caching compiled templates. Twig provides various handy functions that can be used directly within Templates.
This was a quick and short article on how to use Twig in Drupal 8. If you face any issues in setting up Twig in your Drupal 8 template, please let us know.
cmsMinds is a leading Drupal development agency in RTP (Raleigh, Durham, Cary). We have assisted clients in migration of D7 to D8 projects or creating new projects in Drupal8. As an agency we do have designers, developers, QA and PM to ensure that we can help you with complete life cycle of the project.
