20 мая 2019 в 11:36
Возникают ситуации, когда необходимо добавить класс тому или иному элементу, но сделать это возможно только внеся соответствующие правки в файл *.twig
Обычно использую модули Field Formatter Class и Block Class для подключения классов к полям и блокам, соответственно. Классы предварительно записываю в файле custom.css .
Пример. Формат для картинок установлен Colorbox. Картинки отображаются в один столбик. Мне надо было расположить картинки галереи в строку. Поэтому полю Image во вкладке Управление отображением с помощью Field Formatter Class указал пользовательский класс, который назвал flex-row-left.
В файле custom.css предварительно записал
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
Теперь картинки отображаются в строку, но между ними нет отступов.
Чтобы появились отступы между картинками, надо тегу <div>, в который помещена каждая картинка, задать отступы, напр. margin:5px;
Предполагаю, что единственный способ задать класс тегу <div> - добавить класс 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 не составит большого труда и не потребует много времени. Если бы кто-нибудь в режиме онлайн оказывал эту услуги (напр., через мессенджер) за приемлемую цену, то спрос на его услуги думаю возник бы.
Комментарии
Скопировал сюда https://slexy.org/view/s21Vaj0CaJ часть кода со страницы, чтобы было легче понять.
Еще вопрос. Картинки не переносятся на новую строку при достижении определенного размера по ширине. Для изображений выбран стиль адаптивного изображения.
Решение с отступами оказалось простым. В custom.css добавил вложенный класс
padding:3px;
margin-right:3px;
border:1px solid #4D4F4A;
}
Решение с переносом изображений тоже оказывается простое. Задал полю Image в Управлении отображением класс flexwraprow
display: flex;
flex-wrap:wrap;
justify-content: flex-start;
align-items: flex-start;
}
Если правильно помню, то ты можешь создать переменную, туда вписать те классы, какие хочешь добавить, а потом добавить их атрибутам.
В таком стиле:
set classes = [
'block',
'block-search',
'container-inline',
'мой придуманный класс',
]
%}
<div{{ attributes.addClass(classes) }}>
конечно класс нужно писать латинскими буквами)