Module Tuesday: Twig Tweak

Have you ever found yourself in a situation where you need a specific HTML structure and to fulfill that structure you need to render blocks, entities, menus... inside that structure? And you couldn't create the structure from the Drupal Twig templates? Here is the solution.

I will explain the problem I had a few months ago. I had to create a screen in which I had to display a view with a list of elements and I also had to display a menu. Let me show you the structure that the page should have.

If we look at the structure, the view header and view footer should be shared by the page context. If we don't have any tool to help us to fulfil this structure we would have to rely on Javascript to be able to move the menu and embed it inside the view, as Drupal doesn't allow us to render entities inside another Twig template.

Well, with the Twig Tweak module we have the solution!

Twig tweak contains functions to print blocks, views, entities, fields, images, tokens, etc. in the Twig templates of your project. In the official page of the module at drupal.org there is a reference manual (Cheat sheet). In this manual we can find the documentation of all the functions defined by this module together with a practical example for each one of them.

Let's continue with our example. For this we are going to create a view showing the list of a specific type of content, in my case we are going to use a type of content called Fruits and the view will also be called Fruits. The view we will create will be simple in total in our website we have 5 elements and we are going to show 3 per page.

Once we have created the view we are going to create the twig. We go to web/themes/da_vinci/templates/views and create a new file called as shown in the suggestion.

Once we have created or identified the view file, we create the desired structure.

And we add the menu with one of the functions provided by the module. For them we will use the function {{ drupal_menu('sidebar-left') }} where the name of the menu will be its machine name.

Both the menu and the content of the view will be placed in the same wrapper so that they can be well laid out and positioned correctly.

And as we can see in the illustration above we have been able to add the menu inside the view without problems.

Twig Tweak offers more functionalities such as:

• {{ drupal_block('system_branding_block') }} => Function to render a block using the default settings.
• {{ drupal_field('field_image', 'node', 1) }} => Function to render a field, even an image field.
• {{ drupal_region('sidebar_first') }} => Function for rendering a region.
• {{ drupal_region('sidebar_first', 'bartik') }} => Function to render a region of a specific theme.

You can find all existing functions in the Cheat sheet of the module.