В представлениях Drupal 8, как я могу переписать вывод поля изображения, чтобы он стал div с этим изображением в качестве фонового изображения?
У меня есть представление для отображения содержимого с полем изображения, и мне нужно отобразить это изображение как фоновое изображение элемента div, чтобы я мог применить к нему немного CSS.
то, что я пытался сделать, это переписать вывод этого поля с помощью ветки, чтобы это было так:
<div class="page-image" style="background-image: url({{ field_image }});">
</div>
проблема в том, что Drupal обрезает атрибут стиля, поэтому вывод будет таким:
<div class="page-image">
</div>
В D7 я исправлял подобные проблемы, переопределяя шаблон для определенного поля, но я не мог понять, как называется нужный шаблон в D8. когда я включил отладку ветки оказалось, что поле использует файл шаблона views-view-field.html.twig который является шаблоном по умолчанию для всех полей в представлениях, но я не смог найти нужное имя шаблона для этого конкретного поля в этом представлении.
какие-либо предложения?
Решение
Я также начинаю с разработки для D8 и выясняю, как работают шаблоны.
Вы должны скопировать /core/modules/views/templates/views-view-field.html.twig в каталог вашей темы и назвать шаблон следующим соглашением.
views-view-fields — статьи- [просмотр имени машины] — [просмотр идентификатора дисплея] .html.twig
Я знаю это после прочтения этого действительно полезно сообщение.
Другие решения
Вот решение препроцессора, которое я использую:
В моем файле .theme у меня есть:
function THEMENAME_preprocess_page(&$variables) {
if ($node = \Drupal::request()->attributes->get('node')) {
if ($node->field_hero_background_image->entity) {
$variables['hero_background_image_url'] = file_create_url($node->field_hero_background_image->entity->getFileUri());
}
}
}
тогда в моем page.html.twig
style="background-image: url('{{ hero_background_image_url }}')