Learn how to configure field formatters on view modes.
We’ll cover the following:
- How to control the field formatter labels.
- How to manage view modes.
- What the difference is between the default, teaser and full content view mode.
Transcript
Trainer (00:00):
In a previous video we looked at how to configure and use field widgets. Just a quick recap, field widgets are the form elements which are used to add content into fields, and here you can see the field widgets. Now I want to discuss how to configure field formatters, because formatters are used to render field values to the end user, and all of the field values right here are rendered by field formatters. To configure formatters go to structure, content types, and then click on manage fields on the product content type. Every fieldable entity has these three important tabs, manage fields, manage form display, and manage display. From the manage fields you can create and reuse fields, from the manage form display you can configure the field widgets, and from the manage display, you can configure the field formatters, and this is what we’ll be focusing on in this video.
Trainer (01:06):
Field formatters are configured the same way as widgets. A field can choose any number of formatters from the format dropdown, and some have their own configuration, which you can access by clicking on the cog wheel. You can also configure the field label from the manage display page. You can have the label displayed above, inline, hidden, which fully hides the label, and visually hidden. Visually hidden will still add the label to the markup, but it will hide it via CSS. This makes it easier for screen readers to read field label.
Trainer (01:52):
Let’s now configure the field formatters on the product content type. So what I’ll do is I’ll move links down to the bottom, and I’ll move product summary to the top, and I’ll hide the label, and I’ll move product type and price above the body field, and I’ll change the label from above to inline for price and also product type, and then I’ll click and save the page. Now if we go to the product page we should see our product summary right up at the top, then we have price and then we have product type, and then we have the body field below that.
Trainer (02:43):
Let’s now jump back to the manage display page and I’ll refreshed the page. You may notice that on this page we have extra options. We have a default and teaser tabs up here, and we also have this custom display settings field set. These options within the custom display settings are called view modes, they allow you to contextually group field formatters. When you instal Drupal using the standard installation profile the only view mode which is enabled is teaser, that is why it is checked in this list of view modes. The default view mode is used when Drupal tries to use one of the disabled view modes. If it’s disabled then the default is used. The teaser view mode is used for the front page listing view. Another way to think of it is as a summarised or cut down version of the content.
Trainer (03:44):
So if we were to edit one of our products, so let me jump to this tab and then go and edit this product page, and let’s go ahead and promote it to the front page. So I’ll click on promotion options and then check promoted to front page, and then click on save. And if we go to the homepage, we should see our product right here, and you can see that it’s currently displaying two fields. We have a read more, and we also have the body field right here. And then if we jump back to the other tab, we can see these two fields, links, and also body.
Trainer (04:24):
Let’s now change our teaser view mode. So what I’ll do is I’ll move price and also product summary, as well as the product type. So let’s tweak the labels, and I’ll change price so that the label is inline, product type will also be inline, and for the product summary, let’s change it to hidden, and let’s move links below body, and let’s also remove body from the teaser view mode. And then if we click on save, and then if we jump to the other tab and refresh we can now see price, product type, and then we can say the product summary in the teaser view mode of the product. Let’s go back to the other tab, and then go to default, and then scroll down and click on custom display settings.
Trainer (05:21):
Another useful view mode to enable is the full content view mode. This view mode is used when you view the actual content page. So if we were to view the product page, if full content is enabled it will be used on this page. Any content page that starts with node/ and then the ID. So let’s jump back into manage display, and let’s go and enable full content, and now you should see a new tab quarter full content appear between default and teaser. If we were to change the default view mode now, nothing will change on the product page because full content is enabled. So let’s go ahead and disable the price field, and then if we jump back to our product page and refresh, we’ll still see the price field, because if we want to customise this view mode, we now have to click on full content and configure these formatters. But it’s important to remember that the default configuration will be used on the disabled view modes. If you want to customise any of these view modes simply enable them and then configure the formatters.