2

I have a custom content type, 'Article with Header' for which I have a custom twig template, 'page--article-with-header.html.twig', which manages the layout for this content type. When I preview the node before publishing, the template used is page.html.twig. I would like to have the same layout for previewing as for when the node is published, but I don't see any options for doing this. The template suggestions that come up in preview mode (page--node--preview.html, for example) would affect every content type.

Is there a naming convention for preview mode twig templates for custom content types that I'm missing? Is there a preprocessing function I can implement that will force the preview mode for this content type to use the correct template?

Improve this question

2 Answers 2

Reset to default
1

The naming convention should be:

  • page--node--preview--[type].html.twig
  • page--node--preview--[type]--[viewmode].html.twig

Unfortunately, this is currently missing from core. To get that working, you would need to add the following to your theme_name.theme file:

function THEMENAME_theme_suggestions_page_alter(array &$suggestions, array $variables) {
  $routeMatch = \Drupal::routeMatch();
  $node_preview = $routeMatch->getParameter('node_preview');
  if ($node_preview instanceof NodeInterface) {
    $suggestions[] = 'page__node__preview__' . $node_preview->bundle();
    if ($view_mode_id = $routeMatch->getParameter('view_mode_id')) {
      $suggestions[] = 'page__node__preview__' . $node_preview->bundle() . '__' . $view_mode_id;
    }
  }
}
Improve this answer
4
  • 1
    Unfortunately, that isn't doing the job. Here's are the template suggestions from the twig debug info: <!-- FILE NAME SUGGESTIONS: * page--node--preview--3e6bb972-97d8-407d-930b-c4c2d376ec52--full.html.twig * page--node--preview--3e6bb972-97d8-407d-930b-c4c2d376ec52.html.twig * page--node--preview.html.twig * page--node.html.twig x page.html.twig -->
    – JOakland
    Aug 7, 2018 at 23:55
  • Would making a unique view mode and specifying that to be used with this method work?
    – Amy
    Aug 8, 2018 at 13:26
  • My clients want to be able to just hit the "Preview" button like they do for the out-of-the-box content types, so I don't think that's going to work. I've noticed that the node object isn't loaded for the preview, so there isn't an easy way to check the content type and redirect to the appropriate twig template. Unless I'm missing something, this is a great place for Drupal to improve.
    – JOakland
    Aug 13, 2018 at 18:55
  • @JOakland I edited the answer with a code snippet that adds the correct twig suggestions. It looks like core is missing them.
    – Ryan Hartman
    May 17, 2022 at 18:17
0

You can use the template_preprocess_html(&$variables) in THEME_NAME.theme and in this we use the Drupal services \Drupal::routeMatch()->getParameter('node_preview'); so it show preview same as a node view.

Improve this answer

Your Answer

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

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