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 -

  • Rendered entity
  • Entity ID
  • Thumbnail
  • Label

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?

4 Answers 4


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')

Don't forget the use statement at the top of the file for Media and ImageStyle.

  • Thanks looks good, how do I create a view mode for this, I am using paragraphs by the way. When I create a view mode for media it doesn't appear in my display settings. Bit confused
    – drupalhgy
    Apr 30, 2018 at 14:25
  • You can do this from hook_preprocess_paragraph too. Just use $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.
    – Kevin
    Apr 30, 2018 at 14:27
  • Thanks, do you know where I can find use statements, I have no idea what to write for these
    – drupalhgy
    Apr 30, 2018 at 14:36
  • You have to put them at the top of the file so you can reference classes shorthand, like use Drupal\media\Entity\Media;. An IDE will help.
    – Kevin
    Apr 30, 2018 at 14:38
  • Thanks, what if I don't want an image style? How to just load original image ?
    – drupalhgy
    May 1, 2018 at 8:51

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.

  1. Create a view mode for your media and.. I called mine Image URL

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

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

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

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

Your Answer

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

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