View modes
Why view modes?
Most of the content in our site is driven by Blog articles. However, articles are being displayed in different ways. The Featured Content section shows articles differently than From our Blog. By "different" we don't mean they look different visually (which they do), but the fields displayed in each of the two sections vary. There are common fields such as the image, title, and body, but there are also fields that are unique to each section. Once we get into a full blog node, things look even more different.
There are many ways to manage how the same type of content can be displayed differently depending on the requirements, but one very effective way is to use Drupal's View Modes. View modes allows us to control the fields we want to display on different areas of our website. We are going to setup 3 different view modes: Full content, Featured, and Teaser. Each of these 3 view modes can be configured to display different fields.
Here's our plan with these view modes:
Default
This will remain untouched so it can serve as template for new view modes we may create in the future
Full content
This will be used when displaying the full node of a blog post (detailed page)
Featured
This view mode will be used by the Card Wide variant to build the Featured Content section in the homepage
Teaser
This view mode will be used by the regular Card component to build the From our blog section in the homepage
Manage fields with view modes
Managing fields with view modes ensures we are letting Drupal do things the way Drupal like to do things for rendering content. Then through the use of twig template suggestions per each view mode we integrate the components we want to use to render our content.
While still in the Article content type, click Manage display
Expand the CUSTOM DISPLAY SETTINGS fieldset
Click the Manage view modes link
Under the Content section click the Add new Content view mode link
Type Featured in the name field and click the Save button
Return to the Article content type Manage display screen
Expand the CUSTOM DISPLAY SETTINGS fieldset
Ensure Full Content, Featured, and Teaser are checked and press the Save button
Configure the Featured view mode
While still in the Article content type, click Manage display
Click the Featured view mode
Drag the Tags and Links fields into the Disabled section. Tags are not needed in Card Wide.
For the Author field change its format to Rendered entity
Change each of the field's labels to Hidden
For the Body field, change the Format to Trimmed and change the Trim limit to 125 characters by clicking the cogwheel icon to the right of the body field
Click the Update button
We'll comeback to configuring the image field with the right image styles later on
Click the Save button
Teaser view mode
Repeat all the steps above for the Teaser view mode except on step 3, drag the Author, Category, and Links into the Disabled section
For the Tags field, change its format to be Rendered entity
For step 4 above, trim the body text to 160 characters
Click the Save button
Full content view mode
Hide the labels of all the fields
For the Tags and Author fields change their format to Rendered entity
Save your changes
Last updated