---
title: "Improve the Editorial Experience with Type Tray and Page Templates"
url: "/articles/improve-editorial-experience-type-tray-and-page-templates"
type: article
date: 2021-08-17
updated: 2021-08-18
---

# Improve the Editorial Experience with Type Tray and Page Templates

#  Improve the Editorial Experience with Type Tray and Page Templates 

 An overview of the Type Tray and the Page Templates modules, which can be used to make your editors happier when creating content in Drupal.

 By

 [  Marcos Cano   ](/about/marcos-cano) 

 August 17, 2021

  

The [Type Tray](https://drupal.org/project/type_tray) and the [Page Templates](https://drupal.org/project/pate) 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.](/sites/default/files/styles/max_900/public/2021-08/content-add.png.webp?itok=JltjyhcK)

## 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:

```bash
$ 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](/sites/default/files/styles/max_900/public/2021-08/type-tray-settings.png.webp?itok=ia2niwlt)

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.](/sites/default/files/styles/max_900/public/2021-08/content-type-settinsg.png.webp?itok=9x_6ZqAq)

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.

```bash
$ 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](/sites/default/files/styles/max_900/public/2021-08/article-content-type.png.webp?itok=tCzLylR5)

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.](/sites/default/files/styles/max_900/public/2021-08/article-sample.png.webp?itok=GYBR0joD)

 ![Converting content to a template. A form with the button "convert into template"](/sites/default/files/styles/max_900/public/2021-08/convert-to-template.png.webp?itok=WKlVOi82)

 ![Article content that no longer has an Edit tab](/sites/default/files/styles/max_900/public/2021-08/no-edit-tab.png.webp?itok=TIV8f8a4)

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](/sites/default/files/styles/max_900/public/2021-08/new-article.png.webp?itok=SsPfPqNH)

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

 ![viewing a preview of the article template in a modal](/sites/default/files/styles/max_900/public/2021-08/preview-template.png.webp?itok=r_oaJ_OJ)

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.](/sites/default/files/styles/max_900/public/2021-08/creating-from-template.png.webp?itok=AbvCkFuv)

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](/sites/default/files/styles/max_900/public/2021-08/create-from-template-node.png.webp?itok=CBtyhYGY)

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](/sites/default/files/styles/max_900/public/2021-08/node-type-templates.png.webp?itok=_ln5LSk9)

### **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](https://drupal.org/project/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](/sites/default/files/styles/max_900/public/2021-08/admin-toolbar.png.webp?itok=wntSrt8T)

## 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](/sites/default/files/styles/max_900/public/2021-08/type-tray-templates.png.webp?itok=B54MReq2)

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:

```php
/**
 * 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:

- [Type Tray](https://www.drupal.org/project/issues/type_tray) issue queue
- [Page Templates](https://www.drupal.org/project/issues/pate) issue queue

Thanks for contributing!

 Published in:

- [  Drupal Development   ](/topics/drupal-development)
- [  Drupal Site Building   ](/topics/drupal-site-building)

 

   You must have JavaScript enabled to use this form.

## Get in touch with us

### Tell us about your project. We'd love to hear from you!

 First Name  

 Last Name  

 Your email address  

 Your organization  

 How you heard about us  

 Tell us more 

     Leave this field blank