How to Rewrite the Output of Views Fields in Drupal

One of our customers asked how to tweak the fields of a table output by Views to give the table a cleaner look.
They were looking for a way to merge the fields of the first and second columns. They also wanted to display the file download link just with an icon.
There are a couple of ways to achieve this. One of them is to rewrite the output of Views’ fields.
This tutorial will explain how to rewrite the results of any Views’ field. We can rewrite the results, regardless of what display the view is using (table, list, grid, etc).
Step #1. Download the Required Module
In order to link the image field to the file, it’s necessary to install the Linked field module.
You can install the module via the Drupal admin area, or you can use Composer. If you’re using Composer, type in your terminal the following line:
composer require drupal/linked_field
Regardless of which install option you choose, go to your Drupal admin area:
- Click Extend and enable the Linked Field module.
- Click Install.
Step #2. Create the Content Type
Let’s create the content type that we’ll use for this guide:
- Click Structure > Content types > Add content type.
- Create a content type and give it a proper name, for example Issued Paper.
- Click Save and manage fields.
- Add the following fields:
- Label: Authors / Field type: Text (plain).
- Label: Pages / Field type: Text (plain).
- Label: Reference / Field type: Number (integer).
- Click Add field.
- Select File from the dropdown list.
- Give this field a proper label.
- Click Save and Continue.
- Leave the default values and click Save field settings.
- Scroll down to the Allowed file extensions option, delete txt and replace it with pdf.
- Click Save settings.
- Click Add field.
- Under the Reuse an existing field dropdown select Image.
- Click Save and continue.
- Check this field as required.
- Upload a default “pdf icon” image.
- Write an alt text for this image.
- Change the file directory to pdf-files.
- Scroll down and click Save settings.
- Click Manage form display.
- Drag the Image field to the Disabled section and click Save.
By disabling the field in the form, giving it a default value and making it required, we make sure that the same image (in this case an icon) will be displayed on all nodes of the same content type.
- Click Manage display.
- Drag the File field to the disabled section.
- Click the cogwheel besides the Image field.
- Check Link this field.
- The destination will be the files folder. From the Available tokens section, select the
[node:field_file_download:entity:url]
token. - Click Update.
- Rearrange the fields.
- Click Save.
Step #3. Create the Content
Now let’s use the content type we just created. We’ll add some new nodes to our site:
- Click Content > Add Content > Issued Paper.
- Create three or more nodes.
Your Content listing screen should look more or less like this:
Step #4. Create the View
Finally, we’ve reached the point where we can create the View.
- Click Structure > Views > Add view.
- View Content of type Issued paper.
- Check the Create a page checkbox.
- Display it as a Table of fields.
- Click Save and edit.
- Click the Add button in the FIELDS area.
- Type the name of your content type in the search box (e.g. “Issued paper”) – it works best with the machine name.
- Select all fields except the body field.
- Click Add and configure fields.
- Click Apply and continue five times for now.
- Rearrange the fields like in the following image.
- Click Apply.
- Click the Authors field and exclude it from the display.
- Click Apply.
- Click the Title field, uncheck Link to the content and click Apply.
- Click the File Download field, exclude it from display and set the Formatter to URL to file.
- Select the Image field, and set the Formatter to Image, choose Thumbnail 100×100 pixels.
Your Fields section should look like in the following image (click to enlarge it):
Now it’s a good time to rewrite the output of these fields. Rewriting results is about displaying additional information that is different from the actual field within that field.
You achieve this through the use of tokens. It may sound complicated but it’s not. Let’s take a look at how it’s done.
Step #5. Rewrite Results
Finally, we’ve reached the last step! We have created our View. Now we can rewrite the output.
- Click the Title field.
- Click Rewrite results.
- Select Override the output of this field with custom text.
- Click Replacement patterns.
- Copy the {{ title }} token and paste it in the text area.
- Wrap this token between the
h2
tags. - Copy the
{{ field_authors }}
token and paste it below the{{ title }}
token. - Click Apply.
Notice that you can only rewrite the results of this particular field with the tokens of the fields that are above in the Fields section of Views UI.
- Click the Image field.
- This time check the Output this field as a custom link checkbox.
- In the Link path textbox enter the
{{ field_file_download }}
token (available in the REPLACEMENT PATTERNS section). - Click Apply.
- Save the view and take a look at the page of this view on your frontend.
- Click one of the download icons to test if they work.
The Rewrite results feature in views allows you to rewrite a field in views with other fields of the same view.
Great tutorial! Is it possible to conditionally rewrite output? I’m using a taxonomy to filter my View, which doesn’t allow commas, but I want the taxonomy terms to display with commas in them.
Hi Drupalist,
I think that a preprocess function at the template level is a better idea to place a comma after a field, or you could also use Twig working directly on the field template to achieve that.
Cheers
I think this is a great tutorial on Views rewrite, you could take the lessons from this and apply them for a variety of user cases. However, I think using a file field and theming the field to include y9ur custom icon is a better way to achieve the functionality desired on this tutorial. Keep up the good tutorials mi hermano!
Thanks for your kind words ipwa. There are certainly a number of ways to do this, that is the beauty of Drupal. Regards!
It would be great to do a Drupal 7 version of this tutorial Jorge.
Hi Jorge. I just did your tutorial and the URL’s to the files seem to be getting double encoded. The spaces are now %2025 and not %20. When I manyally check the link by removing the 25 (leaving only %20) the links work.
Any thoughts?
Hi Jorge
Having a problem with tokens and found your page when looking for an answer. I’m on Drupal 7 and was going to use Tokens in rewrite in Views, but all that happends is that the code turns up, and not the field content. If I write [node:field-prix-ht] or with {} or{{}} does not matter.
It have worked earlier, I know since having tested it long time ago. Do you have any clue what it could be?
All the best
Hans
Hi Jorge, Thank you very much for this tutorial it worked great for me in Drupal 8 using image and files. I am trying to find a way to use this with the media type (image & documents) so the image and/or document can be easily changed without having use ftp. any pointers on how to use with the media library formats?
Thanks
Cliff
Never mind I finally stumbled onto how to do it.
Thanks
How can we use for loop in the custom text of view to iterate an unlimited field, as we use in template twig file
{% for item in items %}
{{ item.content }}
{% endfor %}
nice article.