Print field content as div attribute in views template

Question

Using Drupal 8

I have a view:

• Unformatted List
• Two fields, Title and an Image with Image URL formatter via the module Image Url Formatter

I need to print out that URL such that:

The problem lies in the fact that I have TWIG DEBUGGING enabled , so the output of the field also includes all the debug mumbo-jumbo that I don't need. I don't want to have to be turning on/off debugging to make sure this works, I want a way to print the content without that mumbo jumbo.

I thought this post would help. It explains that field.content contains the rendered field, and what I am looking for is the field data from the database.

When trying this out with views-view-fields.html.twig , the code row._entity.field_art_image.value works great but it returns the information about the image itself (alt, title, width, height..) but not its URL.

Is there a way for me to access either the image url that points to the Image Style applied to the filed? (For example /sites/default/files/styles/large/public/2016-11/feature-javelin-throw.jpg?itok=UJugCoqn .

Trying file_url(row._entity.field_art_image.entity.uri.value) works, but it returns the URL to the uploaded image, not the one that results from the Image Style applied.

Answer 1

The code you linked is for normal data fields like text or number.

{{ row._entity.field_field_text.value }}

An image is a reference field, which has no value property, but a target entity. This has it's own set of fields. In case of an image the target is a file entity with the field uri, from which you can get the url with file_url().

{{ file_url(row._entity.field_image.entity.uri.value) }}

Or use Twig Tweak to generate an image style url:

{{ row._entity.field_image.entity.uri.value | image_style('thumbnail') }}

Answer 2

In order to accomplish this it was necessary to create a preprocess function for the field and load the Image Style and acquire its URL. To do so:

mytheme.theme

function mytheme_preprocess_views_view_field__myviewname__field_myfieldname(&$vars) {
   $view = $vars['view'];
   $row = $vars['row'];
   $file_uri = $row->_entity->field_myfieldname->entity->getFileUri();
   $img_title = $row->_entity->field_myfieldname->first()->getValue()['title'];
   $image_style_large_uri = ImageStyle::load('large')->buildUrl($file_uri);
   if($image_style_large_uri)
        $vars['img_url'] = array( 'url' => $image_style_large_uri, 'title' => $img_title);      
}

With the above I am able to acquire the URL that points to the field image URL after it's the Image Style has been applied. That URL is then made available to the TWIG template through $vars['img_url']

mytheme/templates/views/views-view-field--myviewname.html.twig

{% if img_url is defined %}
<div class="round-frame">
    <a title="{{ img_url.title }}" href="{{ path('entity.node.canonical', {'node': row.nid}) }}">
        <div class="frame-image" style="background-image:url('{{ img_url.url }}');"></div>
    </a>
</div>
{% else %}
   {{ output -}}
{% endif %}

You can see I have access to the img_url variable. In addition I also get the node's link by using {{ path('entity.node.canonical', {'node': row.nid}) }} . The reason why I have an if/else is to make sure that if the field does not contain the custom variable, then to print out the field's content as per the default template does with {{ output -}}.