How to get image url from uri in Drupal 8 template

drupal twig drupal-8
kivikall picture kivikall · Nov 11, 2015 · Viewed 9k times · Source

I'm trying to create my own image field formatter. I've followed these instructions (http://www.sitepoint.com/creating-custom-field-formatters-drupal-8/) and right now I have a working formatter which basically does nothing but "inherits" and executes default image formatter.

Then I of course have my own template which is also a copy of default image-formatter.html.twig template (found that in core\modules\image\templates).

Now my question is that in template I can print the whole image using Twig syntax {{ image }}. If I use dump(image) I see there's actually image uri like this: public://default_images/Default image for Drupal Ant task.jpg

I'd love to have the actual url instead but right now I have no idea how to get it. Is it even possible? And I would also appreciate if you could explain me shortly why {{ image }} prints image with img tags? It must go through another formatter?

Why I started to do this in a first place was that instead of img tags I'd like to use divs with background image style.

Answer

varta picture varta · Mar 29, 2016

There is a twig extension file_url you can use for this, for example

{{ file_url(content.field_image['#items'].entity.uri.value) }}

Related questions

How to use an image style in a Drupal 8 twig template?

I am trying to print an image using an image style that I've created in my drupal 8 theme. I can print an image in a template by doing {{ content.banner }} but how do I apply the image style to that …

Read More
Drupal 8 Twig Template: get relative or absolute path from URI

I have in a twig template an image url, like "public://path/to/image.png". I want to get "sites/default/files/path/to/image.png" to use it in the template. I thought it should work with something like …

Read More
switch statement in twig drupal 8

Does twig in drupal 8 have a switch case statement? Something like: {% set size = rows | length %} {% switch rows %} {% case "1" %} {{ do something }} {% case "2" %} {{ do example }} {% case "3" %} {{ do that }} {% default %} <p>A font walks into a bar.</p> <…

Read More