Drupal - How do I only render the main content without wrapping it with the theme or side blocks and menus?

There are two similar questions.

Problems creating a custom blank page with my custom module

How to output from custom module without rest of theme

You can use a symfony response or replace the page template with a blank twig in hook_theme().


If you need to render a piece of content with no regions or blocks, but just the piece of content, wrapped in valid HTML, with the ability to attach CSS/JS or whatnot you can do the following. In this example, I am going to wrap a field of a node in proper HTML (HTML tag, head tag, body tag etc), with nothing else at all. This content will be accessible at a route/path, so that it can be used in an iframe.

Situation

  • Node has: field_description - a textfield that needs to be rendered in a stand alone page
  • Goal is to render the description, alone as a stand-alone, valid HTML page.

Step 1: Create a route

Create a route that will be used for the description

node.description_raw:
  path: '/node/{node}/description'
  defaults:
    _controller: '\Drupal\example\Controller\Controller::descriptionRaw'
    _title: 'Description'
  requirements:
    _permission: 'access content'
    node: \d+
  options:
    parameters:
      node:
        type: entity:node

This route calls \Drupal\example\Controller\Controller::descriptionRaw() to generate the page response.

Step 2: Build the Controller Response

The next step is to build the controller response:

public function descriptionRaw(NodeInterface $node) {
  $page = [
    // Note - the view mode here is `standalone_description` - a
    // custom view mode (More to come later in the tutorial)
    'description' => $node->field_description->view('standalone_description'),
    // If you need CSS/JS, you can attach the library
    '#attached' => [
      'library' => 'example/description_raw',
    ],
  ];

  return $page;
}

At this point, the page will be rendered with all the regions/content etc, so the requirements aren't yet met.

Step 3: Create a New Page Template for the Standalone Description

The next thing is to create a theme suggestion for the audio player page, that will override the default page.html.twig template. This is done by implementing hook_theme_suggestions_page():

function HOOK_theme_suggestions_page(array $variables) {
  $suggestions = [];
  $route_name = \Drupal::routeMatch()->getRouteName();
  if ($route_name == 'node.description_raw') {
    $suggestions[] = 'page__description_raw';
  }

  return $suggestions;
}

Now when accessing the route defined in step 1, the system will look for the template page--description-raw.html.twig in the active theme, and if it exists, it will use that template to render the page, rather than the default page.html.twig.

Step 4: Create the template to render the content

The next step is to create the template used to render the content, as defined in the theme suggestions in the last step. The content of this template is very simple. page--description-raw.html.twig:

{{ page.content }}

This is very simple, as only the content of the page should be rendered, and nothing else. In this case, the content of the page is the description field that was set in the controller.

Step 5: Adjust settings using view modes

There is still likely a lot of unwanted markup around the description from labels. In the controller, the field was set to use the view mode standalone_description. The first step is to create this view mode:

  1. Navigate to Admin -> Structure -> Display modes -> View modes -> Add view mode
  2. Click Content (for nodes)
  3. Enter Standalone Description (machine name standalone_description)
  4. Save

Next, the new view mode must be configured:

  1. Navigate to Admin -> Content types -> [Content Type] -> Manage Display
  2. Scroll to the bottom and expand 'Custom display modes'
  3. Check Standalone Description (the view mode just created)
  4. Save.
  5. Click on the newly created Standalone Description tab
  6. Hide all fields other than the description
  7. Set the label to be 'visually-hidden' (For the sight-impaired)
  8. Set the format to your desired settings
  9. Save

When this is all said and done, the field on the node is rendered in a stand-alone HTML page, and is customizable through the newly created view mode.

Tags:

8

Recent Posts