Рейтинг:0

Как сделать медиа-поле адаптивным изображением?

флаг cn

Я пытаюсь отобразить медиа-поле как отзывчивое изображение в пользовательском шаблоне ветки.

Мой наивный подход выглядит так:

{% включает 'responsive-image.html.twig' с {
  "источники": content.field_media,
} %}

который просто дает ряд ошибок, подобных этому:

«0» — недопустимый ключ массива рендеринга в Drupal\Core\Render\Element::children() (строка 97 core/lib/Drupal/Core/Render/Element.php). 

Предположительно, одна из причин, по которой это не удается, заключается в том, что я не предоставляю режим просмотра, но я также не знаю, как это сделать.

Рейтинг:0
флаг cn

Поскольку вы публикуете здесь код Twig, решение в Twig:

Сначала получите URI изображения. В этом примере, начиная с узла, если это шаблон узла:

{% для мультимедиа в node.field_slider_image %}

  <img src="{{ file_url(media.entity.field_image.entity.uri.value) }}">

{% конец для %}

Видеть Отображение представления изображений/медиаобъектов от узла к шаблону ветки.

Если вы хотите отобразить стиль изображения, не вызывайте шаблон изображения напрямую. Создайте элемент рендеринга для шаблона изображения. Видеть Рендеринг поля изображения в page.html.twig с пользовательским стилем изображения

Рейтинг:0
флаг de

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

  1. Используйте модуль Responsive Image, настройте свой стиль адаптивного изображения (точки останова и т. д.).
  2. Создайте новый режим просмотра для типа носителя с именем Только изображение.
  3. Перейдите к типу носителя, вкладке «Управление просмотром» и включите новый режим просмотра.
  4. Отредактируйте новый режим просмотра.Установите все поля, кроме изображения, чтобы они были скрыты. Установите средство форматирования для режима просмотра, чтобы использовать адаптивный стиль изображения, созданный на шаге 1.
  5. Визуализируйте свой медиа-элемент, используя этот режим просмотра в шаблоне ветки. Обратите внимание, что по следующей ссылке показано, как визуализировать тизер режим просмотра, вы хотите визуализировать image_only режим просмотра, который вы создали на шаге 2: https://drupal.stackexchange.com/a/207719/66659

Ответить или комментировать

Большинство людей не понимают, что склонность к познанию нового открывает путь к обучению и улучшает межличностные связи. В исследованиях Элисон, например, хотя люди могли точно вспомнить, сколько вопросов было задано в их разговорах, они не чувствовали интуитивно связи между вопросами и симпатиями. В четырех исследованиях, в которых участники сами участвовали в разговорах или читали стенограммы чужих разговоров, люди, как правило, не осознавали, что задаваемый вопрос повлияет — или повлиял — на уровень дружбы между собеседниками.