Node view mode in page template suggestions

Question

I would like page template suggestions when a node is using a custom view mode.

I think this would happen in hook_theme_suggestions_page_alter().

I have already been able to get page-level template suggestions based on the node's content type, so it seems like I should be able to snag the name of the custom view mode?

I'm not good at this part of Drupal at all, so any help would be appreciated.

Answer 1

You can do this by first setting a custom node parameter by overriding template_preprocess_node in your .theme file. For example:

function mytheme_preprocess_node(array &$variables, $hook) {
  if(isset($variables['view_mode'])) {
    $node = $variables['node'];
    $node->current_view_mode = $variables['view_mode'];
  }
}

When this is added you can access the custom parameter in hook_theme_suggestions_page_alter() page as $node->current_view_mode.

For example:

function mytheme_theme_suggestions_page_alter(array &$suggestions, array $variables) {
  if ($node = \Drupal::routeMatch()->getParameter('node')) {
    $suggestions[] = 'page__' . $node->current_view_mode;
 }
}

You may have to add some extra validation to ensure $node->current_view_mode has a useful value.

See also Sharing variables between node preprocess and page preprocess & Get node's view mode within template_preprocess_page

Answer 2

The hook hook_theme_suggestions_HOOK is the one you should implement.

When you have a node of type page (labeled as Basic Page from the default profile), then the HOOK is node and the specific hook you would implement is hook_theme_suggestions_node(array $variables)

As @pinueve points out, there is already a specific suggestion that includes the custom display mode: node--page--CUSTOM_VIEW_MODE.html.twig.

Also, as @pinueve suggests, the easy way to find the template suggestions is by enabling the debugging mode. I tested this using a custom view mode called customvm that I created, so I can see these suggestions in the browser by inspecting the source code:

* node--17--customvm.html.twig
* node--17.html.twig
* node--page--customvm.html.twig
* node--page.html.twig
* node--customvm.html.twig
x node.html.twig

Alter hook

Note that there is also an alter version of the hook [HOOK_theme_suggestions_node(array &$suggestions, array $variables)][3], you should use this if you are trying to alter the existing suggestions, maybe changing the priorities.

Suggestions for a page from a custom controller

The page HOOK is meant to be used when the output comes from a custom controller and route, like the one in this example: https://www.drupal.org/docs/8/api/routing-system/introductory-drupal-8-routes-and-controllers-example

In this case the HOOK is page and you would implement these hooks:

• HOOK_theme_suggestions_page(array $variables)

• HOOK_theme_suggestions_page_alter(array &$suggestions, array $variables)