7

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.

16

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

  • 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. – Adeleke Akinade Jan 1 '17 at 21:41
  • You won't find the entity property in a dump output. But I think I misspelled your field name, see edit. – 4k4 Jan 1 '17 at 21:56
  • Yeah, I knew you meant field not file. Should I see the target_id? As it's not present. – Adeleke Akinade Jan 1 '17 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. – 4k4 Jan 1 '17 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. – Adeleke Akinade Jan 1 '17 at 22:34
6

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);
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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