Normally I am able to get an images URL by setting the display setting for that field to URL and then writing something similar to this in order to print the url
{{ content.field_image.0['#markup'] }}
However this is not possible in the display settings for a media entity, the only options are -
So my question is how can I get the URL from the image, as I need to use the field as a background image so can't just render it out as normal?
Here is a small example that I do in hook_preprocess_node:
if ($variables['elements']['#view_mode'] == 'your_view_mode') {
$node = $variables['elements']['#node'];
if (!empty($variables['elements']['field_summary_image'])) {
$entity = $node->get('field_summary_image')->getValue();
if (!empty($entity)) {
$media = Media::load($entity[0]['target_id']);
$variables['background_image'] = ImageStyle::load('featured_news')
->buildUrl($media->image->entity->getFileUri());
}
}
}
Don't forget the use statement at the top of the file for Media and ImageStyle.
$paragraph instead of $node and it goes into the paragraph twig template output. The view mode I am checking is to ensure I only run this code on the node view mode that needs this modification, instead of do this every time a node is about to be rendered. For a paragraph, you will want to check that the paragraph type is the one you want to do this on.
use Drupal\media\Entity\Media;. An IDE will help.
With Twig Tweak module (2.4+) it can be done like this:
{{ node.field_media|file_url }}
Just to mention that if you want to do the same in one of the new blocks twigs this works:
{{ file_url(content.field_image[0]['#media'].field_media_image.entity.uri.value) }}
I have actually found a way to do this myself that doesn't involve writing custom code. It requires this module Image URL Formatter
This module adds a url formatter for image field. Then you can output image url directly.
Create a view mode for your media and.. I called mine Image URL
Go to your media type and edit the display settings, you will need to expand custom display setting to turn your new view mode on.
Now edit the display for this view mode by clicking on the new tab that should of appeared, and for your image field change the format to Image URL.
If you were using this media in a paragraph or a node you would go to the display settings for this and under your media field set the format to rendered entity and the View mode to 'Image URL' or what ever you called yours.
You will need to create a custom media template file for your field to remove the outer HTML.
I also needed to render my field as follows in my paragraph template file
{{ content.field_image|render|striptags|trim }}
