Tập tành lấy Drupal 9 Field image in Twig

20th May 2022
Table of contents

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 %}
Twig

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 }}
Bạn thấy bài viết này như thế nào?
0 reactions

Add new comment

Image CAPTCHA
Enter the characters shown in the image.
Câu nói tâm đắc: “Điều tuyệt với nhất trong cuộc sống là làm được những việc mà người khác tin là không thể!”

Related Articles

Master list (in progress) of how to get parts of fields for use in Twig templates. I’m always having to look these up, so I thought I’d hash them out and write them down.

Litespeed Cache là plugin WordPress dùng để kết hợp với Web Server LiteSpeed nhằm tăng tốc website WordPress của bạn gấp nhiều lần

In this article, we are going to see how some tools & libraries will make people's lives easier during the development & code review process.

In this tutorial, you will learn how to improve the custom code, theme and module, and general code development by using the pre-commit hook on git

Trước khi tìm hiểu xem PHP Code Sniffer là gì thì các bạn cần phải nắm được coding convention là gì đã.