Let’s create something better together.

If you prefer phones, we have one of those too: +1 978 455 4515

    • Project Info
    • Technology
    • Contact Details



      How To Use Twig In Drupal 8

      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

      – 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:-[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 %}

      drupal 8 twig
      dom master 1

      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.

      - {{ link($text, $url, $attributes) }}
      - {{ link(item.title, item.url, { 'class':['abc', 'def']} ) }}
      drupal 8 twig
      drupal twig display link

      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 }}drupal 8 twig

      return the length of string
      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 }}

      drupal 8 twig
      dom is master bold

      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 }}
      drupal 8 twig
      return the value of float number

      6. date

      – It is used for the change of date format.
      – Syntax:- {{ date }}
      – Ex:- {{ now | date(‘d/m/Y’) }}
      drupal 8 twig
      return the date with format

      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 }}
      drupal 8 twig
      return the string with italic style

      9. reverse

      – It return the reverse string to origional string.
      – Syntax:- {{ node.field_name.value|reverse }}
      – Ex:- {{ node.field_dom_text.value|reverse }}
      drupal 8 twig
      dom is master

      1. label

      – It returns the name of node title.
      – Syntax:- {{ label }}
      drupal 8 twig
      title of page or node title

      2. fieldDefinition.label

      – It returns the label of field.
      – Syntax:- {{ node.field_machine_name.fieldDefinition.label }}
      – Ex:- {{ node.field_dom_number.fieldDefinition.label }}
      drupal 8 twig
      label of field

      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.

      Author's Bio

      Jayesh Makwana
      Jayesh Makwana

      Jayesh Makwana writes with one goal in mind: to make Drupal easy for everyone. From his first steps with Drupal 6 to mastering the latest updates, he’s a true Drupal geek, passionate about sharing his knowledge. Whether it’s tips on Drupal migration, upgrading your site, or catching up on the newest features, Jayesh’s articles are your friendly guide. He simplifies complex topics, making them accessible to Drupal users of all levels. Follow Jayesh for insights that enlighten and inspire, all delivered with the enthusiasm of someone who loves what they do.

      Share This Article:

      Recent Blogs