11

I have a node that contains various fields. I am able to get the values of text fields but not an image field. Below is the relevant output of the node variable being dumped in the twig template:

 'field_main_image' => 
    object(Drupal\field\Entity\FieldConfig)[1312]
      protected 'deleted' => boolean false
      protected 'fieldStorage' => null
      protected 'id' => string 'node.homepage.field_main_image' (length=30)
      protected 'field_name' => string 'field_main_image' (length=16)
      protected 'field_type' => string 'image' (length=5)
      protected 'entity_type' => string 'node' (length=4)
      protected 'bundle' => string 'homepage' (length=8)
      protected 'label' => string 'Main image' (length=10)
      protected 'description' => string '' (length=0)
      protected 'settings' => 
        array (size=12)
          ...
      protected 'required' => boolean false
      protected 'translatable' => boolean false
      protected 'default_value' => 
        array (size=0)
          ...
      protected 'default_value_callback' => string '' (length=0)
      protected 'itemDefinition' => null
      protected 'constraints' => 
        array (size=0)
          ...
      protected 'originalId' => string 'node.homepage.field_main_image'     (length=30)
      protected 'status' => boolean true
      protected 'uuid' => string 'f40a7a65-18a5-4ced-85b0-ab1cdc41b2f5' (length=36)
      private 'isSyncing' (Drupal\Core\Config\Entity\ConfigEntityBase) => boolean false
      private 'isUninstalling' (Drupal\Core\Config\Entity\ConfigEntityBase) => boolean false
      protected 'langcode' => string 'en' (length=2)
      protected 'third_party_settings' => 
        array (size=0)
          ...
      protected '_core' => 
        array (size=0)
          ...
      protected 'trustedData' => boolean false
      protected 'entityTypeId' => string 'field_config' (length=12)
      protected 'enforceIsNew' => null
      protected 'typedData' => null
      protected 'cacheContexts' => 
        array (size=0)
          ...
      protected 'cacheTags' => 
        array (size=0)
          ...
      protected 'cacheMaxAge' => int -1
      protected '_serviceIds' => 
        array (size=0)
          ...
      protected 'dependencies' => 
        array (size=2)
          ...

I have seen similar questions on SE, like this one Getting the image URL from a field_image on a node, but none of the answers have worked for me.

Thanks in advance for any responses.

3 Answers 3

31

An image field stores the file id in target_id. You can access the file id with:

{{ node.field_main_image.target_id }}

There is a second property in the image field. It is for the referenced entity, in this case the file object. This is not visible in the debug output, because it is computed:

{{ node.field_main_image.entity }}

In the file object you find the field uri

{{ node.field_main_image.entity.uri.value }}

which you can use the get the url of the original image

{{ file_url(node.field_main_image.entity.uri.value) }}

or the url of an image style

{{ node.field_main_image.entity.uri.value | image_style('thumbnail') }}

The filter for the image style is part of this module which you have to install:

https://www.drupal.org/project/twig_tweak

Different entity template

If you don't have a node but a different entity type, for example a paragraph, replace node with the entity name:

{{ file_url(paragraph.field_main_image.entity.uri.value) }}

Custom block content

If the field is in a block content type there is no entity template available. The block template is for the configured block plugin, which has a different variable structure. In this case, you find the content entity here

{% set block_content = elements.content['#block_content'] %}

and then

{{ file_url(block_content.field_main_image.entity.uri.value) }}
9
  • Thanks for the response. I tried this but it's not working for some reason. The target_id doesn't exist in the output generated by dumping node.field_main_image. I am using a twig template file that overrides the default page.html.twig file. Jan 1, 2017 at 21:41
  • You won't find the entity property in a dump output. But I think I misspelled your field name, see edit.
    – 4uk4
    Jan 1, 2017 at 21:56
  • Yeah, I knew you meant field not file. Should I see the target_id? As it's not present. Jan 1, 2017 at 22:09
  • Yes, if the field is filled with an image. This is the main property of an image field and if this is empty the field is empty.
    – 4uk4
    Jan 1, 2017 at 22:24
  • I tested it on a different node and it worked. It just doesn't seem to want to work on the front page node, I think perhaps because of the template I am overriding. I will accept your answer as it does work. I used the file_url function instead of file_create_url as the latter returned an unknown function error. Jan 1, 2017 at 22:34
9

You cannot get image url directly in twig template as image fields have just image file id. Every image in Drupal 8 is a file entity.

You can try in template_preprocess_node():

$image_file_id = $variables['node']->field_image[0]->target_id;
$image_file = \Drupal\file\Entity\File::load($image_file_id);
$uri = $image_file->uri->value;
$variables['url']=file_create_url($uri);
0
1
<article{{ attributes.addClass(classes) }}>
<div>
    <img src="{{ file_url(node.field_image.entity.uri.value) }}">
</div>
<div{{ content_attributes.addClass('content') }}>
    {{ content|without('field_image') }}
</div>

  1. {{ file_url(node.field_image.entity.uri.value) }}

By this you can get the image field of node in twig template.

  1. {{ content|without('field_image') }}

By this you will get the contents without node image field.

1

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.