web-dev-qa-db-ja.com

カスタム画像スタイルで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に非常に慣れていません。クライアントのためにこのテーマを完成させる前に、これが最後の大きなハードルだと思います。

8themingmedia
8
JacobTheDev

画像タグを置き換える

<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 に新しいフィルターがあります。これでtwigに画像スタイルのURLを直接uriまたはurlから生成できます：

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

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

{% 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 }}
3
Flo Develop

4k4回答の更新のみ。

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

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

3
Hashmat

私は最近、画像がアップロードされていないときにデフォルト（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ですでに定義した「コンパクト」ビューモード設定でレンダリングされます。後で画像のスタイルを変更したい場合は、ユーザーインターフェイスを使用して、twigテンプレートに追加の変更を加える必要なしに変更できます。また、これにより、Drupalの「デフォルト画像」設定がサポートされます。 twigにコード化したり、他の方法でフックを前処理したりする必要はありません。

1
EclipseGc