Paragraph view modes

Exercise: Create a Hero View Mode Display

As we previously indicated, our heroes will be created using a paragraph we created. We could just use the default display mode, but let's set this up so it is flexible. This means that if we want our Hero to display in different ways like in Amazon, we are going to create different view mode displays.

1. From the admin toolbar click Structure | Paragraph Types | Hero | Manage Display

2. At the bottom of the page expand the Custom Display Settings fieldset

3. Click Manage view modes

4. Within the table with the heading of Content click the link Add new Paragraph view mode

5. In the Name field, type Hero then click the **Save **button

6. That's it, the view mode is created... but it is not yet enabled

7. Check the box next to Hero and click Save

8. Now the view mode is enabled but not yet configured for use

Exercise: Configure the fields to display in Hero view mode

Just like with Amazon, we are now going to determine which fields we want to display when we are viewing an article using the Hero view mode. Any given article has a large number of fields to display such as the title, body, date, author, image, tags, and others. However, for our hero, the only fields we need are the Image and Title. So let's configure them now.

1. While still in the Manage Display screen, click the Hero link which should be next to Default. Drupal provides out of the box a couple of view modes such as Default and Teaser as well as Full content. We will use these later on

2. While in the Hero view mode, you will see all the fields that are part of the Articles. We only want the Image and title fields so drag all the other fields under the Disabled section

3. Right now we are only going to set all the field labels to hidden. We will come back shortly to adjust a few things.

4. Click the Save button

Exercise: Configure the Hero Banner to display in the right format

With the fields in place to display as hero, let's make some final updates to the Homepage to ensure the Hero Banner displays in the right format.

1. From Drupal's admin toolbar, click Structure | Content types | Homepage | Manage display

2. Under the Label column select the dropdown and choose Hidden to hide the field label

3. Under the Format column select Rendered Entity from the dropdown

4. Click the cogwheel at the far right of the Hero field

5. For view mode select Hero and click the Update button

6. Click the Save button

With these updates we are telling Drupal that when the hero is rendered on the page, we want to use the Hero view mode display which will render the paragraph's fields in the format we defined earlier.