What are View Modes in Drupal 8

Drupal is well known for its flexibility in managing and presenting content. Drupal View Modes allow you to render (display) a Drupal entity or entities (like nodes) in a certain way, based on a particular context.

This tutorial will demonstrate the usage of Drupal View Modes with an example. We will install and also use the modules Field Group and Display Suite.

Let’s get started!

Step #1. Install the Required Modules

• Open terminal application and place the cursor in the root of the Drupal installation.
• Type:

composer require “drupal//field_group:^3.0″

composer require drupal/ds

• Click Extend.
• Enable Display Suite and Field Group.
• Click Install.

The system will prompt you to enable the Layout Discovery module.

• Click Continue.

No further modules are required.

Step #2. The Content Type

For the purpose of this tutorial, we am going to create a content type called ‘Famous person’ with the fields detailed in the table below. Follow along with the same content type or create another one, like ‘Author’, ‘Patient’ or even another entity type like ‘Member’, for example — remember, view modes can be applied to all kinds of entities, not just nodes.

The fields:

• Born
• Died
• Known for

will be grouped in a field group called Personal data.

Step #3.  Create the Field Group

• Click Manage display > Add field group.
• Select Fieldset in the dropdown.
• Add a proper label.
• Click Create group.

• Drag the fieldset below the Image field.
• Hide the Image label.
• Group the fields inside the fieldset by indenting them.
• Make the labels within the fieldset inline.
• Click Save.

Notice, that we are already configuring one of the two active view modes in Drupal (Default and Teaser).

The Default view mode shows the whole node, whereas the Teaser view mode shows the teaser display of articles on the front page of Drupal.

Step #4. Create Content

• Click Content > Add Content > Famous person
• Create 4 to 5 nodes

 Step #5. Create Custom View Modes

• Click Structure > Content types.
• Select Manage display for the ‘Famous person’ content type.

• Scroll down and click Custom display settings.
• Click Manage view modes.

Here we can configure existing view modes across different entity types (bundles). We can also create custom view modes to match our design or information requirements.

• Click Add view mode.

• Click Content.
• Give the view mode a proper name.
• Click Save.

• Create 2 more view modes.

I used these names:  Lifework view mode   –   Trivia view mode

• Click Structure > Content types.
• Select Famous person > Manage display.
• Scroll down and click Custom display settings once again.
• Check the 3 view modes you have just created.
• Click Save.

• Click the Personal data view mode.
• Scroll down and select Two column layout (under the Display Suite options) from the dropdown.
• Click Save.
• Click Save again (eventually) to move fields to the new column.
• Drag the Personal data fieldset to the top of the left column.
• Place the three corresponding fields accordingly.
• Place the image on the right column.
• Change the Image style to medium.
• Click Update.
• Drag all other fields to the Disabled section.
• Scroll down and click Save.

• Repeat the process with the other two view modes Using the layout options:
  • Three-column equal width
  • Three-column 25/50/25

Step #6. Create a View

• Click Structure > Views > Add view.
• Give the view a proper name.
• Select Content of type Famous person.
• Check Create a block.
• Change the number of Items per block to 1.
• Check Use a pager.
• Click Save and edit.

• Click the Fields option under the Format section.
• Select Content.
• Click Apply.

• Select the first view mode.
• Click Apply.
• Click Save.

• Click the Advanced section on the right of Views UI.
• Click on Use AJAX: No.
• Check Use AJAX.
• Click Apply.
• Click Save.

• Create 2 more blocks with the same process. The only setting that will differ will be the view mode in the Format section.

Step #7. Place the Blocks

• Create an article with just the title.
• Click Save.

• Click Structure > Block layout.
• Scroll down to the Content section.
• Click Place block.
• Search for all 3 blocks.

• Click Place block.
• Uncheck Display title.
• Restrict the block to the article we just created.
• Click Save block.

• Repeat the process with the other 2 blocks.
• Rearrange the blocks beneath the title.
• Click Save blocks.

Head over to the article and take a look.

Drupal coolness! Congratulations!

Please tell us how you plan to use this useful Drupal feature. Thanks for reading!