Functions and filters to get you started with Twig Tweak in Drupal 8 (with examples)

Twig tweak module is a huge time saver for Drupal developers working with advanced twig templates. It offers several useful functions and filters that can ease the developer’s job. Developers can also write well formatted code which is more comprehensible. I highly recommend usage of the Twig tweak module in Drupal 8 for quick and easy Drupal development. What’s more, Twig tweak is also supported in Drupal 9!

How to Install the Twig Tweak Module

You can either download and install the module from Drupal.org or from composer. Once you download and extract the file, place inside your project directory. You can also choose to use composer to download with the following command – 

composer require drupal/twig_tweak

Go to Extend and enable the module. You can even use drush to enable the module.

Implementing Twig Tweak Functions and Filters in Drupal 8

Views and views results

To render the views in twig template, we can use the twig tweak snippet as below.

Examples

• {{ drupal_view('who_s_new', 'block_1') }}  This will place the who’s new views block_1 in a template.
• {{ drupal_view('who_s_new', 'block_1', arg_1, arg_2) }} Extra arguments can be passed if the contextual filters are added can be used with passing arguments.
• {% set view = drupal_view_result('related', 'block_1')|length %}
  {% if view > 0 %}
  {{ drupal_view('related', 'block_1') }}

{% endif %} In this code the view is displayed only if the view has results in a template.

Blocks

To place the plugin blocks in template, we can use the twig tweak snippet as below.

Example 
{{ drupal_block('system_breadcrumb_block') }} to place the breadcrumbs block in template.

Region

To render the region contents from default or specific theme.

Example
{{ drupal_region('sidebar_first', 'bartik') }} to place the sidebar first contents of the bartik theme in a template.

Entity and Entity form

To render the available entity and entity form in twig template, we can use the snippet as below.

Examples

• {{ drupal_entity('block_content', 1) }}  to display the content block whose id is equal to 1 in a twig template.
• {{ drupal_entity('node', 123, 'teaser') }} to display the node teaser data of entity whose id is equal to 123.
• {{ drupal_entity_form('node', 1) }} to display node edit entity form in a template.
• {{ drupal_entity_form('node', values={type: 'article'}) }} to display node add form of article type.

Field

To display the available field value of any entity in twig template or to get field value, use the following twig tweak snippet.

Examples 

• {{ drupal_field('field_image', 'node', 1, 'teaser') }} to display the field_image value of node 1 with teaser view mode.
• {{ drupal_field('field_image', 'node', 1, {type: 'image_url', settings: {image_style: 'large'}}) }} to display the image field value with more detailed settings in a template.

Menu

To print the menu items in a template, we use the twig tweak as below.

Example
{{ drupal_menu('main_navigation') }} to render the menu with its default values.

Form

To render the Drupal form in a template we can implement the twig tweak as below.

Example
{{ drupal_form('Drupal\\system\\Form\\CronForm') }} to display the form in a twig template by providing the path to its class.

Image

There are several ways of rendering images in twig. Some easy ways with using twig tweaks are as follows.

Examples 

• {{ drupal_image(123) }} this will render the original image whose fid is 123.

• {{ drupal_image('9bb27144-e6b2-4847-bd24-adcc59613ec0') }} this will render the image using the unique uuid of the image.

• {{ drupal_image('public://2020/05/ocean.jpg') }} to render the image using the file uri of the image.

• {{ drupal_image('public://2020/05/ocean.jpg', 'thumbnail', {alt: 'The alternative text'|t, title: 'The title text'|t}) }} here is an example of displaying an image thumbnail by adding the alt and title for the image. Note : uri path will be based on the default files location since it is set to sites/default/files/2020/05/ocean.jpg.

Token

Drupal 8 introduced tokens which are very useful and huge time savers for Drupal developers. From twig tweak we can render the tokens as below. 

Examples
{{ drupal_token('site:name') }} to display the site name using the tokens in twig

Configurations

Printing the configuration values in twig will be very useful in a site where you need dynamic data to be printed according to the configurations.

Example
{{ drupal_config('system.site', 'name') }} to print the name of the site from system.site.yml configuration into a template.

Dump

Debugging is the most important part of the development process. Here are some quick and cool methods to debug in twig. It needs Symfony var dumper component. It can be installed from composer by $ composer require --dev symfony/var-dumper 

Example
{{ dd(var) }} this will  dump the var data from a template.

Drupal Title

To get the title of the current route we can use the twig as below.

Example
{{ drupal_title() }} this will print the title of the current route.

Drupal URL

To generate a URL from an internal path inside the twig we can use the twig tweak snippet as below.

Example
{{ drupal_url('node/1', {query: {foo: 'bar'}, fragment: 'example', absolute: true}) }} this will return the https://site_name/node/1?foo=bar#example as output.

Drupal Link

It generates the link path if the URL is not accessible to the user. It works the same as Drupal URL but with extra attributes.

Example
{{ drupal_link('View'|t, 'node/1', {attributes: {target: '_blank'}}) }} this will create a link with name View and also has an option to open the link in the new tab.

Drupal Messages

To display the Drupal status messages in template, find the example below.

Example
{{ drupal_messages() }} will display status based on user actions in the site.

Drupal Breadcrumbs

To display the breadcrumbs of the site in template as below, find the example below.

Example
{{ drupal_breadcrumb() }} This will display the breadcrumbs block in template.

Drupal Breakpoints

To add a debug point to a twig template is as below.

Example
{{ drupal_breakpoint() }} This will add a breakpoint in the template where you have added it.

Token Replace Filter

To replace all the tokens in a given string with appropriate values.

Example
{{ '<h1>[site:name]</h1><div>[site:slogan]</div>'|token_replace }} this will replace the tokens available in a string with its appropriate values.

Preg replace filter

It will perform a regular expression search on the text and replaces it with the options.

Example
{{ 'foo' | preg_replace('(foo)', 'bar') }} in this example “foo” is getting replaced with bar

Image style filters

It will return the image URL with the downloaded image style.

Example
{{ 'public://images/ocean.jpg'|image_style('thumbnail') }} this will apply the thumbnail image style to the given image.

Transliterate filter

It will Transliterate text from Unicode to US-ASCII and replace unknown characters with “?” by default.

Example
{{ 'Привет!'|transliterate }} this will return the output in english that is “Private!”.

Check markup filter

Apply the enabled filters for the text provided.
 

Example
{{ '<b>bold</b> <strong>strong</strong>' | check_markup('restricted_html') }} This will apply the 'restricted_html' filter for the text given.

Truncate filter

This will be used to truncate the strings to a specified number of characters.

Example
{{ 'Some long text' | truncate(10, true) }} This will truncate the text to 10 characters and also truncate on boundary.

With Filter

This will add new elements to the array. It also returns an array with modified value.

Example
{{ content.field_image | with('#title', 'Photo' | t) }} This will add a title to the field image and returns.

Children Filter

To filter out the child elements of the render array in a twig template. Also, this will have an option to sort the elements by its weight. This will be useful when processing individual fields.

Example
{{ node.field_example|children }} this will render all the child elements of field_example in template.

File Uri and Url filter

These both filters will be used when dealing with images in twig. You can get the image Uri and URL using these methods in twig tweak.

Example

• {{ node.field_image | file_url }} returns the absolute url of the image file.
• {{ node.field_image | file_uri }} returns the uri of the image file relative to its sites/default/files directory.