Основные текстовые блоки – изображение PNG

Рассмотрим настройку элемента на примере изображения с именем ` _01.png`. Для удобства восприятия разобью списки на группы по вкладкам элемента и дам описание сути действий, если требуется. **Изображение – Контент** Здесь указываем относительный путь к файлу, используя алиас материала как основную часть имени файла и прибавляем к нему спереди путь к папки хранения файла изображения, а сзади номер файла и расширение. Таким образом собираем из трёх составляющих окончательную конструкцию ` top-5-promising-truck-brands-advantages-and-features_01.png`, т.е. путь к файлу изображения для тега `img`. А ещё в качестве альтернативного текста изображения используем заголовок блока. Так что альтернативный текст в теге `img` будет только в том случае, если заголовок блока существует. - Изображение (элемент) –> Контент (вкладка) –> Изображение (поле ввода) –> Выбирать динамически (ссылка над полем справа) –> Страница (группа) –> Материал (источник данных) –> Алиас (тип данных). - Изображение (элемент) – Контент (вкладка) – Изображение (поле ввода) -> Редактировать (кнопка с изображением карандаша внутри поля) -> Фильтры (группа полей) -> До (поле ввода) -> `images/blog/` (путь к папке с изображениями блога). - Изображение (элемент) – Контент (вкладка) – Изображение (поле ввода) -> Редактировать (кнопка с изображением карандаша внутри поля) -> Фильтры (группа полей) -> После (поле ввода) -> ` _01.png` (порядковый номер изображения и расширение файла). - Изображение (элемент) –> Контент (вкладка) –> Атрибут alt изображения (поле ввода) –> ` {s0urce} {/source}` (В качестве значения атрибута `alt` изображения используется заголовок блока. Если его нет, то атрибут останется пустым.). **Изображение – Настройки** Тут у нас всё для настройки внешнего вида изображения. Воспользуюсь только одной опцией: центрирование по горизонтали. - Изображение (элемент) –> Настройки (вкладка) -> Общие (группа настроек) -> Выравнивание (поле выбора) -> По центру. **Изображение – Ещё** Здесь зададим имя элементу (ну, это просто) и настроим проверку на существование файла изображения, чтобы не выводить его в случае отсутствия (а то пустые альты повылезают от картинок или того хуже). Для проверки наличия изображения будем использовать динамические данные файла, конкретно его размер. Если размер не пустой, значит файл существует. Для настройки пути проверки потребуется обращение к алиасу материала через динамические данные. Настройка пути файла делается точно также как на вкладке «Контент». - Изображение (элемент) –> Ещё (вкладка) –> Имя (поле ввода) -> ` _01.png` (имя элемента, чтобы не запутаться). - Изображение (элемент) –> Ещё (вкладка) –> Динамический контент (поле выбора) -> Внешний (группа) -> Файл (источник данных). - Изображение (элемент) –> Ещё (вкладка) –> Шаблон пути (поле ввода) -> Выбирать динамически (ссылка над полем справа) –> Страница (группа) –> Материал (источник данных) –> Алиас (тип данных). - Изображение (элемент) –> Ещё (вкладка) –> Шаблон пути (поле ввода) -> Редактировать (кнопка с изображением карандаша внутри поля) -> Фильтры (группа полей) -> До (поле ввода) -> `images/blog/` (путь к папке с изображениями блога). - Изображение (элемент) –> Ещё (вкладка) –> Шаблон пути (поле ввода) -> Редактировать (кнопка с изображением карандаша внутри поля) -> Фильтры (группа полей) -> После (поле ввода) -> ` _01.png` (порядковый номер изображения и расширение файла). - Изображение (элемент) –> Ещё (вкладка) –> Динамическое состояние (поле выбора) -> Файл (источник данных) -> Размер (тип данных). - Изображение (элемент) –> Ещё (вкладка) –> Условие (поле выбора) -> Не пустой