Drupal 10. Preview content by content type

General
1

Is it possible to Preview Drupal content by content type? Currently the preview template options are

page--node--preview--f7fd5df8-d58d-42f8-b274-8d224eddbb5a--full.html.twig
   ▪️ page--node--preview--f7fd5df8-d58d-42f8-b274-8d224eddbb5a.html.twig
   ✅ page--node--preview.html.twig
   ▪️ page--node.html.twig
   ▪️ page.html.twig

…but is there a preprocess function or solution to allow preview by Content Type e.g. page--node--preview--CONTENT-TYPE.html.twig

I tried below with no luck from another forum:

function THEME_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;
    }
  }
}
2

Yes, it’s possible to preview Drupal content by content type in Twig templates. Here’s a refined version of the theme suggestion alter function that addresses the potential issues and incorporates best practices:

PHP

function your_theme_theme_suggestions_page_alter(array &$suggestions, array $variables) {
  // Ensure the node preview is available
  if (isset($variables['node_preview']) && $variables['node_preview'] instanceof NodeInterface) {
    $node_preview = $variables['node_preview'];

    // Add content type-specific suggestions
    $suggestions[] = 'page__node__preview__' . $node_preview->bundle();

    // Add view mode-specific suggestions (if applicable)
    if (isset($variables['view_mode']) && $variables['view_mode']) {
      $suggestions[] = 'page__node__preview__' . $node_preview->bundle() . '__' . $variables['view_mode'];
    }
  }
}

Explanation:

  1. Check for Node Preview: The function first verifies if the node_preview variable is set and contains a NodeInterface object. This ensures that we’re dealing with a node preview context.
  2. Add Content Type Suggestion: If the node preview is available, the page__node__preview__' . $node_preview->bundle() suggestion is added. This will look for a template file named page--node--preview--CONTENT-TYPE.html.twig , where CONTENT-TYPE is replaced with the actual content type (e.g., page--node--preview--article.html.twig ).
  3. Add View Mode Suggestion: If a view mode is specified (e.g., full , teaser ), the page__node__preview__' . $node_preview->bundle() . '__' . $variables['view_mode'] suggestion is added. This allows for further customization based on the view mode (e.g., page--node--preview--article--teaser.html.twig ).

Usage:

  1. Create Template Files: Create template files following the naming conventions described above (e.g., page--node--preview--article.html.twig , page--node--preview--article--teaser.html.twig ).
  2. Clear Cache: After creating or modifying the template files, clear the Drupal cache to ensure the new suggestions are recognized.

Additional Tips:

  • Consider using a theme’s theme_suggestions function to define additional suggestions based on your specific theme’s structure.
  • If you need to access the node entity within your template, you can use the node_preview variable.
  • You can customize the content of the preview templates to match your specific requirements.

By following these steps, you should be able to effectively preview Drupal content by content type and create tailored templates for different content types and view modes.