Improve the Editorial Experience with Type Tray and Page Templates

Orange post it notes arranged in a sideways pyramid, in front of a keyboard and computer mouse

The Type Tray and the Page Templates contributed modules can make your editors happier when creating content in Drupal. The goal is to make the Content → Add page more friendly to editors on sites with a large number of content types.

Drupal's Add Content page with the Type Tray and Page Template modules setup and configured. Each content type has an icon and each content type has a link to view existing nodes of that type.

Type Tray

This module improves the list of content types that editors see when they visit the Content → Add page. It does that by providing:

  •  The ability to indicate icons and thumbnails that visually represent the content types
  • A more user-friendly layout, which can be switched between Grid and List
  • An in-place full-text search
  • The ability to display quick links to existing content of a particular type
  • The ability to add a content type to a “Favorites” group per Drupal user.

Start by installing and enabling the module:

$ composer require 'drupal/type_tray:^1.1'
$ drush en type_tray

While not mandatory, defining a few Categories to group your content types is highly useful. 

Navigate to Configuration → Content Authoring → Type Tray Settings ( /admin/config/content/type-tray/settings ) to create them: 

Type Tray module settings page. Categories, fallback category, and Extended description format, and a toggle for the existing nodes link

Now edit each of your content types, and select the “Type Tray” vertical tab, to define additional information on each one:

Basic page content type settings, with the Type Tray vertical tab selected. The category selected is "Pages." Extended description. Short description.

Optionally, you can specify an icon and a thumbnail, which help users quickly visualize the kind of content this type is destined to.

After configuring this information on your content types, you are ready to navigate to the “Content → Add” ( /node/add ) and see the difference:

Demonstration of the Add Content page using Type Tray

Page Templates

This module allows you to convert any existing node into a “Template,” which editors can use to kickstart their real content.

Similar to Type Tray, download and install using your preferred method.

$ composer require 'drupal/pate:^1.0'
$ drush en pate

We start by enabling the functionality in the content types we are interested in. Edit the content type again, and in the “Page Templates” vertical tab, mark the corresponding checkbox. 

Article content type settings page with the Page Templates vertical tab selected. It shows the "allows converting into page templates" toggle setting

Now let’s create some templates.

To avoid unintended content disclosure, all templates are required to be unpublished at all times. This means we need to create a node of this type, make sure it’s unpublished, and then click the “Page Template” tab:

Article page from Umami template, with the "Page Template" tab highlighted.
Converting content to a template. A form with the button "convert into template"
Article content that no longer has an Edit tab

Again, to prevent accidental edits, while a node is converted into a template, further modifications (for example, publishing it) are not allowed. You can always “de-templatize” it at any point if you need to adjust how your template looks.

Once a content type has at least one template, we now have a new page available at /node/{type}/templates, where we can:

  • See a list of all templates for that content type
  • Click on a preview to check how the template looks when rendered
  • Use the CTA button to start creating a node from the template
Form giving the option of creating an article from a template or creating a blank article

 Clicking on the “Preview” button will open a modal where the template is rendered:

viewing a preview of the article template in a modal

This renders the entire page in an iframe, where clicks are disabled to prevent accidentally navigating editors away. If you feel having all elements on the page is distracting, look at hook_pate_template_elements_remove_alter()which you can use to remove elements from the previewed content easily.

When editors click the “Use this template” button (inside the modal or from the main templates list), a new node is generated where field values were copied from the template node: 

creating an article from a template. The content in the body field is already filled out.

Note that editors are always offered the alternate operation depending on the context.

When visiting /node/add/article a button at the top offers to create from a template instead:

Option to create from template on the node/add page. Button at the top of the form is highlighted

When visiting /node/{type}/templates a button at the top offers to create from a blank node form instead:

Page showing article templates, with New Blank Article button at the top highlighted

 

Bonus: Integration with the Admin Toolbar module

If your site uses the drop-down administration menu provided by the admin_toolbar_tools module (part of the Admin Toolbar project), some adjustments are made automatically to make it easier to navigate the editorial pages where templates exist:

Admin toolbar dropdown menus showing the options for creating an article from a template or a blank article

Using Type Tray and Page Templates together

These are two completely independent modules that can be used individually. It’s also possible to integrate a link to the Type Tray cards to the templates list if any templates exist. All you need to do is override the type-tray-teaser.html.twig template in your admin theme and print a link to the templates page. The result will be something like this:

Type Tray Add Content page with "Create from template" link under each content type

If you don’t want to display the "Create from template" link when there are no templates for that content type, you can preprocess this in PHP and only send to the template the link if it needs to be visible. This is the code: 

/**
 * Implements hook_preprocess_HOOK() for type_tray_teaser.
 */
function foobar_preprocess_type_tray_teaser(&$variables) {
  if (!empty($variables['content_type_entity']) && ($variables['content_type_entity'] instanceof NodeTypeInterface)) {
    // If this is a "templatable" content type, add the "Create from template"
    // link to type tray teasers.
    if ($variables['content_type_entity']->getThirdPartySetting('pate', 'is_templatable')
      && \Drupal::currentUser()->hasPermission('use page templates')) {
      $variables['create_from_template_link'] = Link::fromTextAndUrl(t('Create from template'), Url::fromRoute('pate.templates_for_type', [
        'node_type' => $variables['content_type_entity']->id(),
      ]));
    }
  }
}

Join us in improving the Drupal editorial experience!

Have you tried these modules and would like to provide feedback? Please let us know in the issue queues:

Thanks for contributing!

If you enjoyed this Article, you may also enjoy...

Marcos Cano

Thumbnail
Marcos is a Drupal developer who brings his extensive programming expertise, engineering background, and project management experience to bear on everything he does.

Featured Work

Latest Resources

Latest Podcasts

Let's Connect

Want to learn more about working with us or just say hello?

Contact Us