Managing with File fields in views - Drupal 8

By Arun AK, 18 June, 2017

In Drupal 8 theming and templating are quite different than in Drupal 7. But D8 is providing very seamless options and lots of addons to make theming easy.

One of the power tool which helps to debugging and theming is Kint. Kint is a powerful and modern PHP debugging tool. Kint wisely detects what kind of data is being displayed and provides nicely formated data.

In D8 you can easy make use of Kint by installing Devel module. Devel module is come up with two sub modules called Devel generate and Devel Kint. In Order to use Kint debugging tool, you need to enable Devel and Devel Kint modules.

Devel Module

Once you enable the modules you can dump any variable in any php methods as well in twig templates.

Dump a variable in a preprocess function:

function mytheme_preprocess_page(&$variables) {
  kint($variables);
}

In page.html.twig

{{ kint(page) }}

Here we see how to manipulate or alter the output of file field value in views.

I have added a file field in Basic page content type and created views to list out all Basic page contents. By default, if we are using ‘Generic file’ formatter it will print the file field value as file link.

Instead of displaying the file field as a link if I want to display it as an image I need to have file URL in the template file. Then I can easily render the file as image using 'img' tag.

Once you enable the debug mode in settings, then while inspecting the file element you can see that it using file-link.html.twig file to output the content and suggesting ‘file_link’ as theme HOOK. That means we are able to alter the values to the file-link.html.twig using template_preprocess_file_link(&$variables) hook.

Here assuming your custom theme name as ‘mytheme’. Hence we can write our custom preprocess function inside our mytheme.theme file like below:

function bartik_preprocess_file_link(&$variables) {  
}

In this preprocess function we have the following variables available as mentioned here:

  • file: A file object to which the link will be created.
  • icon_directory: (optional) A path to a directory of icons to be used for files. Defaults to the value of the "icon.directory" variable.
  • description: A description to be displayed instead of the filename.
  • attributes: An associative array of attributes to be placed in the a tag.

So that we can get file url of the file like below:

function bartik_preprocess_file_link(&$variables) {  
  $file_url = file_create_url($variables['file']->getFileUri());
  $variables['file_url'] = $file_url;
}

And I have assigned the file url to a variable $variables['file_url']. So that I can use it in file-link.html.twig template as:

{{ file_url }}

Now we can render the file as an image in file-link.html.twig.

We will get the output as an image.

I hope this helps you well and you will get some idea while iterating file field and will provide a spark to the complex logic you need to implement for file fields.

Tags