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(file_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

Neuen Kommentar schreiben

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.

Restricted HTML

  • Zulässige 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>
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.

Angebot innerhalb von 24 Stunden

Ob ein großes kommerzielles System, oder eine kleine Business Seite, wir schicken ein Angebot ab innerhalb von 24 Stunden nachdem Sie diese Taste drücken: Angebot anfordern