In Drupal, View Modes define how an entity is rendered in a specific runtime context.
While Display Modes define the configuration and structure, View Modes represent the actual usage of those display configurations in Views, templates, and frontend components.
Understanding View Modes is critical for:
- scalable frontend architecture
- reusable UI patterns
- Twig template overrides
- performance optimization
- clean separation of concerns
Senior Drupal developers use View Modes to create consistent rendering strategies across the platform.
What are View Modes
A View Mode is the render context in which an entity is displayed.
Common examples:
- Full
- Teaser
- Card
- Search Result
- Carousel
- Sidebar Teaser
Each View Mode uses a corresponding Display Mode configuration.
View Modes Architecture Diagram
Entity (Node)
|
↓
View Mode (Card)
|
↓
Display Mode Config (Fields + Formatters)
|
↓
Twig Template Rendering
Real Project Example (Events Listing)
Event content is rendered using different View Modes.
Card View Mode:
Image
Title
Event Date
Short Summary
Read More
Used in:
- homepage upcoming events grid
- regional event listing
- promotional landing pages
Teaser View Mode:
Title
Date
Summary
Used in:
- search results
- sidebar listings
Full View Mode:
All fields
Used on event detail page.
Integration with Views
View Modes are most commonly used inside Views.
Example configuration:
View: Upcoming Events
Row Style: Rendered Entity
View Mode: Card
This allows the same node to be rendered differently depending on page context.
Twig Template Strategy
View Modes map directly to Twig suggestions.
Example templates:
node--event--card.html.twig
node--article--teaser.html.twig
node--news--search-result.html.twig
This enables:
- component-based theming
- design system alignment
- predictable template overrides
View Modes and Design Systems
Modern Drupal sites use View Modes to power:
- card components
- carousel slides
- hero highlights
- search snippets
- grid tiles
Frontend teams map View Modes to UI components.
Example mapping:
View Mode: Card → React / Twig Card Component
View Mode: Carousel → Slider Component
View Mode: Teaser → Compact List Item
Performance Considerations
Using correct View Modes improves performance by:
- reducing field rendering
- minimizing database joins
- enabling granular caching
- avoiding heavy full entity builds
Senior rule:
Never render Full View Mode in large Views listings.
View Modes for Other Entities
Media View Modes:
- Thumbnail
- Hero Image
- Gallery Tile
Paragraph View Modes:
- Compact
- Expanded
User View Modes:
- Author Card
- Profile Preview
Headless / API Perspective
View Modes influence how frontend apps consume structured content.
Example API usage:
/events?view_mode=card
Frontend applications then render consistent UI blocks.
Common Mistakes
- not creating View Modes early in project
- mixing layout logic inside Twig
- rendering too many fields in listings
- ignoring cache contexts
- inconsistent component mapping
View Modes in Drupal define how an entity is rendered in a specific runtime context such as a card listing, teaser block, or full detail page. They work together with Display Mode configurations and Twig template suggestions to enable reusable UI components, consistent rendering across Views, and performance-optimized content delivery.
Recall
- What is a View Mode in Drupal?
- How does View Mode differ from Display Mode?
- How do View Modes integrate with Twig templates?
- Why should Full View Mode be avoided in large listings?
- Can View Modes be used for Media or Paragraph entities?
Memory Trick
Display Mode = Configuration
View Mode = Runtime Rendering
Twig = Component Layer
Views = Content Listing Engine