web-dev-qa-db-ja.com

Twig

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

数時間いじり回した後、node.html.twigで画像URLを取得できました

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

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

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

インラインスタイルとして使用する画像のURLを取得するにはどうすればよいですか？多分私はフィールドから変数を渡すことができると思いました--field-bg_image.html.twigをimage.html.twigに渡してから、単にレンダリングします

{{ uri }}

の代わりに

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

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

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

（isFromFieldは、フィールドから来る場合はtrueです--field-bg_image.html.twig）しかし、それも機能しませんでした。画像はそのようにレンダリングされたことはありません。

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

theming8files
21
Jannis Hell

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

field.html.twig：

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

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

実際のフィールドから未加工の値にアクセスする場合は、フィールドtwigのロジックに従い、項目ループ内の値にフィールド項目オブジェクト#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 %}
32
4k4

新しいカスタムブロックの1つで同じことをしたい場合、これは機能します。

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

このコードを.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>

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

3
bennash

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

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

私は実際にはテストしていません。エラーが含まれている可能性があるので、これらすべてを頭から出しているので、お気軽に警告してください:-)。

1
ZyDucksLover

2日を過ごした後、私は私の同様のコードに対するいくつかの答えを見つけました。一部のフィールドを含めたり除外したりします。

{%
set classes = [
'block',
'block-' ~ configuration.provider|clean_class,
'block-' ~ plugin_id|clean_class,
'cover-image',
]
%}

{% set background_image = file_url(content.field_banner_image['#items'].entity.uri.value) %}

<div{{ attributes.addClass(classes) }} style="background-image: 
url({{background_image}})">

<div class="block-inner">
{{ title_prefix }}
{% if label %}
<h2{{ title_attributes }}>{{ label }}</h2>
{% endif %}
{{ title_suffix }}
{% block content %}
{{ content.field_media_image }}
<div class="summary">
{{ content|without('field_banner_image') }}
</div>
{% endblock %}
</div>
</div>

テーマブロックの細かい名前--bundle--banner-block.html.twigこのコードは、画像付きのカスタムブロック用です。

単純なファイルの別の例。コード全体をペストするのではなく、不可欠なものだけです。

<a href="{{file_url(node.field_attachment1.entity.uri.value)  }}" ><h3> 
{{content.field_short_information}} </h3></a>

ノードnode--all_notice.html.twigのこのコードスニペット。 drupal 8.8.3で現在動作しているすべてのもの

0
Pradeep