How to name drupal 8 views view field templates html.twig files.

In drupal 7 views we used to have the theming information button in the view that would give all the names for the tpl files. In drupal 8 we don’t have that anymore but here is how you name your html.twig files.

Here is the template for naming your files:

views-view-field--[view_machine_name]--[page OR block machine_name]--[field-machine_name].html.twig

Here is an example:

1. I take the view name from the view edit page URL “case_management”

Drupal 8 view template

When I want to create a field template for the views field “Check Same Two-parties” field.

2. The view display name would be “page1_incoming” from the url but I want to effect all displays so I do not care about it.

3. I click to edit the field

    3.1 Click: “REWRITE RESULT”

    3.2 Click: Override the output of this field with custom text

    3.3 Click: “REPLACEMENT PATTERNS”

    3.4 The Second to last is the name of the field

Capture

Using the formula

views-view-field--[view_machine_name]--[page OR block machine_name OR LEAVE this to affect all displays]--[field-machine_name].html.twig

the result is the following file name.

views-view-field--case_management--field_case_check_party.html.twig

Take the file content of the file

“\core\modules\views\templates\views-view-field.html.twig”

and create your own.

{#
/**
 * @file
 * Default theme implementation for a single field in a view.
 *
 * Available variables:
 * - view: The view that the field belongs to.
 * - field: The field handler that can process the input.
 * - row: The raw result of the database query that generated this field.
 * - output: The processed output that will normally be used.
 *
 * When fetching output from the row this construct should be used:
 * data = row[field.field_alias]
 *
 * The above will guarantee that you'll always get the correct data, regardless
 * of any changes in the aliasing that might happen if the view is modified.
 *
 * @see template_preprocess_views_view_field()
 *
 * @ingroup themeable
 */
#}
// {{ view.field.path.original_value}} -- if you want to access other fields
<div class="have-fun">
{{ output -}}
</div>

Cheers!