カスタム画像スタイルでpage.html.twigの画像フィールドをレンダリングする

各ページに固有のスライドショーを設定しようとしています。このためのコードはにある必要がありますpage.html.twig。スライドショーはほとんど機能していますが、特定のサイズのカスタム画像スタイルではなく、完全な画像URLのみを呼び出すことができます。このコードを変更して特定の画像サイズを呼び出すにはどうすればよいですか？

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

私がURLを呼び出しているビットは次のとおりです。

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

{{ dump(node.field_slides[key]) }}使用できるデータがあるかどうかを確認しようとしましたが、そのたびに500エラーが発生します。

どんな助けでも大歓迎です。私はWordPressから来たDrupalに非常に慣れていません。クライアントのためにこのテーマを完成させる前に、これが最後の大きなハードルだと思います。

画像タグを置き換える

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

画像スタイルのレンダー配列を使用：

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

編集：

モジュールTwig Tweakに新しいフィルターがあります。これで、uriまたはurlから直接twigに画像スタイルのurlを生成できます。

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

4k4回答の更新のみ。

エンティティフィールド（段落など）を印刷するには、次のように使用できます。

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

レスポンシブ画像スタイルを印刷するには：

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

私は最近、画像がアップロードされていないときにデフォルト（svg）画像を提供したいと思ったひねりを加えて、これを自分で必要としました。Twig Tweakを使用すると、Drupalのユーザーインターフェイスを介して出力を制御しながら、これを実現できます。

私の場合、コメントのスタイルを設定しているので、ユーザーの画像をレンダリングしたいのですが、 "サムネイル"画像スタイルを使用したいと思います。通常、テンプレートのプライマリエンティティではないエンティティフィールドをレンダリングすることはできないため、これは困難です。

1. Twig Tweakモジュールをインストールします。
2. ユーザーの新しい表示モードを作成します（私は「コンパクト」という名前を付けました）。
3. 「ディスプレイの管理」で使用する画像スタイルの出力をuser_pictureフィールドに設定します。私にとってそれは「サムネイル」でしたが、コードサンプルでは表示されません。

4. comment.html.twigをオーバーライドし、ユースケースに応じて次の行を追加します。

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

Twig tweakは、この「ビュー」メソッドを提供します。これにより、user_pictureフィールドが、Drupalですでに定義した「コンパクト」ビューモード設定でレンダリングされます。後でイメージスタイルを変更する場合は、小枝テンプレートに追加の変更を加える必要なく、ユーザーインターフェイスを使用して変更できます。また、これはDrupalの「デフォルトイメージ」設定もサポートします。他の方法でtwigやプリプロセスフックにコード化する必要はありません。