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.