Помощь в редактировании файлов *.twig

Аватар пользователя isuvar isuvar 20 мая в 11:36

Возникают ситуации, когда необходимо добавить класс тому или иному элементу, но сделать это возможно только внеся соответствующие правки в файл *.twig
Обычно использую модули Field Formatter Class и Block Class для подключения классов к полям и блокам, соответственно. Классы предварительно записываю в файле custom.css .
Пример. Формат для картинок установлен Colorbox. Картинки отображаются в один столбик. Мне надо было расположить картинки галереи в строку. Поэтому полю Image во вкладке Управление отображением с помощью Field Formatter Class указал пользовательский класс, который назвал flex-row-left.
В файле custom.css предварительно записал

.flex-row-left {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
}

Теперь картинки отображаются в строку, но между ними нет отступов.

Чтобы появились отступы между картинками, надо тегу <div>, в который помещена каждая картинка, задать отступы, напр. margin:5px;

Предполагаю, что единственный способ задать класс тегу <div> - добавить класс margin5px

.margin5px {
    margin:5px;
}

в файле colorbox-formatter.html.twig

{#
/**
 * @file
 * Default theme implementation to display a formatted colorbox image field.
 *
 * Available variables:
 * - image: A collection of image data.
 * - url: An URL the image can be linked to.
 * - attributes: Link attributes.
 *
 * @see template_preprocess_colorbox_formatter()
 *
 * @ingroup themeable
 */

#}
<a href="{{ url }}"{{ attributes }}>{{ image }}</a>

Но как это сделать?

Часто возникают подобные вопросы. Предполагаю, что специалисту по twig внести соответствующие правки в файл twig не составит большого труда и не потребует много времени. Если бы кто-нибудь в режиме онлайн оказывал эту услуги (напр., через мессенджер) за приемлемую цену, то спрос на его услуги думаю возник бы.

0 Thanks

Комментарии

Аватар пользователя isuvar isuvar 20 мая в 12:00

Скопировал сюда https://slexy.org/view/s21Vaj0CaJ часть кода со страницы, чтобы было легче понять.

Еще вопрос. Картинки не переносятся на новую строку при достижении определенного размера по ширине. Для изображений выбран стиль адаптивного изображения.

Аватар пользователя isuvar isuvar 20 мая в 12:14

Решение с отступами оказалось простым. В custom.css добавил вложенный класс

a.colorbox img {
        padding:3px;
        margin-right:3px;
        border:1px solid #4D4F4A;
        }
Аватар пользователя isuvar isuvar 20 мая в 12:27

Решение с переносом изображений тоже оказывается простое. Задал полю Image в Управлении отображением класс flexwraprow

.flexwraprow {
     display: flex;
     flex-wrap:wrap;
     justify-content: flex-start;
     align-items: flex-start;
}
Аватар пользователя Alex_Sorokin Alex_Sorokin 20 мая в 15:48

Если правильно помню, то ты можешь создать переменную, туда вписать те классы, какие хочешь добавить, а потом добавить их атрибутам.
В таком стиле:

{%
  set classes = [
    'block',
    'block-search',
    'container-inline',
   'мой придуманный класс',
  ]
%}
<div{{ attributes.addClass(classes) }}>

конечно класс нужно писать латинскими буквами)