Компонент «Сравнение До/После — из инфоблока»

Этот компонент предназначен для подборок сравнений, которые хранятся в инфоблоке. Он может вывести один элемент или несколько. Если элементов больше одного, компонент автоматически показывает кнопки с круглыми миниатюрами для переключения.

[Скриншот 1: параметры компонента из инфоблока, группа «Источник данных»]

Источник данных

Тип инфоблока

Сначала выберите тип. После выбора список инфоблоков обновляется.

Инфоблок

Выберите инфоблок с парами «До/После». В нём должны быть подготовлены свойства, описанные в разделе «Подготовка данных в инфоблоке».

ID раздела

Если поле пустое или равно нулю, компонент работает со всем инфоблоком. Если указан ID, вывод ограничивается выбранным разделом.

Включать подразделы

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

Количество элементов

Ограничивает число загружаемых элементов. Значение должно быть не меньше одного. Если элементов больше одного, доступны иконки переключения.

Поле и направление сортировки

Можно сортировать по SORT, ID, NAME или ACTIVE_FROM и выбрать ASC/DESC. Для ручного управления очередностью удобно использовать SORT.

Визуал

Показывать заголовок

Включает общий заголовок над всем компонентом. Сам заголовок появляется только если заполнено поле текста.

Текст заголовка

Общий текст для всей подборки, например «Наши работы» или «Результаты ремонта».

Показывать подпись над сравнением

При включении над текущей парой выводится LABEL элемента. Если LABEL пуст, используется название элемента.

Показывать бейджи До/После

Включает небольшие подписи непосредственно на изображениях. Текст обоих бейджей можно изменить, например на «Было» и «Стало».

Поведение

Режим по умолчанию

Используется, когда у элемента инфоблока не задан собственный MODE. overlay показывает разделитель поверх изображения, bar — ползунок под изображением.

Стартовая позиция по умолчанию

Применяется, если свойство START_POS элемента не заполнено. Типичное значение — 50.

Режим логотипа по умолчанию

Управляет тем, откуда брать общий логотип:

как раньше — если поле логотипа компонента пустое, используется глобальное значение;
глобальный — всегда брать логотип из настроек модуля;
отключить — не показывать логотип, даже если он задан глобально;
значение — использовать значение, указанное в компоненте.

Логотип, заданный непосредственно в элементе инфоблока, имеет приоритет для этого элемента.

[Скриншот 2: блок параметров «Визуал» и «Поведение»]

Разделитель и оформление

Цвет кружка задаёт фон круглой ручки, если внутри неё нет логотипа или логотип имеет прозрачные области.

Цвет разделительной линии и толщина применяются к overlay-режиму.

Ресайз и качество

Компонент позволяет привести основные фотографии к одному рабочему размеру:

920×520;
920×920;
1200×675;
CUSTOM;
без ресайза.

При CUSTOM дополнительно задаются ширина и высота. Метод PROPORTIONAL сохраняет пропорции в пределах указанного размера, EXACT формирует точный размер с кадрированием.

Поле CSS aspect-ratio определяет пропорции видимой области на странице. Если оно пустое, компонент использует размер выбранного пресета.

Качество WebP влияет на автоматически создаваемую WebP-версию локальных изображений, если сервер поддерживает такую обработку.

Иконки

Настраиваются положение top, bottom, left или right, размер, расстояние между иконками и Retina-множитель. Если у элемента не задано отдельное свойство ICON, миниатюра строится из изображения «После».

Мобильная версия

Опция «На мобилке иконки всегда снизу» переводит переключатели под основное изображение, когда ширина экрана становится меньше указанного брейкпоинта. Это особенно полезно, если на компьютере иконки расположены слева или справа.

Кэширование

Для компонента доступны стандартные параметры кэширования 1С-Битрикс: тип кэша, время кэша и учёт групп пользователей.

Если вы изменили элементы инфоблока, но на странице временно виден старый результат, проверьте кэш страницы и компонента.

Приоритет данных элемента

Параметры конкретного элемента могут переопределить часть общих настроек:

MODE — режим;
START_POS — стартовую позицию;
LABEL — подпись;
LOGO — логотип.

Остальные параметры — общий внешний вид всей подборки.