Teaser

A teaser is the short version of a content item that Drupal shows in lists, such as the front page or a topic page. The user guide's example shows a thumbnail image and a Read more link to the full page. A teaser is not a field but a view mode named Teaser, which every content type configures on its own.

How teasers work in Drupal 11

The node module ships a view mode with the ID node.teaser and the label Teaser. The user guide describes view modes as the context that decides how an entity is displayed. On the Manage display page of each content type you switch between view modes at the top, and the Custom display settings section decides whether a view mode uses its own settings or the default ones.

Core's Article and Basic page content type recipes give the Teaser display the body with the formatter text_summary_or_trimmed (Summary or trimmed), label hidden, plus the Links component. That formatter works like this:

• If the editor filled in the summary, Drupal shows the summary.
• If not, it trims the body to the Trimmed limit, 600 characters by default, and cuts at a natural break before the limit.
• For the cut, TextSummary looks for the end of a paragraph first, then a line break, then the end of a sentence.

When the Teaser display shows the Links component, NodeViewBuilder always adds a Read more link, because core cannot tell whether the teaser differs from the full view.

Core uses teasers in three places. The Frontpage view lists promoted content as teasers at /node, the taxonomy term view does the same on each term page, and the Views wizard offers teasers as a display format for content listings. In a theme, node--teaser.html.twig overrides the markup; Olivero ships such a file. The old teaser template variable is deprecated in Drupal 11.1.0 and scheduled for removal in 12.0.0; use view_mode.

Example

Go to Structure › Content types, choose Manage display for your content type and open the Teaser tab. Put the image field above the body and keep the body on Summary or trimmed. Then edit a node of that type and use Edit summary in the body field to write a two-sentence teaser by hand. A list that uses the Teaser mode, such as the front page, now shows your sentences instead of an automatic cut.

Common mistakes

• Trusting the automatic cut. It can end after a sentence that makes no sense alone. Write the summary for pages that matter.
• Hiding the Links component. The Read more link belongs to it, so the teaser loses its link to the full page.
• Using the teaser variable in a new template. It is deprecated; compare view_mode with 'teaser'.

For marketing and content teams

In a listing, the teaser is what a visitor reads before choosing to click. Give important content its own summary, keep it to a sentence or two, and check the front page and topic pages after you publish. Ask your developer which fields the Teaser mode shows, so that the image and the first words fit the listing.

Sources

• Drupal User Guide: Concept: View Modes and Formatters
• Teaser view mode configuration, Drupal core 11.4.10
• TextTrimmedFormatter, Drupal core 11.4.10
• TextSummary, Drupal core 11.4.10
• Basic page teaser display, Drupal core 11.4.10
• Article content type recipe, Drupal core 11.4.10
• NodeViewBuilder, Drupal core 11.4.10
• Frontpage view, Drupal core 11.4.10
• Node Views wizard, Drupal core 11.4.10
• Field UI help text, Drupal core 11.4.10
• Change record: The teaser variable passed to node templates is deprecated