Integrate the Hero

Now that we have our Homepage content type setup and a Hero Paragraph, let's integrate with the Hero Component we created earlier in Pattern Lab.

Twig template suggestions

Template suggestions are Twig templates used to override Drupal core or contrib modules templates. Template suggestions are saved in your theme's /templates directory. This is where Drupal knows to look for twig templates when rendering content. If it finds twig templates it uses those over the ones in core when rendering content. Template suggestions are what we will use to integrate components with Drupal. These template suggestions in the context of component integration, are typically referred to as Presenter Templates and as you will see, their only purpose is to pass data from Drupal to the component. They act as the middleman between Drupal and Pattern Lab components.

Identifying template suggestions

If you have been using Drupal for a while you may be well familiar with where to get templates from or what to name them. However if you've never worked with template suggestion no worries, Twig debugging, which you should have enabled in the previous page, will help us identify the templates we need.

Examples of Twig template suggestions

Template suggestions can be generic or extremely specific depending on the task at hand. Below are two examples of naming conventions for template suggestions; one for Node types and the other for Paragraph types.

node

node--[nodeid]--[viewmode].html.twig
node--[nodeid].html.twig
node--[content-type]--[viewmode].html.twig
node--[content-type].html.twig
node--[viewmode].html.twig
node.html.twig

paragraph

paragraph--[paragraph-type]--[viewmode].html.twig
paragraph--[paragraph-type].html.twig
paragraph--[viewmode].html.twig
paragraph.html.twig