Exploring the New Drupal 8 Display Modes

Last week as I was looking over the Drupal 8 landing page on Drupal.org, I noticed a section titled "Customize display and form modes" and my curiosity was piqued. I fired up an instance of Drupal 8 on Simplytest.me to take a look. After a bit of poking around, and a little bit of confusion, I sorted out what this new feature means for us. It's a pretty neat thing, but let me start by explaining the roots of this in Drupal 7, with the concept of "view modes."
 
You may not know what these are called in Drupal 7, but if you've ever made a node look different in the teaser view from the full node view, you've used view modes. When you go to the "Manage display" tab on a content type you can see some sub-tabs in the upper right corner. These are Drupal 7 view modes, and they let you change how a piece of content looks when viewed in different contexts. You can modify what appears in the sub-tab list by toggling a list in the "Custom Display Settings" at the bottom of the screen. You can extend and do more modification to this system in Drupal 7 using a module called Display Suite. (You can find out more about that in Drupal 7 with this free Display Suite video series.)
 
Image
 
Now in Drupal 8 you have more control over defining the display modes available right in core, and you can do a similar thing for the form version (where people input data) versus the display version (where people see the finished result). You can manage these settings in a new administrative section under Structure called "Display Modes." You can create or modify the existing view modes that come with core. You can also work with form modes for the form side of things. When it comes to using your new display modes, you still access them in the same place, but you have an additional tab in Drupal 8. In Drupal 7 you have both the field and the field widget on the "Manage fields" tab of a content type. Now this has been broken into two tabs: "Manage fields" and "Manage form display." This gives you more flexibility over how things will appear when someone is looking at the form. The "Manage display" tab is still the same as it was in Drupal 7. In addition to content types, you can also manage view modes for users, taxonomy, comments, and custom blocks. Right now you can only manage form modes for users.
 
To see what all of this looks like, here's a quick video I recorded of me playing around with this new setup in Drupal 8.
 

Comments

Thanks Addi - I was just foolin' about with the latest alpha and hit display modes. I also didn't really know what it was for or how it fit, so I asked Google, and you answered!
cheers
Donna

Hey Addi,
Thank you for this video! Do you know if/how you can create distinct regions within the node so you can put fields into "content" or "sidebar" regions?
-Kendall

Hi Kendall, I don't know about that feature in Drupal 8. That isn't part of the view mode feature in core that I'm aware of. I think it is more related to the Layouts initiative that was removed from D8 (https://drupalize.me/blog/201502/panels-blocks-layouts-and-drupal-8). You may want to take a peek at the Display Suite (https://www.drupal.org/project/ds) D8 alpha to see what they are cooking up. While GUI view modes are in core, not all features of Display Suite are in core.

Hello Addison Berry,
thank you for video, it was very helpful. But i have one problem. I have made the settings in display mode, but the Manage Display tabs "teaser or standard" dont appear. Can you help me? I am beginner and use drupal 8 beta 15
Best
Karl

Hi Karl, on the Manage Display tab have you opened up the Custom Display Settings at the bottom and checked off the tabs you would like to see appear? Is "standard" a new view mode you have created?

I have solved the prblem. In the core theme seven was a mistake with drupal 8 beta 15

Hi, Thanks for the video and description. How can I create a form with 3 columns? In drupal 7, it was very easy to create them using Display suite module. Now in Drupal 8, how can I make it with the help of Display modes?

Hi Vishnu, this is a great idea for a future tutorial! We will add it to our list. We are currently working on producing tutorials based on Drupal 8's recent release. (This blog post was written during the development cycle.)

Hi.
I am using Drupal 8 and have been looking for a solution on how to create a 2-column layout for a content type's node add/edit form on my site but have had no luck. Do you think you could guide me in the right direction? Thanks in advance.

Hi Sigor,

I haven't worked with multiple columns in D8 yet, but my first place to look would be Display Suite (https://www.drupal.org/project/ds), which is already out for D8 and provides a lot of additional functionality that dod not go into core.

Is there any way in display suite ui to hide a field if someother field has data in it, like if view mode is created for node of particular types and we create a view and set display suite as format and set our custom view mode to show the node on page, if video field has data , then hide the image field in same view

While this is great, I can't figure out how to assign a display mode to a particular type of content without Display Suite. What's the point of having it in core if you can't assign it per node?

Also, is there a way to have a different twig template for nodes with different display modes without DS, or do we need DS for that too? We have a situation where most basic pages have a side left menu, but want certain pages to be full width (no side menu) and we are wondering if we have to build a whole new content type to do that. We used DS on our D7 sites, but my developers want to use twig for all layout.

I'm not sure off hand if there are theme hook suggestions for display modes, but there might be. Check out this tutorial on discovering existing theme hook suggestions - Discover Existing Theme Hook Suggestions - if there are, you could just name your Twig template file using the appropriate theme hook suggestion and the you could have a template that is specific to a node type + display mode.

If those suggestions don't already exist, you can always write some logic into your .theme file that would make them exist. Add New Theme Hook Suggestions.

Good day! I could have sworn I've been to your blog before but after browsing through many of the posts I realized it's
new to me. Nonetheless, I'm certainly delighted I found it and I'll be book-marking it and checking
back frequently!

Add new comment

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <code class> <ul type> <ol start type> <li> <dl> <dt> <dd><h3 id> <p>
  • Lines and paragraphs break automatically.

About us

Drupalize.Me is the best resource for learning Drupal online. We have an extensive library covering multiple versions of Drupal and we are the most accurate and up-to-date Drupal resource. Learn more