What are View Modes in Drupal 8

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!

Instructor

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

0 0 votes
Blog Rating
Subscribe
Notify of
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Mark

Thanks for this article. Very cool!  

Is there a light weight module that would allow one to choose a view mode based on the url path?  Or on some other condition about the content.  I’d like to do something similar to your article, without needing views or display suite – to display a node of the same content type, slightly differently based on it’s taxonomy term.

OSCAR SANCHEZ

@mark did you find any answer to this? I having the same requirement!

Thanks

2
0
Would love your thoughts, please comment.x
()
x