Learn how to customize view fields using Twig.
We’ll cover the following:
- What Twig is and how it’s used
- How to use Twig IF statements in fields
Resources
Transcript
Trainer (00:00):
We’ve looked at how to customise a field by using this option, “Override the output of this field with custom text”. By using it, we can add any HTML into the field and we can add other field values by using replacement tokens, like we did here in this body field.
Trainer (00:20):
Now I want to show you how to add Twig code into this text area, because if you pay close attention to the documentation below the text area, it mentions you may include Twig. Now for people who don’t know, Twig is a templating language which Drupal uses, and if we click on the Twig link, and I’ll open that up in a new tab, it will take us to the documentation. It has its own syntax and if we click on Twig for Template Designers and scroll down a little bit, it can be used to loop through arrays, set variables, filter values from variables and add if statements, and you can see an example right here.
Trainer (01:06):
Now you may be thinking, can’t I just use PHP? Isn’t PHP a templating language? Well, yes, you could use PHP and in Drupal 7 and below, it was the templating language, but using PHP to manage templates, is not secure. You could write PHP code in a template to query and delete content and if there’s an error in the code, you could bring down a whole site. So Twig was introduced in Drupal 8 and it’s a popular templating language for PHP. It’s not a Drupal specific thing. It’s used by other PHP projects.
Trainer (01:44):
What I want to show you now is how to use Twig if statements in Views, so let’s go back and if we scroll down, we should see “if”, and click on it. Here’s an example of an if statement using Twig. We can use this type of logic in the “Override text” area and this gives us the ability to conditionally show content in a field without writing any custom code. Technically, the only code we are writing is Twig code.
Trainer (02:17):
Let’s go back to our View and what we’ll do now, is conditionally display the word “Promoted” above the Body field if the “Promoted to front page” option is checked on an article, and if we close the Body field pop-up and scroll down and edit the top article, then click on “Promotion Options” and then check “Promoted to front page”, if this check box is checked, we’ll display the word “Promoted” above “Body”, so make sure “Promoted to front page” is checked and then click on save. Let’s close this tab and scroll back up to Fields and let’s add in the “Promoted to front page” field to this view. So click on add and search for “promoted”. Then check the field and click on apply. Then click on apply again and if we scroll down to the previous section, we can see the word “On” for our article which we promoted to the front page and the next article it is set to “Off”, which means it hasn’t been promoted to the front page.
Trainer (03:24):
Let’s rearrange the field so it’s above Body, so we can use it in the “Override text” area. So scroll up and click on the down arrow, then click on rearrange and simply move “Promoted to front page” above Body. Click on the Body field, then “Rewrite results” and make sure you can see the “Promoted to front page” in Replacement Patterns, which you can see right here, and then scroll back up to the Override Text area and then type in two curly brackets and percentage signs, and then type in “if” then “promote ==”, so two equals signs, then double quotes and the word “On”. Then we need to close this if statement by again, adding in two curly brackets, percentage signs, then endif. Then within the if statement, let’s paste in the actual HTML which will be displayed, which is “Promoted” in bold, and then a break tag at the end.
Trainer (04:30):
Now, because we are using the strong and break tag, we need to scroll down and add these tags into the “Preserve certain tags”, or they will be filtered out. So make sure you add them to “Preserve certain tags” and click on apply, and if we scroll down to the preview section, we can see the word “Promoted” for our first article which has been promoted to the front page.
Trainer (04:56):
Now let’s add in an else statement, which will allow us to display the words “Not promoted” if an article has not been promoted to the front page. Scroll back up and click on Body, then “Rewrite results”, and copy the endif, and paste it, and instead of endif, type in “else”, and let’s also copy “Promoted” and then add in a “not” in front. Then if we click on apply and scroll down, we can see the word “Promoted” for articles which have been promoted and then “Not promoted” for articles which have not been promoted to the front page.
Trainer (05:40):
One thing to be aware of, if you are going to add if statements, is that you need to know exactly what the field is returning. If we scroll back up and click on “Promoted to front page” and let’s customise the output and add in a bit of HTML, let’s add in an underline using the u tag and then click on apply.
Trainer (06:00):
And if we scroll down into the previous section, we can see all of our articles are displayed as “Not promoted” and this means that the if statement is not working, and the reason for this is because HTML is getting parsed into the “Promote” pattern token. To work around this, we need to add the exact HTML that is being returned into the if statement and we can see exactly what is being returned if we inspect the markup. And here you can see within field content, we have actual HTML, so if we copy this bit of HTML and then close the inspector and scroll all the way back up into Body, and instead of using just the word “On”, let’s paste in the exact HTML, and then if we scroll down, we should see “Promoted” for the first article and “Not Promoted” for the second article. Now the if statement is working as expected.
Trainer (07:07):
So if you are having trouble with your if statements and they aren’t working as expected, have a look and see what exactly is being returned by the field. Let’s now clean up the “Promoted to front page” field, so scroll up and click on the “Promoted” field and we’ll remove the customization, and let’s also exclude the field from the display and click on body, and we’ll also remove the HTML in the if statement. Then click on apply and if we take a look in the preview section, we can see that the if statements are working correctly.