How to customize results of views using view templates in Drupal 8 and 9

As you know, views are used for listing  content by applying various filters with out writing code.

Every developer has to modify these results in order to fit to their customized themes. Here we are going to discuss about how to rewrite results of a views using view templates. Here we are creating view templates for views. We will retrieve each field value before rendering to the page and add mark ups as required.

You can see front page view and other views  available  under menu  Structure->views

Here we are creating a view say articlelist which displays articles.

Here out  view name is articlelist , style selected as unformatted , display selected as page and row style selected as field.

We can control display of the view results using view templates.

Below provided  possible templates for this particular view.

• views-view–articlelist–page.html.twig
• views-view–page.html.twig
• views-view–articlelist.html.twig
• views-view.html.twig
• views-view-unformatted–articlelist–page.html.twig
• views-view-unformatted–page.html.twig
• views-view-unformatted–articlelist.html.twig
• views-view-unformatted.html.twig
• views-view-fields–articlelist–page.html.twig
• views-view-fields–page.html.twig
• views-view-fields–articelist.html.twig
• views-view-fields.html.twig

First, we are going to  create  template file for views rendering.

So, go to views-view.html.twig file from classy theme and  copy the content.

\core\themes\classy\templates\views\views-view.html.twig

Then create  a template file for our articlelist vew as below in themes/YOURTHE/templates/views folder.

views-view–articlelist.html.twig

so content of this file  will be as below.

We can confirm our article list view is rendering through this template by placing  a class name in set classes. Using this template you can add additional classes and mark ups  outside rows.

View field template

You can override specific view field template like:

views-view-field–{views machine name}–{page or block machine name}–{field name}.html.twig

For Example, title field of frontpage view can be overwritten using below template.

views-view-field–frontpage–page-1–title.html.twig

Here we are going to over right each fields in view and adding a mark up to the fields. Here we have article list view, so we are going to over right view title field

Create below file in YOUR_THEME_FOLDER/templates/views/

views-view-field–articlelist–page-1–title.html.twig

you can refer below template for creating custom mark ups.

\core\modules\views\templates\views-view-fields.html.twig

Copy above file content  to  views-view-field–articlelist–page-1–title.html.twig

Now you can add div to the title filed as below.

Flush the cache and access http:/yourproject.com/articlelist

You can see title is enclosed in newly added div.

Same way we can do for image field also. Here in article list view  I have made image field to display a URL to  image.

Getting each field in   views-view-fields—VIEWNAME –page.html.twig

Here our template will be as below.

views-view-fields–articlelist–page.html.twig

you can refer below template for rendering each fields

\core\modules\views\templates\views-view-fields.html.twig

Here I am getting each field( title and image fields)value as below.

Flush the cache and open view front end , you can  see class cust-fields in loaded page.

You can load available fields using kint as below.

{{ kint(fields) }}

Rendering fields in   views-view-unformatted–yourviewname.html.twig

Here I have below template

\themes\custom\YOUR_THEME\templates\views\views-view-unformatted–articlelist.html.twig

You can refer below template for default mark ups.

\core\modules\views\templates\views-view-unformatted.html.twig

By default it has below code.

Place this in your code and remove     {{- row.content -}}

Now we can get each fields from row as below

{{row.content[‘#row’]._entity.MECHINE_NAME_OF_FIELD.value}}

For example for title, image and body fields it will be as provided below.

Read related article – Drupal Twig tutorial