Drupal is really good at allowing the user (developer) to manipulate its data.

It’s very common to override templates for nodes and views in D7, but in Drupal 8, it’s been made even easier to override templates at every level.  I found I was writing a lot less pre-processors on a D8 project versus D7. 

On a recent project, and I’m sure the majority of projects, Node and View templates will need to be overridden.  For nodes, it’s pretty much the same as before and very easy to find documentation.  Simply copy the base template and create a new file with this pattern:

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

It’s really useful when you have multiple view modes.  For example, my recent project used the default view mode for a full page and a custom “Card” view mode for Views.

David Drupal Blog_0.JPG

On Views (D7), I use to output data with fields and override the View template at the row level for theming. 

D8, I found it more efficient to output data as Content then select the view mode.  For this approach, I reuse the node “Card” display and only worry about the wrapping DIVs from the view.  At most I would be adding some classes to the View’s row template, everything else about the content itself comes from the node card template.

               Container - views-view--[viewname].html.twig

               Row - views-view-unformatted--[viewname]--[displayname].html.twig

I also found I’ve used field template overrides more often than before.  It was useful when adding Bootstrap classes to fields for positioning or implementing other components such as tabs or carousels.  

Drupal.org has a list of twig naming conventions here for all entities that can be customized here

[https://www.drupal.org/docs/8/theming/twig/twig-template-naming-conventions].

The best way to find all the layers of template suggestions is to enable debug mode.  There’s a great step-by-step on Drupal.org that outlines how to enable twig debug mode as well as disable caching while you develop

[https://www.drupal.org/node/2598914]. 

Once this is enabled, inspect your page and you’ll find that every level of HTML will have a block of comments.  If you’re looking at a View, you’ll find all the suggestions for each level (container, row, node, field). 

In my opinion, this has made development a lot easier and efficient, minimizing the need to write code that will only be used in specific scenarios.  Hope this helps anyone that’s looking to start a new project!

Read Next
Appnovation Blog Default Header
Appnovation

Simple website approach using a Headless CMS: Part 3

22 February, 2018|5 min