Получить 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 очень просты. Благодаря

19 голосов | спросил Jannis Hell 27 SunEurope/Moscow2015-12-27T23:00:38+03:00Europe/Moscow12bEurope/MoscowSun, 27 Dec 2015 23:00:38 +0300 2015, 23:00:38

4 ответа


21

Переменная 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 %}
ответил 4k4 28 MonEurope/Moscow2015-12-28T11:47:36+03:00Europe/Moscow12bEurope/MoscowMon, 28 Dec 2015 11:47:36 +0300 2015, 11:47:36
18

Просто отметим, что если вы хотите сделать то же самое в одном из новых пользовательских блоков, это работает:

{{ file_url(content.field_image['#items'].entity.uri.value) }}
ответил Jonasdk 19 FebruaryEurope/MoscowbFri, 19 Feb 2016 16:46:03 +0300000000pmFri, 19 Feb 2016 16:46:03 +030016 2016, 16:46:03
2

Я использую этот код в файле .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.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>

Опять же, это может привести к некоторому улучшению. спасибо

ответил bennash 26 J000000Tuesday16 2016, 16:58:03
1

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

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

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

ответил Zyfraglover 25 52016vEurope/Moscow11bEurope/MoscowFri, 25 Nov 2016 12:13:40 +0300 2016, 12:13:40

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132