Theming

Exercise: Override the Node Template for Drupal 8, 9, and 10

The available dynamic tokens or variables vary from template to template. Each "page" is built from and uses many different templates. In this exercise, we'll continue our template overriding practice by overriding the node template. We'll override it and rename it in such a way that it will only affect article nodes on our Drupal site. We'll practice the process of overriding the template, inspecting the available variables, and customizing the markup. Along the way, we'll practice using the Twig filter without. You should work on the exercise steps below first, and you can refer to the video if you need some help.

If you want to try and accomplish this on your own first you'll need to:

  • Override the node.html.twig template file and target only Article nodes.
  • Modify the template so that the content of the image field of a node is output wrapped in a <div> independent of the rest of the node's content.

Example:

Screenshot showing image field of an article node displayed above the body content with a red border around it to indicate that it is in its own container.

Note: At the end of this exercise, you'll find a video walk-through of the solution.