1

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.

2 Answers 2

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') }}
5
  • I upvoted because it works great if you want the image URL. But what happens if I need the URL to the image that results from the Image Style applied to the filed image? Also, how do you know the structure so well? I'd love to know too so I won't be bothering the forums with these kind of questions.
    – Chayemor
    Nov 17, 2016 at 17:46
  • 1
    The image formatter builds an image style render element, which then is processed in three levels of templates, until you see the rendered result in field.content. If you want to modify the result, you should try to use one of these templates. Or don't use the image style render element at all and generate the url for the image style in php.
    – 4uk4
    Nov 17, 2016 at 19:40
  • That's exactly what I did, I rendered generated the image style in a preprocess functions. I'll post the code later.
    – Chayemor
    Nov 17, 2016 at 23:14
  • You could also put the php in a twig function like image_style_url(), which would replace file_url().
    – 4uk4
    Nov 18, 2016 at 7:47
  • Found this: drupal.org/commitlog/commit/83218/… - New filter for image styles in Twig Tweak drupal.org/project/twig_tweak.
    – 4uk4
    Nov 18, 2016 at 7:50
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.