How to Rewrite the Output of Views Fields in Drupal

How to Rewrite the Output of Views Fields

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).

Add the following fields

  • Click Add field.
  • Select File from the dropdown list.
  • Give this field a proper label.
  • Click Save and Continue.

Click Save and Contine

  • 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 Save settings

  • Click Add field.
  • Under the Reuse an existing field dropdown select Image.
  • Click Save and continue.

Click Save and continue

  • Check this field as required.
  • Upload a default “pdf icon” image.
  • Write an alt text for this image.

Write an alt text for this image

  • Change the file directory to pdf-files.

Change the file directory to pdf-files

  • Scroll down and click Save settings.
  • Click Manage form display.

Click Manager form display

  • Drag the Image field to the Disabled section and click Save.

Drag the Image field to the Disabled section

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.

Click Update

  • Rearrange the fields.
  • Click Save.

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.

Create three or more nodes

Your Content listing screen should look more or less like this:

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 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 Add and configure fields

  • Click Apply and continue five times for now.
  • Rearrange the fields like in the following image.
  • Click Apply.

Click Apply

  • Click the Authors field and exclude it from the display.
  • Click Apply.

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.

Click the File Download

  • Select the Image field, and set the Formatter to Image, choose Thumbnail 100×100 pixels.

Select the Image field

Your Fields section should look like in the following image (click to enlarge it):

Your Fields section should look like in the following image

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.

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.

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.

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.

Author

  • Jorge Montoya

    Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.

    View all posts
0 0 votes
Article Rating
Subscribe
Notify of
guest

11 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Drupalist
Drupalist
5 years ago

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.

ipwa
ipwa
5 years ago

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!

Frank
Frank
5 years ago

It would be great to do a Drupal 7 version of this tutorial Jorge.  

Frank
Frank
5 years ago

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?

Hans Bjarstal
Hans Bjarstal
5 years ago

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

Cliff
Cliff
4 years ago
Reply to  Hans Bjarstal

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

Clif
Clif
4 years ago
Reply to  Cliff

Never mind I finally stumbled onto how to do it.
Thanks

Pratish Jha
Pratish Jha
3 years ago

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 %} 

nadeem
nadeem
3 years ago

nice article.

11
0
Would love your thoughts, please comment.x
()
x