Skip to main content

Drupal 9: Adding suggestions to views and preprocessing them

Finding the right template views name suggestion can be tricky especially if you are new to theming with drupal. Two very handy pages (to start with)  are the Views Template Files (https://api.drupal.org/api/drupal/core!modules!views!views.theme.inc/gr…) and  Views.theme.inc - Preprocessors and helper functions (https://api.drupal.org/api/drupal/core%21modules%21views%21views.theme…)  page at drupal.org. You can find there all the info that you need about the naming patterns and preprocess logic for a views template file. But when it comes to suggestions you might stuck a little. So when you need something more complex because you might have a variety of views, all with multiple display modes for different pages things can be complicated.

Here are some useful code snippets for adding specific views naming suggestions to a view. Hook can be your theme_name or module_name.

Add more views generic template suggestions.

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 *
 * Add views template suggestions.
 * 
 * @inheritdoc
 */
function HOOK_theme_suggestions_views_view_alter(array &$suggestions, array $variables) {
  $suggestions[] = 'views_view__' . $variables['view']->id();
}

Add views unformatted template suggestions:

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 *
 * Add views unformatted template suggestions.
 * 
 * @inheritdoc
 */
function HOOK_theme_suggestions_views_view_unformatted_alter(array &$suggestions, array $variables) {
  $suggestions[] = 'views_view_unformatted__' . $variables['view']->id();
}

Now if you have a custom or contrib module that defines it's own views template like Views Bootstrap for example you can either use the Twig VarDumper module and dump the context in the views template file so you can have the base views template name or you can a method like this:

function hook_preprocess_views_view(&$variables) {
  $hook_theme_id = $variables['view']->id();
  ksm($hook_theme_id);
}

//add to views_view__hook_views_id
function hook_preprocess_views_view__news_archive_roi(&$variables) {

  $rows = $variables['view']->result;
  foreach ($rows as $key => $row) {
    //do stuff
  }
}

With the first preprocess we know the views id in the correct format (only lowercase letters _ etc) now we can use this id to add to hook_preprocess_views_view the $hook_theme_id and continue from there. So now that we know that our view_id is "news_archive_roi" the hook_preprocess_views_view_VIEW_ID should be like this

function hook_preprocess_views_view__news_archive_roi

After you get used to it you will see that it is easy to remember the above hook_preprocess views naming  pattern.

The following are the possible template names sorted by specifity:

[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

With information from:

https://redcrackle.com/blog/drupal-8/theme-views-templates

https://drupal.stackexchange.com/questions/227709/adding-theme-suggesti…

views