Hero Post: Dive into View Modes

Girl 1

View modes provide us with a way to customise the display of entities. You may be familiar with two existing view modes - full and teaser, but did you know you can add new view modes and customize those as well?

In this post we're going to add a view mode and modify the display of the "Article" content type with Display Suite.

Display Suite

You will need to install the Display Suite module for Drupal 8. DS requires the Layout Plugin module.

  • https://www.drupal.org/project/ds
  • https://www.drupal.org/project/layout_plugin

Adding View Modes

To add a view mode go to: ~admin/structure/display-modes/view

Click the button "Add new view mode".

From the list of entity types click "Content".

Give your view mode a name, such as "Hero" and save it.

Enable the View Mode

Navigate to the "Manage Display" tab for your content type, we are using the Article content type: ~/admin/structure/types/manage/article/display

Below the fields find the vertical tab named "Custom display settings", check the option for the new view mode and save the settings. Now the view mode will be available to customise just like full and teaser.

Modify the Display

On the same Manage Display page click the link for the new view mode. Here we can adjust the display of fields just for this view mode. To really take control we're using Display Suite, which gives us full access to all Layout Plugin layouts and a bunch of new fields, such as the title.

We're going to use the Adaptivetheme One Column layout, choose this from the "Select a layout" drop list and save.

Now we can drag the fields we don't want into the disabled area, and move the ones we want into the active column (or columns if you choose a multi-column layout). Make further adjustments such as image size, markup such as title wrapper and classes (e.g. use the spaceless class to remove padding and margin).

Using Custom Displays

Now the really cool bit. You can use this new view mode display in blocks and views! For example you can create a custom block type with an entity reference field (content) and in the field display setting select "rendered entity" and display mode "hero".