Hiển thị trường hình ảnh trong page.html.twig với kiểu hình ảnh tùy chỉnh

Tôi đang cố gắng thiết lập một slideshow duy nhất cho mỗi trang. Mã cho điều này cần phải được trong page.html.twig. Tôi đã có trình chiếu chủ yếu hoạt động, nhưng tôi chỉ có thể gọi URL hình ảnh đầy đủ, không phải là kiểu hình ảnh tùy chỉnh có kích thước cụ thể. Làm cách nào để sửa đổi mã này để gọi kích thước hình ảnh cụ thể?

{% for key, item in node.field_slides %}
{% if node.field_slides[key].entity %}
<figure class="swiper-slide">
    <img class="swiper-image" src="{{ file_url(node.field_slides[key].entity.uri.value) }}" alt="{{ node.field_slides[key].alt  }}" />

    {% if node.field_slides[key].title %}
    <figcaption class="swiper-caption">
        <div class="swiper-user-content user-content">
            {{ node.field_slides[key].title|striptags("<a>,<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<ol>,<p>,<table>,<ul>")|raw }}
        </div><!--/.swiper-user-content.user-content-->
    </figcaption><!--/.swiper-caption-->
    {% endif %}
</figure><!--/.swiper-slide-->
{% endif %}
{% endfor %}

Bit mà tôi đang gọi URL là:

{{ file_url(node.field_slides[key].entity.uri.value) }}

Tôi đã thử làm {{ dump(node.field_slides[key]) }}để xem liệu có bất kỳ dữ liệu nào tôi có thể sử dụng không, nhưng mỗi lần tôi làm điều đó, tôi chỉ nhận được 500 lỗi.

Mọi sự trợ giúp sẽ rất được trân trọng; Tôi rất mới với Drupal, đến từ WordPress. Tôi nghĩ rằng đây là trở ngại lớn cuối cùng trước khi tôi có thể hoàn thành chủ đề này cho khách hàng của mình.

Thay thế thẻ hình ảnh

<img class="swiper-image" src="{{ file_url(node.field_slides[key].entity.uri.value) }}" alt="{{ node.field_slides[key].alt  }}" />

với một mảng render cho phong cách hình ảnh:

{% set imagestyle = {
  '#theme':      'image_style',
  '#style_name': 'medium',
  '#uri':        node.field_slides[key].entity.uri.value,
  '#alt':        node.field_slides[key].alt,
  '#attributes': { class: 'swiper-image' },
} %}

{{ imagestyle }}

Biên tập:

Có một bộ lọc mới trong mô-đun Twig Tweak . Bây giờ bạn có thể tạo url kiểu hình ảnh trong twig trực tiếp từ một uri hoặc url:

{{ node.field_slides[key].entity.uri.value | image_style('thumbnail') }} 

Chỉ cần một bản cập nhật cho câu trả lời 4k4 .

Để in các trường thực thể (ví dụ: đoạn), chúng ta có thể sử dụng:

<img src="{{ item.entity.field_image.entity.uri.value | image_style('image_style') }}" alt="{{item.entity.field_image.alt}}"/>

Để in kiểu ảnh phản hồi:

{% set responsiveimagestyle = {
    '#theme': 'responsive_image',
    '#responsive_image_style_id': 'responsive_image_style',
    '#uri': node.field_slides[key].entity.uri.value,
    '#attributes': { class: 'swiper-image', alt: 'text', title: 'text' },
} %}

{{ responsiveimagestyle }}

Gần đây tôi đã cần điều này với sự thay đổi mà tôi muốn cung cấp một hình ảnh (svg) mặc định khi không có hình ảnh nào được tải lên. Twig Tweak làm điều này khả thi trong khi vẫn cho phép tôi kiểm soát đầu ra thông qua giao diện người dùng của Drupal.

Trong trường hợp của tôi, tôi đang tạo kiểu cho một nhận xét, vì vậy tôi muốn hiển thị ảnh người dùng và tôi muốn sử dụng kiểu ảnh "hình thu nhỏ". Điều này rất khó vì thông thường, một trường thực thể không phải là thực thể chính của mẫu của bạn không thể được hiển thị.

1. Cài đặt mô-đun Twig Tweak.
2. Tạo chế độ xem mới cho người dùng (Tôi đặt tên là "compact").
3. Đặt trường user_picture với bất kỳ đầu ra kiểu ảnh nào bạn muốn sử dụng trong "Quản lý hiển thị". Đối với tôi đó là "hình thu nhỏ", nhưng nó sẽ không hiển thị trong mẫu mã.

4. Ghi đè bình luận.html.twig và thêm dòng sau đây bao giờ có ý nghĩa cho trường hợp sử dụng của bạn.

   {{ comment.uid.entity.user_picture|view('compact') }}

Twig chỉnh cung cấp phương thức "xem" này sẽ hiển thị trường user_picture của tôi với cài đặt chế độ xem "nhỏ gọn" mà tôi đã xác định trong Drupal. Nếu tôi muốn thay đổi kiểu ảnh sau này, tôi có thể thực hiện thông qua giao diện người dùng mà không cần thực hiện bất kỳ sửa đổi bổ sung nào cho các mẫu twig của mình. Ngoài ra, điều này cũng sẽ hỗ trợ cài đặt "hình ảnh mặc định" của Drupal mà không cần phải mã hóa nó thành các móc nối hoặc tiền xử lý theo một cách khác.