Нам нужно, чтобы картинка располагалась справа. Есть множество способов этого добиться, но сейчас мы рассмотрим twig.
Для того чтобы переопределить шаблон этого параграфа — в теме, в папке templates нужно создать файл:
paragraph--машинное_имя_параграфа--режим_отображения.html.twig
В моем случае, файл будет называться:
paragraph--title_and_text_and_image--block.html.twig
Теперь можно править разметку.
<div class="titleAndTextAndImage">
<div class="titleAndTextAndImage__content">
<div class="titleAndTextAndImage__title">
{{ content.field_title[0] }}
</div>
<div class="titleAndTextAndImage__body">
{{ content.field_body[0] }}
</div>
</div>
<div class="titleAndTextAndImage__image">
{{ content.field_image[0] }}
</div>
</div>
Поле выводим так:
{{ content.машинное_имя_поля }}
А если нам нужно получить только сырое значение:
{{ content.машинное_имя_поля[0] }}
Важно помнить, что если в параграф будет добавлено новое поле, оно не будет отображаться до тех пор, пока вы не запишите его в twig.
Это был простейший пример. Аналогичным образом можно переопределять:
Типы материала:
node--машинное_имя_типа_материала--режим_отображения.html.twig
Таксономию:
taxonomy-term--машинное_имя_словаря_таксономии--режим_отображения.html.twig
Блоки:
block--машинное_имя_блока--режим_отображения.html.twig
Типы медиа:
media--машинное_имя_медиа--режим_отображения.html.twig
Примеры названий файлов twig можно увидеть при включенном twig debug.