Get image URL from media field in twig

13 Aug 2018

Apparently there are still pretty common Drupal 8 theming tasks that cannot be accomplished with the great twig_tweak module. This by the way was me giving a plug to a great little module, which makes half of all your theme preprocess hooks unnecessary.

Update: Apparently there is a module like twig_tweak but with the ability to do the above. It is called bamboo_twig and its documentation can be found here - thanks to Luckhardt Labs for mentioning it. Mind you I have not tested it yet. There is a rather interesting issue in its queue about the lack of collaboration between the two module maintainers.

If you would like to get the URL from an image that is trapped inside of a media entity however, you can either extract it using the aforementioned preprocess function like so:

  1. function mytheme_preprocess_node(&$variables) {
  2.  
  3. /** @var \Drupal\node\NodeInterface $node */
  4. $node = $variables['node'];
  5.  
  6. $image_field = $node->get('field_background_image');
  7. if (!$image_field->isEmpty()) {
  8. $uri = $image_field->entity->get('field_media_image')->entity->uri->value;
  9. $variables['background_image_url'] = file_create_url($uri);
  10. }
  11. }

In the node template, you can display it using

  1. {{ background_image_url }}

... or use this nifty snipplet inside of your twig template directly:

  1. {% if node.field_background_image is not empty %}
  2. {{ file_url(node.field_background_image.entity.field_media_image.entity.fileuri) }}
  3. {% endif %}

In this case the media image URL is acquired from a node inside of a node tempalate node--node-type.html.twig, but this will work for other entities in other templates as well, e.g a paragraph in paragraph--paragraph-type.html.twig.

Comments

Be aware that this way you are calling the URL of the original image directly. Any imagestyles are ignored, so this might not always be want you want. You can use

ImageStyle::load([image_style])->buildUrl(ffile_uri)

to generate an image with an imagestyle.

Someone share the value module the other day, which lets you do this:

{{ _bundle.field_background_image.field_media_image.url }}.

or if you need to apply a image style:

{{ _bundle.field_background_image.field_media_image.uri|image_style('large') }}

Check it out: value

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <pre> <ul type> <ol start type> <li> <dl> <dt> <dd> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.

Get a quote in 24 hours

Wether a huge commerce system, or a small business website, we will quote the project within 24h of you pressing the following button: Get quote