In Drupal, Display Modes define how content entities are rendered in different contexts.
They allow the same structured content to be displayed differently across the site without duplicating content.
Display modes are critical for:
- reusable frontend components
- Views integration
- API consistency
- performance optimization
- design system alignment
Senior Drupal developers use display modes to separate content from presentation strategy.
What are Display Modes
Display Modes are configuration presets that control:
- which fields are visible
- field order
- field formatters
- label visibility
They are available for multiple entity types:
- Node
- Media
- User
- Taxonomy Term
- Paragraph
Display Modes Architecture Diagram
Entity (Node)
|
├ Full
├ Teaser
├ Card
├ Carousel
└ Search Result
Each mode represents a different presentation strategy.
Real Project Example (Card Display)
Event content type supports multiple display modes.
Card Display Mode:
Featured Image
Title
Event Date
Short Summary
Read More Link
Used in:
- homepage event grid
- upcoming events block
- regional landing pages
Full Display Mode:
Title
Hero Image
Full Description
Location
Registration Link
Attachments
Used on event detail page.
How Display Modes Improve Architecture
Benefits:
- avoid content duplication
- consistent UI rendering
- flexible layout reuse
- faster frontend development
- cleaner Twig templates
Example reuse:
Event Node
→ Card Mode in View Grid
→ Carousel Mode in Hero Slider
→ Teaser Mode in Search
Display Modes vs View Modes (Important Clarification)
Display Modes are configuration definitions.
View Modes are the actual runtime usage of display modes.
Example:
Admin creates Display Mode: Card
View uses View Mode: Card
Twig template renders node--event--card.html.twig
Integration with Views
Views can render content using specific display modes.
Example:
View: Upcoming Events
Display: Grid
Row Style: Rendered Entity
View Mode: Card
This ensures consistent UI across pages.
Integration with Frontend Components
Display modes power modern UI patterns:
- card grids
- carousel sliders
- hero highlights
- search results
- sidebar teasers
Example Twig template:
node--article--card.html.twig
This template renders only the fields configured in Card display mode.
Performance Benefits
Display modes improve performance by:
- limiting field rendering
- reducing markup complexity
- enabling caching granularity
- avoiding heavy full content rendering in listings
Senior developers avoid using Full mode in Views listings.
Display Modes for Other Entities
Paragraph Display Modes:
- Compact
- Expanded
Media Display Modes:
- Thumbnail
- Hero Image
- Gallery Tile
User Display Modes:
- Author Card
- Profile Teaser
Headless / API Strategy
Display modes can influence API normalization strategies.
Example JSON output based on display selection:
{
"title": "Safety Training",
"date": "2026-05-10",
"image": "thumbnail.jpg"
}
Frontend apps map display modes to UI components.
Common Mistakes
- using Full mode everywhere
- not creating display modes early in architecture
- mixing layout logic into Twig instead of configuration
- inconsistent field formatters across modes
- ignoring cache implications
Display Modes in Drupal define how entities are presented in different contexts by controlling which fields are visible and how they are formatted. They enable reusable UI patterns such as cards, teasers, and search result displays without duplicating content. When combined with Views and Twig templates, display modes allow developers to maintain consistent frontend rendering while optimizing performance and caching.
Recall
- What is a Display Mode in Drupal?
- How do Display Modes integrate with Views?
- Why should Full mode not be used in listing pages?
- Can display modes be created for Media or Paragraph entities?
- How do display modes improve performance?
Memory Trick
Display Mode = Presentation Strategy
View Mode = Runtime Usage
Twig = Rendering Layer
Views = Listing Engine