Отримайте 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 вірно, якщо воно походить з поля - 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 у стилі зображення.

Потім у моєму файлі 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.
    }
}

Потім у своєму шаблоні (вузол - 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.