| Drupal

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

What are View Modes in Drupal 8

What are View Modes in Drupal 8 

 

  • Click Extend.

  • Enable Display Suite and Field Group.

  • Click Install.

What are View Modes in Drupal 8

 

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

Field name

Field type 

Allowed number of values

Additional info

Image

Image

1

 

Born

Date

1

Date only - Field group Personal data

Died

Date

1shu

Date only - Field group Personal data

Known for

Text (formatted long)

1

Field group Personal data

Early life

Text (formatted long)

1

 

Lifework

Text (formatted long)

1

 

Death

Text (formatted long)

1

 

Trivia

Text (formatted long)

1

Bulleted list

File download

File 

Unlimited

Additional files to download / Allowed file extensions: txt, pdf, doc, xls, xlsx, docx, jpg, png

Related links

Link

Unlimited

Link to other resources

 

 The fields:

  • Born

  • Died

  • Known for

will be grouped in a field group called Personal data.

What are View Modes in Drupal 8


Step #3.  Create the Field Group

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

What are View Modes in Drupal 8

  • 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.

What are View Modes in Drupal 8

 

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

What are View Modes in Drupal 8


 Step #5. Create Custom View Modes

  • Click Structure > Content types.

  • Select Manage display for the ‘Famous person’ content type.

What are View Modes in Drupal 8

  • 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

What are View Modes in Drupal 8

 

  • Click Content.

  • Give the view mode a proper name.

  • Click Save.

200106 view modes 010

  • Create 2 more view modes.

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

What are View Modes in Drupal 8

 

  • 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.

What are View Modes in Drupal 8

 

  • 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.

What are View Modes in Drupal 8

 

  • Repeat the process with the other two view modes Using the layout options:

    • Three-column equal width

    • Three-column 25/50/25

What are View Modes in Drupal 8

 

What are View Modes in Drupal 8


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.

What are View Modes in Drupal 8

  • Click the Fields option under the Format section. 

  • Select Content.

  • Click Apply.

What are View Modes in Drupal 8

 

  • Select the first view mode. 

  • Click Apply.

  • Click Save.

What are View Modes in Drupal 8

 

  • Click the Advanced section on the right of Views UI.

  • Click on Use AJAX: No.

  • Check Use AJAX.

  • Click Apply.

  • Click Save.

What are View Modes in Drupal 8

 

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

What are View Modes in Drupal 8

What are View Modes in Drupal 8


Step #7. Place the Blocks

  • Create an article with just the title.

  • Click Save.

What are View Modes in Drupal 8

 

  • Click Structure > Block layout.

  • Scroll down to the Content section.

  • Click Place block.

  • Search for all 3 blocks.

What are View Modes in Drupal 8

 

  • Click Place block.

  • Uncheck Display title

  • Restrict the block to the article we just created.

  • Click Save block.

What are View Modes in Drupal 8

 

  • Repeat the process with the other 2 blocks.

  • Rearrange the blocks beneath the title.

  • Click Save blocks.

What are View Modes in Drupal 8

 

Head over to the article and take a look.

What are View Modes in Drupal 8

 

Drupal coolness! Congratulations!

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


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.