Views is a powerful module that allows you to create all sorts of components. It can be used to create something simple such as a list of articles, or complex such as a carousel or even an embedded map.
The Views UI can be intimidating if you’re new to Drupal, but as you use the module, you’ll find bits of functionality hidden deep in the interface.
One feature I want to discuss, which may not be evident at first, is the ability to add Twig code into view a fields.
Adding Twig code into a field allows you to change a field’s output dynamically. Which can be helpful under certain circumstances.
To add Twig code or some HTML into a field, click on the field, expand “Rewrite results”, check “Override the output of this field with custom text” and add your code into the text area.
In this tutorial, you will learn how to change the title field in Views depending on the “Promote to front page” checkbox.
NOTE: You can implement similar functionality using the Views Conditional module. Learn more about by reading “Conditionally Display View Fields using Views Conditional in Drupal”.
Getting Started
No extra modules are required. Views comes with Drupal core and it should be already installed.
We’re going to assume you have an article content type with bunch of articles already created. Some articles should have the “Promoted to front page” checked on the edit page.
Create “Latest Articles” View
Let’s create a view that will display the latest articles and it’ll just display the titles.
1. Go to Structure, Views, click on “Add view”, and fill in the new view settings using the table below:
| Views setting | Value |
| View name | Latest articles |
| Show | Content of type Article sorted by Newest first |
| Create a page | Checked |
| Display format | Unformatted list of fields |
Leave the rest of the fields as their default value and click on “Save and edit”.
Override Field with Custom HTML or Twig
1. To customize the output of a field click on title (or any other field) in the Fields section.
2. Then expand “Rewrite results” and check “Override the output of this field with custom text”. Enter in your custom text, HTML or Twig code in the textarea to override the field.
3. Enter some HTML into the field, for example:
This will <strong>override</strong> the output of the title field.
Click on Apply.
4. Then if you look in the preview area you’ll see that titles of the articles have been replaced with the override text.
Using Twig Variables (Replacement patterns)
The text added into the textarea can be dynamic using Twig variables, or as Views calls it “Replacement patterns”.
1. Go back to “Rewrite results” and click on “Replacement patterns” and see all the available Twig variables that can be added into the textarea.
2. If you add {{ title }} into the textarea and apply the change, then you’ll see a link to the article using the title.
Some fields will come with a raw value. This means it’ll output the title value, not the title and link.
If you look at the image below, you can see that the default title field is a link; however, the raw value is just the title.
A common use-case for overriding field values is to add some extra markup in the field. This saves you from overriding templates and writing custom code.
Using Other Field Values
It should be noted that you can use other field patterns (or Twig variables) in the field. However, you can only use fields which are above the field you’re working on.
This is mentioned in the fieldset where the token values are:
For example, if you add the body and authored on field after title then you won’t be able to add those fields.
If you rearrange them above title as shown below:
Then you’ll be able to use them in the title field. They will be shown in the “Replacement patterns” fieldset.
How to Rearrange Fields (Reorder)
To reorder or rearrange fields click on the down arrow next to Add in the Fields section and click on Rearrange.
Then reorder using the handle and click on Apply.
Display Dynamic Content using Twig If Statements
As you’ve seen we can override field values using Twig, and because of this, we can add Twig if statements which will allow us to display values depending on the value of another field.
Let’s override the title and add “Promoted” in the field if the “Promoted to front page” is checked.
1. We first need to add the “Promoted to front page” field to the view. Click on Add in Fields and search for “Promoted”.
2. Select “Promoted to front page” and click “Add and configure fields”.
3. Leave the configure field settings as default, and click on Apply.
4. Rearrange the new field so it’s above title.
If you look in the preview, you should see On or Off above title.
5. Click on Title, Rewrite results and click on “Replacement patterns”. You should see {{ promote }}. If you can’t see it then make sure you rearrange the field above title.
6. Enter in the following into the textarea:
<span class="custom--title">
{{ title }} {% if promote == "On" %}<strong>Promoted</strong>{% endif %}
</span>So {% if promote == "On" %} checks if promote is “On” and then it’ll display the HTML between if and endif.
If you want to learn more about Twig if statements, refer to the documentation.
7. If you take a look in the preview, you’ll see Promoted next to title.
8. Let’s remove the On and Off which is above title. Click on the “Content: Promoted to front page” and check Exclude.
This will hide the field from the display and not remove it.
Again, take a look at the preview and you will just see the title and “Promoted” if it’s been promoted.
Summary
Adding Twig code into view fields can be useful when you need to adjust what it displays. If you need to customize a field heavily then I’d recommend that you override the field template.
