Add Fields to Page

Learn how to add fields into a View.

We’ll cover the following:

  • How to add fields into a view.
  • The difference between “Content” and “Content Revision” field category.
  • How to add labels to fields.


Trainer (00:00):
From the format section, you can control how the view will be styled. So, if we click on unformatted list, you can see the available options. You can style content coming out of the view as a grid, as an HTML list, table, or unformatted list. Leave it set to unformatted list for now and then click on apply. And if we scroll down, we should see just the title field. Let’s scroll back up to fields. And because we already have the title field, let’s add in the rest of the fields.

Trainer (00:32):
To add a field, click on add, and here you can see all of the available fields that can be added to a view. Because we are querying content types we can see all of these fields, which are on the article and basic page content type. But if we were to create, for example, a view that displays users, then we’d see user fields right here.

Trainer (00:56):
So to add a field, all you need to do is find the field in this list. So you can use this search field up the top here. So let me search for image, and then check this check box, and click on add and configure fields. From the formatted dropdown, make sure image is selected and from image style, select thumbnail, and from link image to, select content. Now, one thing I should mention is that the options here in the centre change depending on the field type. Because this is an image field, we can select the image formatter and also the image style. So let’s go ahead and click on apply. And if we click on title, you will see most of the other options are the same, except for the middle section, which allows us to specify a formatter as well as the link to the content check box.

Trainer (01:47):
So, as you can see, the options in the middle vary depending on the field type. Let’s click on add again and search for body this time, and from the formatted dropdown, select trimmed, and let’s set the trimmed value to 200. This means that the view will show the first 200 characters of the body field. And let’s click on add again, and search for tags, and add that to the view and leave everything as it is, and click on apply. And finally, click on, add again, and let’s add in the created date. But I do know that the created date is called authored on. Now, straight away, you may notice that we have an authored by and an authored on. What is the difference? Authored by is the user who created the content. Authored on is the actual created date. So, that’s the field we want. But you’ll also notice that we have a field for content and content revision.

Trainer (02:50):
Again, what is the difference? Fields in the content category will display content from the most recent revision, and fields from the content revision category will show you revision content. So, nine times out of 10, you want to select the field from the content category. Go ahead and check authored on from the content category, and click on add and configure fields. The only change we’ll make here is from date format, we’ll select default short date format. And if we scroll down to the preview section, we can see our articles with title, image, a trimmed version of the body, tags, and also the created date.

Trainer (03:33):
Let’s go ahead and add in a label for tags and the created date. To do that, scroll back up and click on tags first, and check create a label, and then add tags as the label and check place a colon after the label, and click on authored on, and check, create a label as well, and add in created date as the label, and also check place a colon after the label. Then if we scroll down, we can see the tags and created date labels. Let’s change tags so that it is in line with the field similar to the created date. Now, to do that, scroll up and click on settings in the show section, not the tags field. And then check tags under inline fields and click on apply. Then if we scroll back down, we can see that tags is in line, same as the created date.

Scroll to Top