Site Building

Use View Modes with Media Entities in Drupal for Drupal 8, 9, and 10

Media entities, like any content entity, work great with all the different features Drupal provides for changing the way things are displayed: view modes, Layout Builder, theme templates, and more. We're big fans of using view modes to create a component-like design system where entity types have view modes representing the different context in which they're displayed. Then we theme the view modes. This works great for displaying Media entities associated with a page and for changing the way that Media assets are displayed within the Media Library browser.

In this tutorial we'll:

  • Create Hero and Sidebar view modes for Media entities
  • Configure the Image Media type to use the new view modes and style each one differently
  • Use the new view modes to render Image Media assets within a Layout
  • Update the Media library view mode that's used by the Media Library browser to display additional information alongside the thumbnails used when selecting Media to attach to a page

By the end of this tutorial you should be able to change the way that Media assets are displayed by using view modes and display formatters in a Drupal site.