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

Аватар пользователя isuvar isuvar 20 мая 2019 в 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 не составит большого труда и не потребует много времени. Если бы кто-нибудь в режиме онлайн оказывал эту услуги (напр., через мессенджер) за приемлемую цену, то спрос на его услуги думаю возник бы.

Комментарии

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

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

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

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

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

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

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

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

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

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

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