Twigで画像URLを取得

小枝のインラインスタイルを介して画像を背景画像としてレンダリングしたい。bg_imageというフィールドを作成し、標準のプレーンページに添付しました。

何時間もいじった後、node.html.twigで画像URLを取得できました

{{ file_url(node.field_bg_image.0.entity.uri.value) }}

しかし、フィールド内で動作させることができませんでした--field-bg_image.html.twig

とにかくそこからノードを取得できるので、その後画像を取得できますか？

インラインスタイルとして使用する画像URLを取得するにはどうすればよいですか？field--field-bg_image.html.twigからimage.html.twigに変数を渡して、レンダリングするだけだと思いました

{{ uri }}

の代わりに

<img{{ attributes.addClass(classes) }} />

しかし、includeを使用しない限り、そこに変数を渡すことはできませんでした

{% include 'image.html.twig' with {'image': image, 'isFromField': isFromField} %}

（isFromFieldは、field--bg_image.html.twigからの場合はtrueです）しかし、それも機能しませんでした。画像はそのようにレンダリングされませんでした。

あなたが助けることができれば非常にうれしいです-私のPHPの知識は非常に基本的です。ありがとう

変数nodeは、ノードテンプレート（およびURLにノードが含まれている場合はページテンプレート）にのみプリロードされます。ここで、フィールドテンプレートのノードフィールドにアクセスする場合は、別の場所を探す必要があります。

field.html.twig：

{{ file_url(element['#object'].field_image.0.entity.uri.value) }}

element['#object'] は、フィールドテンプレートの親エンティティであり、このエンティティ（この場合はノード）から任意のフィールドにアクセスできます。

実際のフィールドから生の値にアクセスしたい場合は、フィールド小枝のロジックに従い、フィールドアイテムオブジェクトから直接アイテムループ内の値にアクセスする方が良いでしょう#item：

{% for item in items %}
  {{ file_url(item.content['#item'].entity.uri.value) }}
{% endfor %}

編集：画像スタイルのURLを取得します

Twig Tweakモジュールをインストールすると、uriを使用して画像スタイルのURLを取得できます。

{% for item in items %}
  {{ item.content['#item'].entity.uri.value | image_style('thumbnail') }}
{% endfor %}

新しいカスタムブロックのいずれかで同じことをしたい場合は、これが機能することを言及するだけです：

{{ file_url(content.field_image['#items'].entity.uri.value) }}

.themeファイルでこのコードを使用します。

function THEMENAME_preprocess_node(&$variables) {

  if ($variables['node']->field_image->entity) {
      $variables['image_url'] = $url = entity_load('image_style', 'medium')->buildUrl($variables['node']->field_image->entity->getFileUri());
  }
}

改善される可能性があります。画像フィールドをチェックし、そのURLに画像スタイルをロードしています。

次に、node--page.html.twigファイルにこれがあります：

{% if image_url is not empty %}
    <div class="featured-thumb">
        <img src="{{ image_url }}"/>
    </div>
{% endif %}

<div>{{ content.body|without('field_image') }}</div>

繰り返しますが、それはいくつかの改善を使用できます。ありがとう

別の方法でやります。ノードの前処理関数で：

use Drupal\image\Entity\ImageStyle; // Don't forget this use.

function THEMENAME_preprocess_node__NODETYPE(&$variables){
    $node = $variables['node'];

    if(isset($node->get('field_image')->entity)){
        $image_style = 'large'; // Or whatever your image style's machine name is.
        $style = ImageStyle::load($style);
        $variables['image'] = $style->buildUrl($node->get('field_image')->entity->getFileUri()); // Generates file url.
    }
}

次に、テンプレート（node--NODETYPE.html.twig）で、イメージをそのままレンダリングします。

{% if image %}
    <img src="{{ image }}" />
{% endif %}

ただし、大量の画像をレンダリングする必要がある場合は、各画像をループする前に配列にスタイルをロードすることをお勧めします。私は300以上の画像をロードしなければならなかったため、深刻なロード時間の問題に遭遇したため、各画像ごとにスタイルをロードするのではなく、すべてをロードするのではなく、個別にスタイルをロードしていると言っています。

use Drupal\image\Entity\ImageStyle; // Don't forget this use.

function THEMENAME_preprocess_node__NODETYPE(&$variables){
    $node = $variables['node'];

    if(isset(node->get('field_images')[0]->entity)){ // Notice how, this time, I check if the FIRST image is set (if it's true, then u'll allow the loop for at least 1 element)
        $images_styles = [
            'large' => ImageStyle::load('large'),
            'thumbnail' => ImageStyle::load('thumbnail')
        ];
        $count = 0;

        foreach($node->get('field_images') as $image){
            $variables['images'][$count]['large'] = $images_styles['large']->buildUrl($image->getFileUri());
            $variables['images'][$count]['thumbnail'] = $images_styles['thumbnail']->buildUrl($image->getFileUri());
            $count++;
        }
    }
}

次に、テンプレート（node--NODETYPE.html.twig）で、画像をそのままレンダリングします。

{% if images %}
    <ul>
        {% for image in images %}
            <li>
                <img src="{{ image.large }}" /> // Large image url.
                <img src="{{ image.thumbnail }}" /> // Thumbnail image url.
            </li>   
        {% endfor %}
    </ul>
{% endif %}

私はそれを実際にテストしていないので、エラーが含まれている可能性があるため、これをすべて頭から出しているので、私に警告してください：

ユースケースで許可されている場合、Background Image Moduleを使用してある程度の成功を収めました。カスタマイズされたDOM構造が必要な場合、これらのコードオプションのいずれかを使用します。