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 re right results of a views using view templates. Here we 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 available  in ->Structure->views

Here are creating a view say articlelist which displays article.

If our view name articlelist , style selected unformatted , display selected as page and row style selected as field.

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

Below are 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 in classy theme 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 /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 rfer below template for rendering each fileds

\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.

 

Get Free E-book
Get a free Ebook on Drupal 8 -theme tutorial
I agree to have my personal information transfered to MailChimp ( more information )
if you like this article Buy Me A Coffee this will be an ispiration for me to write articles like this.

You may also like...