Display Modes In Drupal 8

Display modes are one of the core functionalities of Drupal 8. They are easy to create and provides great flexibility in terms of theming at entity viewing and editing level. Display modes are available for content, comment, contact messages, custom blocks, taxonomy terms, users. They are also available to views adding more power to views.

Display modes are located at Admin -> Structure -> Display modes -> View mode.

Two types of display modes are available: “view modes” and “form modes.”  Both these are example of configuration entities.

View modes allows site builder to request a field to be rendered in a certain way. For example, we can have an article that has doctors field has entity reference. On article full mode display, we can request few details of doctor to be displayed. We can create a new display mode (“Doctor details”) to do so. On Doctor’s full view, we can include a brief summary of articles associated with them. 

To create View mode 

Navigate to Admin -> Structure -> Display modes -> View mode

1. Click on “Add view mode” to add new view mode

Add View Mode

2.  Created view mode is available on content types. Navigate to manage display of the content type and enable view mode.

Manage Display Console Test

Once enabled, this mode can be used on referenced field.

Once view modes are enabled, we can theme it as per requirements. To get template suggestions, you need to turn on debug property from services.yml. 

You can find theme suggestion in inspect element.

Display modes can also be used based on conditions and we can switch mode based on conditions.

function hook_entity_view_mode_alter(&$view_mode, Drupal\Core\Entity\EntityInterface $entity, $context) {
  // For nodes, change the view mode when it is teaser.
  if ($entity->getEntityTypeId() == 'node' && $view_mode == 'teaser') {
    $view_mode = 'my_custom_view_mode';
  }
}

Hope this helped you to understand Display Modes in Drupal 8, Feel free to drop us a line for any Drupal 8 related work/queries/tasks, or Need any assistance regarding Drupal 8 Web Development. Always ready to help 🙂 

Floating Icon 1Floating Icon 2