How To Use Twig In Drupal 8

– Write anything between the {{…}}, it will display on Front.
– EX:-
1. {{ TEST }} => TEST
2. {{ DOM-MASTER }} => DOM-MASTER

– 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 :-

{{ file_url(content.file_machine_name.entity.uri.value) }}

– Ex:-

{{ file_url(content.field_middle_image.entity.uri.value) }}

– Write the function in img tag for displaying on the front. Like,

<img src="{{ file_url(content.field_middle_image.entity.uri.value) }}" />

– Fetch multiple files using file_url and fop loop:-
– Syntax:-{% for item in content.file_machine_name['#items'] %}
{{ file_url(item.entity.uri.value) }}
{% endfor %}

– 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.

Syntax:-
- {{ link($text, $url, $attributes) }}
Ex:-
- {{ link(item.title, item.url, { 'class':['abc', 'def']} ) }}

Mainly, this function is used for the render menu in template.

3. path ($name, $parameters, $options)

4. url($name, $parameters, $options)

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 }}

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 }}