Learn how to rewrite the results of a field.

We’ll cover the following:

How to truncate a field using the “Rewrite results” option
Strip HTML tags from field values
How to use field tokens
And how to fully override the output of a field

Transcript

Trainer (00:00):
In a Views field, you can customise to a certain extent, what is rendered in a field. If we click on title, you can change the formatter, and you can make a title a link. If we click on image, for example, you can change the format as well and also the image style. And you can specify where the image should link to. Views also allows you to fully customise and rewrite the returned field results, and this is what we’ll look at right now. So, let’s customise the body field. And instead of using the trimmed format, we’ll use the options in the rewrite results section, which is below style settings to show a trimmed version of the body field, and a read more link.

Trainer (00:47):
To start things off, let’s change the formatter from trimmed back to default, and click on apply. And if we look in the previous section, we should see the article with the whole body field. Now, let’s go back into body, and click on rewrite results and check this option right here. Trim this field to a maximum number of characters, add 200 into maximum number of characters, and make sure trim only on a word boundary is checked. This means it’ll trim after a word. And also, you want to have the checkbox below checked as well, which adds an ellipsis to the end of the trimmed text. Then click on apply. And if we take a look in the previous section, we can see that most articles look good, except for the first one, which trims onto the next line.

Trainer (01:43):
And the reason why it’s doing that is because the field is still outputting paragraph tags. If we inspect the markup, you can see a P tag, which is the first line, and then we have two words before the body field is trimmed. Let’s configure the body field to strip out HTML tags. So, let me close this, go back up into body, then rewrite results, and scroll down and check strip HTML tags, then click on apply. And if we take a look at the preview, the trim body appears on one line. And if we inspect, we shouldn’t see any HTML within this field content span. Let’s now add a read more link. So, let me close this and go back into body, scroll down and check, add a read more link if output is trimmed.

Trainer (02:43):
And in more link label, enter in read more. This is the label of the link, and we need to specify the more link path. This is a link to the actual article. This can’t be hard coded, because every article path is different. We’ll need to use a replacement token for this. If you click on replacement patterns, you can see all of the available tokens, which can be used in some of these configuration options. We can add the title, the image, and also the body. So, what we need to do is add a link field to the view, which links to the article, and then add this link field token into the more link path. So click on apply, and then click on add next to fields and search for link, and then select link to content.

Trainer (03:36):
Then apply, then check, output the URL all as text, then click on apply. And if we scroll down to the preview section, we can see the field below created date, and it’s just showing the path. But if we go back into body and click on replacement patterns, we can’t see the field here. Why is that? It’s because due to the rendering order of the fields, we can only see fields that are above the body field, and it mentions it right here. The following replacement tokens are available for this field. Note, that due to rendering order, you cannot use fields that come after this field. If you need a field not listed here, rearrange your fields. So, all we need to do is reorder the link field above body, and that’s it.

Trainer (04:25):
Click on apply and to rearrange a field or reorder a field, just click on the down arrow next to add in the fields section, and then click on rearrange and move link to content above body, and click on apply. And if we look in the previous section, we can see the path is now above body. Let’s hide the link field, so it’s not displayed here. Scroll back up and click on link to content, and then simply check exclude from display. This will simply hide the field from the view, so we can use it as a token in the fields, then click on apply. And if we take a look in the previous section, we can’t see the field. But if we go back up and click on body, then replacement patterns, we can see the field as a token right here.

Trainer (05:17):
Go ahead and copy the token. Then scroll all down to more link path, and paste it in. Make sure there are no spaces before, or after the token. This space inside of the token is fine. But if you accidentally leave a space after the token, the link won’t work. So, make sure there are no spaces before or after the token. Once the token has been, click on apply. And if we scroll down and we should see the read more link after the trimmed body. And if you click on it, it should take you directly to the article. Let’s learn how to trim the body field in another way. If you use Drupal long enough, you will learn that there’s always multiple ways of doing the same thing.

Trainer (06:08):
And what I want to show you is how to customise the field using this option. Override the output of this field with custom text. Any text entered here will fully override the field, and you’ll use this option a lot, so it’s handy to know. Let’s trim the body field using this override feature, but first, we need to remove the other configuration. So, let me go ahead and uncheck all of these two check boxes, then click on apply. And if we take a look in the preview section, we can see the whole body field again. Let’s go back into body. And for this example, we need to use the trimmed formatter again. So, select trimmed and enter in 200 as the trim limit.

Trainer (06:58):
Then click on rewrite results, and then check override the output of this field with custom text. And we’ll need to use the replacement tokens. So, let’s first add in body. So, copy the body token, and then let’s put in an ellipsis after it. And then let’s copy in the link to content token as well. Then click on apply. And if we take a look in the previous section, we can see the trimmed body and the path to the article, but we need to change the read more to an actual link, instead of the path. So, scroll up and click on link to content, and then uncheck output the URL as text. Then add read more into text to display, then click on apply. And if we scroll back down, we now get an actual link, but you’ll notice that on the first article, it’s trimming on a new line.

Trainer (07:59):
And reason why this is happening is because a paragraph is used on the first line. Let’s fix this up. So, let’s close the inspector, scroll back up, click on body. Then rewrite results and then check strip HTML tags, but we need to preserve the read more link. So in preserve certain tags, enter in the A tag, then click on apply. And now if we scroll down, the trimmed body is looking much better.