Получить URL изображения в Twig

Я хочу сделать изображение как фоновое изображение с помощью встроенного стиля в веточку. Я создал поле с именем bg_image и прикрепил его к стандартной простой странице.

После нескольких часов игры я смог получить URL-адрес изображения в node.html.twig

{{ 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) }} />

но я не мог заставить его передать переменную там, если я не использую включает

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

(isFromField имеет значение true, если оно берется из поля - field-bg_image.html.twig) Но это тоже не сработало. Изображение никогда не отображалось таким образом.

Был бы очень рад, если вы можете помочь - мои знания 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 со стилем изображения.

Тогда в моем узле - файл 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>

Опять же, это может использовать некоторое улучшение. Благодарность

Я бы сделал это по-другому. В вашем узле preprocess функция:

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

Затем, в вашем шаблоне (узел - 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++;
        }
    }
}

С другой стороны, в вашем шаблоне (узел - 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 %}

Я на самом деле не проверил это, и я выкинул все это из головы, чтобы оно могло содержать ошибки, не стесняйтесь предупредить меня, поэтому я исправлю это :-).

Я имел некоторый успех, используя модуль фонового изображения, когда это позволяет вариант использования. Я использую один из этих вариантов кода, когда мне нужна настроенная структура DOM.