How to work with Twig Templates in Drupal?

In this article, we are going to see how a developer can work with Twig templates, and how to override templates (if needed) and create template suggestions with hooks, so that templates could be easily managed.

Basically drupal allows people to override the existing twig templates, so that people can fully have control on the html generated via the custom theme.

First thing, we need to make sure we override the templates, for this to do we have to enable the twig debugging for your local drupal application. And it's done by modifying some lines of code within your services.yml file which will be located at sites/default/services.yml, as shown below.

parameters:
  twig.config:
    debug: true

By default, you can see the value set to false, you need to set it to true.

Once you do this and rebuild the caches, you can see the existing template suggestion on inspecting the web page locally.

Now you have to write the code to alter the template suggestions, which will give you more control to create the twig template files.

And Drupal provides hooks to do this, and hook_theme_suggestions_HOOK_alter is the hook which does the purpose.

Let’s take an example to alter the template suggestions of the taxonomy term page, and with the below code you can do it.

use Drupal\taxonomy\TermInterface;
/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function mytheme_theme_suggestions_taxonomy_term_alter(&$suggestions, $variables) {
  $elements = $variables['elements'];
  if (isset($elements['#taxonomy_term']) && isset($elements['#theme']) && isset($elements['#view_mode'])) {
    $term = $elements['#taxonomy_term'];
    if ($term instanceof TermInterface) {
      $suggestions[] = $elements['#theme'] . '__' . $term->bundle() . '__' . $elements['#view_mode'];
      $suggestions[] = $elements['#theme'] . '__' . $term->id() . '__' . $elements['#view_mode'];
    }
  }
}

Once you write this code in your .theme file, and rebuild the caches. You can see the template suggestions on inspect of the page.

Similarly you can do for all the other pages or entities like User, Node, Media, Paragraph or a View.

Now reading the data to the templates will be a crucial or difficult part, in case you have not built your configuration at its best. What this means is,

1. For example, people should make sure to use the form modes and view modes of the content type, and importantly only the needed data should be passed to the form modes or view modes.
2. Also, if you want to render just the Image URL, make sure the field from the view mode is returning just the Image URL.
3. Don't preprocess the data, it would be a very rare case where you need to use preprocess hooks in your .theme file.
4. If you are using a data preprocessor, it means your application is not well planned, which means you are good to make some corrections in the application.
5. And one must make sure not to load any data from the database on the .theme file or twig file, because you are already on the rendering layer.

To conclude, the approach or inputs provided in the article will help drupal people to understand how they can work with twig templates.