Using View Modes with Custom Views

What is a View Mode?

View Modes are the optional styles, settings, and/or configuration that can be applied to an entity to allow to be displayed in a specific way. Think of an article you've written. The news article node page will display with its title, primary image, text and any other content or fields you've chosen to fill in on the page. SiteFarm styles it so that the output is consistent from article to article. In another context—or view mode—that same information can can be presented as a teaser; it still includes the title, primary image and perhaps the first sentence of the summary or body content. It's the same component, but the view mode has changed its presentation. With the addition of SDC entity view modes, you have ability to manually decide to apply a specific pre-existing view mode to either your custom view or to the new Entity block.

How to use View Mode outputs from Views in Layout Builder

Configure your custom view

  1. In your view, create a Block display mode for your view.
  2. Locate the Format section in the first column of the left side of your View dashboard.
  3. Consider how you want your view output to be formatted. As an example, let's say we want to output three blocks across in a specific Section of a page's Layout Builder. In that case, we can change the default setting to Responsive Grid.
  4. In the Show section, change Fields to Content, then click on Default and change it to the type of View Mode output you want your block to be styled in. This example will use the Poster view mode.
    Be aware that view mode styles are not applied in the View's preview pane. This will only display on the page itself when you place the view block.

Place your block in Layout Builder

  1. Go to your basic page and click its Layout tab.
  2. Use an existing Section or add a new Section. Only a single column is required for this process.
  3. Click the + Add block button.
  4. From the flyout panel, use the Filter field to search for the name of your view. It will be listed under the Lists (Views) section. Click on the text link in the results.
  5. Confirm the block's configuration options, then click the Add block button.
  6. Review your work, then click the Save Layout button to finish.