Imagine this: you’re building a new Drupal site and your project lead says,

“On the homepage, I want our News posts to look like neat little cards with just the image,  title and publishing date. But on the article page, I want the full content with the complete texts, tags, and links to related articles. Oh, and for the newsletter feed section, I just need the title and a short description. And while you’re at it, please create a separate page for the News contents to look like Instagram-like feeds. Got it? Thanks!”

If you’re new to Drupal, your first instinct might be: “Wait… do I need three or four different content types for this?” 😅

The good news is — nope, you don’t. That’s exactly what View Modes are for.

View Modes let you present the same content in different designs/layout  depending on where it’s being displayed. It’s one of Drupal’s most underrated superpowers, and once you learn how to use them, you’ll never look at content display the same way again.

So… What Exactly Are View Modes?

Think of view modes as different “outfits” for your content.

  • Your full content outfit = everything (title, body, tags, comments).
  • Your teaser outfit = maybe just the title, image, and summary.
  • You can even invent your own outfits, like “Card,” “Insta,” or “Grid.”

It’s the same piece of content underneath, but you’re choosing how much to show, and how to style it. 

Surprisingly, Drupal provides basic view modes like full and teaser for node, taxonomy vocabulary and user entities out of the box.

Not bad, but most real-world sites quickly outgrow these defaults. That’s where custom view modes come in.

Creating Custom View mode

First, go to Configuration → Display modes → View modes (/admin/structure/display-modes/view). This admin page lists all available view modes for different entities. 

You may click the top-most  Add view mode, or click the same button under a specific entity type.

Either way, a dialog will popup asking you to set the Name, Machine Name and select which specific content types or taxonomy vocabularies this new view mode applies to. In our case above, let’s assume we already have a News (machine name: news) content type.

After creating, navigate to the content type’s Manage display option. (/admin/structure/types/manage/news/display)

You will see the newly added view mode! You may then configure which fields will appear on the display and the expected format for each field.

For example, for the Card view mode on the front page, set only the image, title and publishing date fields to appear for this view mode. This way, you can tailor how content is displayed without duplicating templates. 

For Insta view mode:

Using View Modes in Views

Custom view modes shine when used inside Views. In our case where the lead requested us to create an Instagram-like page, we expect that this page will only display the image and perhaps the title of each news content.

  1. Create a View page  (e.g., /news).
  2. Under Format → Show, choose Content.
  3. Select your custom view mode (e.g., “Insta”).

Now, the listing will display each node in this Instagram-like view mode layout.

Theming with View Modes

Interestingly, each view mode can have its own Twig template. Like fashioned in different outfits, view modes provide flexibility in how an entity will be presented in different scenarios. 

To declare view mode specific templates, follow the following pattern:

<ENTITY_TYPE>––<BUNDLE>––<VIEW_MODE_MACHINE_NAME>.html.twig

For example, in the Card view mode for News nodes, you can create: 

node––news––card.html.twig

And for Inta view mode display, you can name it like node––news––insta.html.twig

This gives you full control over markup per view mode.

Indeed, view modes are a flexible and powerful feature in Drupal that let you present the same content in multiple ways without hacking templates or duplicating content types. Whether you’re building teasers, cards, or specialized displays, view modes help keep your site consistent, maintainable, and scalable.

If you’re not using them yet — it’s time to add them to your Drupal toolbox!

So the next time someone asks you to show the same piece of content in different ways, don’t panic. Just smile, nod, and reach for view modes. Your future self (and your teammates) will thank you. 🙌🙌🙌