Skip to main content
Category:

in this tuto, I'll show you how getting Drupal 8 Field image in Twig.

Print unlimited image field in node.html.twig

{% for key, item in node.field_image.value %}
  <img src="{{ file_url(content.field_image[key]['#item'].entity.uri.value) }}"
       alt="{{ item.alt }}" />
{% endfor %}

print one image field

in node.html.twig:

<img  src="{{ file_url(content.field_image['#items'].entity.uri.value) }}" alt="{{ node.field_image.alt }}" />
//OR
<img src="{{ file_url(content.field_image['#items'][0].entity.uri.value) }}" alt="{{ node.field_image.alt }}" />

in paragraph.html.twig:

<img  src="{{ file_url(content.field_image['#items'].entity.uri.value) }}" alt="{{ paragraph.field_image.alt }}" />
// OR
<img src="{{ file_url(content.field_image['#items'][0].entity.uri.value) }}" alt="{{ paragraph.field_image.alt }}" />

using https://www.drupal.org/project/twig_field_value module:

<img src="{{ file_url(content.field_image|field_target_entity.uri.value) }}" alt="{{ content.field_image|field_raw('alt') }}" />

to get image attributes use:

Alt: {{ node.field_name.alt }}

Title: {{ node.field_name.title }}

Height: {{ node.field_name.height }}

Width: {{ node.field_name.width }}

 

 

 

Riadh Rahmi

Senior Web Developer PHP/Drupal & Laravel

I am a senior web developer, I have experience in planning and developing large scale dynamic web solutions especially in Drupal & Laravel.

Web Posts

Search

Page Facebook