Overview

In Drupal 8, the data manipulation and the presentation layers are completely separate. For the data manipulation layer, it provides processing hooks to preprocess pretty much any entity: nodes, blocks, fields, terms, forms, paragraphs, etc. As for the presentation layer, it uses the Twig template engine to render HTML. Twig, in itself, is an extra language that you have to learn but it is simple.

Drupal 8 Preprocess & Template diagram

To customize anything in Drupal 8, you have to find the preprocessing hook that is affecting what you want to customize and then re-implement it the way you like. Then, change the Twig file if necessary.

The example below shows you how to theme a specific view field, i.e. field_NAME_OF_YOUR_FIELD.

Theme a specific view field

We are going to re-implement the preprocessing hook view field, YOURTHEME_preprocess_views_view_field(). In your ./themes/YOURTHEME/YOURTHEME.theme file, add the followings:

/**
 * Replace YOURTHEME with the actual name of your theme and 
 *   field_NAME_OF_YOUR_FIELD with the actual machine name of your field. 
 */
function YOURTHEME_preprocess_views_view_field(&$variables) {
 
  // Print all the keys to see what you have available.
  print_r(array_keys($variables));
 
  // Current field name.
  echo $variables['field']->field;
 
  $variables['new_variable'] = ""; // Make 'new_variable' available to Twig file.
 
  // Do something based on the name of the field.
  if ($variables['field']->field == 'field_NAME_OF_YOUR_FIELD') {
 
    // Modify the actual output.
    $variables['output'] = "add your custom" . $variables['output'];
 
    // Add new variable that will be readable in your Twig file.
    $variables['new_variable'] =  "values of my new variables";
  }
}

Now, modify views-view-field.html.twig to display and use variable passed from the preprocessing hook YOURTHEME_preprocess_views_view_field(). In your ./themes/YOURTHEME/templates/views-view-field.html.twig file, add the followings:

{#
/**
 * @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
 */
#}
{{ output -}}
 
{%- if new_variable is not empty -%}
  <p>
    Do something based on the new variable
  </p>
  <p>
    {{ new_variable -}}
  </p>
{% endif %}

Note

Flush your cache. Otherwise, changes will not be reflected.
Be sure that your view displays the field that you want to customize.

Reference

All view templates can be found at ./core/modules/views/templates
List of hooks: https://api.drupal.org/api/drupal/core!core.api.php/group/hooks/8.7.x.

Drupal, D8

About the author

Xuan Ngo is the founder of OpenWritings.net. He currently lives in Montreal, Canada. He loves to write about programming and open source subjects.

Drupal 8 - Preprocess Views - View Field

Overview

Theme a specific view field

Reference

About the author