Подготовка данных в инфоблоке

Компонент из инфоблока ожидает, что каждая пара «До/После» хранится отдельным активным элементом. Перед размещением компонента рекомендуется сначала подготовить структуру и несколько тестовых элементов.

Какие свойства нужны

Для полной работы используются свойства с назначением:

• BEFORE_IMAGE — изображение «До», файл, обязательное;
• AFTER_IMAGE — изображение «После», файл, обязательное;
• ICON — отдельная иконка переключателя, файл, необязательное;
• LABEL — подпись, строка, необязательное;
• START_POS — стартовая позиция, число, необязательное;
• MODE — режим overlay или bar, список, необязательное;
• LOGO — логотип для ручки разделителя, файл, необязательное.

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

[Скриншот 1: список свойств рабочего инфоблока для сравнения]

Обязательные изображения

Для вывода элемента нужны обе картинки. Элемент, в котором нет «До» или «После», компонент пропускает. Поэтому при массовом заполнении инфоблока удобно сначала проверить обязательность этих двух свойств.

Рекомендации к парам

Сравнение воспринимается лучше, когда кадры совпадают по композиции. Если после обработки объект смещён, изменён масштаб или сильно отличается угол съёмки, движущийся разделитель не даёт точного визуального сравнения.

Желательно использовать изображения с одинаковыми пропорциями. Компонент выводит оба изображения в одну область и применяет заполнение области изображением. При разных пропорциях видимая часть может отличаться.

Название и подпись

Название элемента используется как резервная подпись. Если свойство LABEL заполнено, посетитель увидит его. Если LABEL пустое — отображается название элемента.

Это позволяет использовать служебное название в административной части и отдельный более короткий текст на сайте.

Иконка для переключения

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

Если ICON отсутствует, миниатюра создаётся из изображения «После». Поэтому отдельную иконку обязательно готовить только в тех случаях, когда автоматическая миниатюра выглядит плохо или нужен другой кадр.

Стартовая позиция

Значение задаётся в процентах от 0 до 100. Модуль ограничивает итоговую позицию этим диапазоном.

• 0 — граница у левого края, в основном видно изображение «После»;
• 50 — стандартное сравнение примерно пополам;
• 100 — граница у правого края, в основном видно изображение «До».

Если поле пустое или содержит некорректное значение, используется позиция по умолчанию из компонента.

Режим элемента

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

Логотип элемента

Логотип из свойства LOGO заменяет общий логотип для конкретной пары. Например, в общей галерее можно использовать фирменный знак проекта, а для отдельных кейсов — логотип клиента.

Если LOGO не заполнен, используется общий логотип, выбранный для компонента или в глобальных настройках — в зависимости от режима логотипа.

Активность и дата активности

Компонент выбирает только активные элементы, которые активны по дате. Если элемент создан, но не показывается, проверьте признак активности и период активности.

Разделы

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

Это удобно для одного общего портфолио: данные хранятся централизованно, а на разных страницах выводятся отдельные категории.

[Скриншот 2: пример заполненного элемента с парой изображений и параметрами]

Сортировка и количество

В параметрах компонента задаётся количество элементов и поле сортировки. Доступны сортировка по SORT, ID, NAME и ACTIVE_FROM, а также направление ASC или DESC.

Для управляемого ручного порядка обычно удобнее использовать стандартное поле Сортировка элемента.

Проверка перед подключением компонента

1. Есть минимум один активный элемент.
2. Заполнены обе обязательные картинки.
3. Стартовая позиция находится в пределах 0–100.
4. MODE содержит overlay или bar либо оставлен пустым.
5. Если используется раздел — элементы действительно к нему привязаны.

[Скриншот 3: несколько элементов в разделе с настроенной сортировкой]