View modes
Last updated
Last updated
Drupal provides the ability of creating view modes to be able to display content in many ways. If we look at the Amazon example above, we have outlined each of the ways in which any product can be displayed. There are actually many other ways in which a product is displayed in Amazon but we don't have enough room for all of them. The point is that based on where a product should be displayed, amazon changes the information for each display.
This is the full view of any product. Here you will see all the details about the product including name, brand, price, dimensions, etc.
This option shows us a more compact option for the products which are the rating and a link to a page where they can be found, in addition to the image.
This view display is even more compact than the previous one with only an image, name and rating
The same is true for this view display option
Finally, this option is as bare bones as possible with only the image of the product
Drupal let's us do the same thing for our content. Whether they are products or article pages. View mode displays are super powerful and we will make use of them throughout this course. We will start by creating a new view mode display for the hero.
As we previously indicated, our heroes will be created from existing article nodes. This means that if we want our articles to display in different ways like in Amazon, we are going to create different view mode displays.
From the admin toolbar click Structure | Content types | Article | Manage Display
At the bottom of the page expand the Custom Display Settings fieldset
Click Manage view modes
Within the table with the heading of Content click the link Add new Content view mode
In the Name field, type Hero then click the **Save **button
That's it, the vie mode is created... but it is not yet enabled
Repeat steps 1 - 3 above
Check the box next to **Hero **and click Save
Now the view mode is enabled but not yet configured for use
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.
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
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
For the Image field, click the little cog wheel located on the far right of the table row next to image, and select none (original image), as the image style then press the **Update **button
Click the Save button
WARNING: Where is the title field? If you were looking for the title field in the previous exercise, you probably noticed that it is not available. This is a Drupal thing and I honestly don't know why Drupal does this. The point is that although the field is not visibly available, it is still being available when the articles renders on the page. For now, just know that although we can't see the title field, it will still be available when the page renders.
With the fields in place to display as hero, let's make some final updates to ensure the image and title fields display in the right format.
From Drupal's admin toolbar, click Structure | Content types | Homepage | Manage display
Under the Label column select the dropdown and choose Hidden to hide the field label
Under the Format column select Rendered Entity from the dropdown
Click the cogwheel at the far right of the Hero field
For view mode select Hero and click the Update button
Click the **Save **button
With these updates we are telling Drupal that when the hero is rendered in the page, we want to use the Hero view mode display which will give us only the selected article's Image and title and will ignore all other fields for the article.
