2

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.

2
  • you have to turn on twig theme suggestion (google it) and clone a suggested template in your sub-theme
    – pinueve
    Commented Feb 13, 2018 at 22:22
  • I understand Twig template suggestions. There is not a template suggestion for a PAGE where the NODE uses a CUSTOM View Mode. This is why a normal template suggestion won't work.
    – Sarah C
    Commented Feb 15, 2018 at 0:55

2 Answers 2

2

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

1

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)

4
  • Can you elaborate on using hook_theme_suggestions_page_alter for theming page.html.twig when a custom view modes is used.
    – ymdahi
    Commented Dec 5, 2018 at 18:30
  • @ymdahi, For example, if you create the file node--page--MY-CUSTOM-VIEW-MODE.html.twig, Drupal will pick it up. (page is the node type). does that make sense? Commented Dec 5, 2018 at 18:44
  • Oh, I meant creating a custom suggestion for page.html.twig and not node node.html.twig - does that make sense? Or can I override page.html.twig using node--page---
    – ymdahi
    Commented Dec 5, 2018 at 18:47
  • I have the same question @ymdahi has. How do I get the view_mode variable in the theme_suggestions_page_alter? This does not work: $view_mode = $variables['view_mode']; I don't understand the content at the link you provided at the end of your answer.
    – Sarah C
    Commented May 20, 2019 at 18:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.