Tutorial

How to print-out image URL's in field override in Drupal 8 Views

Sometimes template overrides does not work as expected. In this short tutorial we will try to print out Image URL's out in the views field as a field template. There are many ways how to do that but I found this one the most efficient.

Maybe this solution is not actually 100% correct, since I found out that Drupal 8 probably somehow does not print-out views field template suggestions correctly according to this issue thread and so this tutorial overrides field template, but does not print the output correctly. But it works either way.

Pridal/a lubo dňa Ut, 02/25/2020 - 08:35
Enable debugging in services.yml

Open the file /sites/default/services.yml and under twig.config section find the line debug: false and replace the line with debug: true. Keep in mind, that YAML files are white-space sensitive and indentation have to be made by spaces, not tabs. This line has 4 spaces and it has to be kept that way. 

If you can not find services.yml file in /sites/default directory, create it yourself by duplicating and renaming default.services.yml file.

Enable "Use field template" in your views field

Make sure your field has checked checkbox "Use field template" in views settings.

Flush the cache

Do not forget to flush the cache after any changes were made to YAML files. You can do so by flushing the cache manually in UI of Drupal, or using drush cc command in terminal, if Drush is enabled in your Drupal 8 installation.

Inspect your code for template suggestions

Now you can right-click on element you wish template override for and inspect element (F12). You should see template suggestions written in commented HTML.

Copy the template file from Core folder

As you can see on the image above, views will tell you from which file it is reading the template file (views-view-field.html.twig). Copy the file from original location in /core/modules/views/templates folder and rename it to one of the suggestions stated in the commented code.

Clear the cache again

So in order to make Drupal register you newly created template, you have to clear the cache again. You can be sure that it picks the file from your template by inspecting the code and looking for BEGIN OUTPUT from: line. It should be pointed on your file in your theme now.

Install Twig Field Value module

For some reason, working with Drupal 8 Twig templates are rather more difficult than it used to be in Drupal 7, so we will use Twig Field Value module to ease our workflow.

Use the following link to download the module: https://www.drupal.org/project/twig_field_value

Make adjustments to your template override

So we are about to be printing out Image URL's stored in your image reference field of your entity (node, taxonomy etc.). 

Copy the code from below and replace "field_my_image" with your field_name. You can find your field_name at "Manage fields" of entity you are about to be printing out in views.

Printing our full URL of uploaded file:

{{ file_url(element['#object'].field_my_image.0.entity.uri.value) }}

Printing out full URL of image style of uploaded file:

{{ file_url(element['#object'].field_my_image.0.entity.uri.value|image_style('article_image')) }}

So if you wish to be printing out the image as background URL of <div>, you can use following code:

<div class="my_new_image_field">
    <div style="background-image:url('{{ file_url(element['#object'].field_my_image.0.entity.uri.value|image_style('article_image')) }}')"  class="my_new_image_field_image"></div>
</div>

If you wish the image to be clickable, you can use the following code: (pointing out to the NODE of which image belongs to)

<a href="{{ path('entity.node.canonical', {'node': element['#object'].nid.value}) }}">
    <div class="my_new_image_field">
        <div style="background-image:url('{{ file_url(element['#object'].field_my_image.0.entity.uri.value|image_style('article_image')) }}')" class="my_new_image_field_image"></div>
    </div>
</a>
Clear the cache...

Again, clear the cache for changes to be applied.

Done!

Congratulations. You printed out the image field URL easily.

Do not forget to remove debug: true back to debug: false in services.yml and clear the cache afterwards to hide template suggestions again and make drupal load faster.

Might interest you

Tutorial
Yes, IOS / Safari is the new internet explorer. Amount of time I spend on debugging various IOS / Safari related bugs is incredible. It is…
Tutorial
Struggling with setting up HTTPS for Drupal 8? Just copy paste the following code to .htaccess file located in your root directory and you…

Recommended

Article
34 views
For the past few days I am trying to comprehend why / how this blockchain even gained it'…
Tutorial
99 views
This sketch is quite easy, I used Arduino Nano with OLED 0.96″ display 128×64 resolution…
Tutorial
164 views
While working on a fairly complex website with very complex views setup, including tens…
Tutorial
14 views
In this case we have two options, either we use hook_user_presave() or we can create new…
Tutorial
15 views
When using Swiftmailer under Drupal 8 / 9 it automatically sets the headers for sender to…
Tutorial
7 views
Yes, IOS / Safari is the new internet explorer. Amount of time I spend on debugging…
Tutorial
43 views
There is a very handy function in Drupal 8 / 9, allowing developers refresh view when…
Tutorial
22 views
Often, when doing SEO checkups, SEO specialist come up with adding Schema.org…
Tutorial
177 views
I needed to test my contracts against USDC contract, specifically I needed ERC-721 mint…
Tutorial
88 views
If you are a newbie like I am and struggling with setting the proper MYSQL my.cnf config…
Tutorial
25 views
I had trouble to set this up properly, because documentation is quite misleading or often…
Article
72 views
As the title says, DO NOT in any circumstances install ANY bitcoin price extension to ANY…
Tutorial
281 views
This is (or should be) a working example of sending some Ether between two addresses.…
Module
45 views
This list was fetched from Zapper, with their /v1/token-list endpoint. Which you can…
Tutorial
143 views
In the last months I am being pretty much bombarded by my clients with asking what…