adrian-d of Rouge Devs
1/11/2017 - 2:18 PM

Drupal 8 - templating Views

Drupal 8 - templating Views

# View Templates don’t benefit from a suggestions table in Drupal 8 as they did in version 7.
# It is up to you to work out the template name but there are a few things you can do in order to guarantee the correct naming convention. The known method explained above, setting up your environment to provide template suggestions to you in the code comments, is an option.

# The general layout of the template name is predictable but works on the basis of tiers.

views-view.html.twig
views-view-unformatted.html.twig
views-view-fields.html.twig
views-view-field.html.twig

# You have the opportunity to use Twig debugging to generate the template name for you 

# These are all located in the folder structure for the core Views offering in Drupal 8. I have a field in the View called 'email_content'.

/web/core/modules/views/templates

# Alternatively, the rough outline of achieving accurate template suggestions in Drupal 8 Views runs on a strict naming convention, in order of importance depending on the choice you make (as well as the broadness of range in which these templates cover)

[base template name]--[view machine name]--[view display id].html.twig
[base template name]--[view machine name]--[view display type].html.twig
[base template name]--[view display type].html.twig
[base template name]--[view machine name].html.twig
[base template name].html.twig

# For example, If we want to override "views-view.html.twig" template for our view, the following template names are valid:

[base template name]--[view machine name].html.twig
views-view--[view machine name]--page.html.twig
views-view--page.html.twig
views-view--[view machine name].html.twig
views-view.html.twig

# To add context, let’s assume we have a View called ‘test_view’. Our display type is ‘Unformatted’, and so we have all the information we need.

views-view-unformatted--test-view.html.twig

# Field output revolves around the use of Twig once more, and in this case can plug into the fields variable (as it does in Drupal 7) and can render the field without any fuss.

{%- if field.field_email -%}
  {{ fields.field_email.content }}
{%- endif %}

# This will act similar to a print render() functionality from the previous Drupal version (and library underneath the theming layer).