Модуль «Сравнение фото»: до и после — модуль и набор компонентов для вывода интерактивного сравнения двух изображений (Before/After). Подходит для кейсов «было/стало»: ремонт, интерьер, авто, бьюти, ретушь, медицина, клининг и т.д.

Возможности

• Два режима сравнения
  • overlay — перетаскивание по картинке (ползунок «поверх» изображения).
  • bar — отдельный range-ползунок под изображением.
• Набор сравнений с табами/иконками (если элементов больше одного).
• Один набор «вручную» (без табов) — когда нужно вывести ровно одну пару изображений.
• Бейджи «До/После» (можно отключить, тексты настраиваются).
• Подпись (label) над сравнением (можно включать/выключать).
• Логотип в «кнопке» ползунка в overlay-режиме (по умолчанию и/или для элемента).
• Настраиваемые иконки вкладок (берутся из свойства ICON или автоматически из изображения «После»).
• Глобальные настройки в админке + возможность переопределять их параметрами компонента.
• Ресайз изображений по пресетам или произвольно, управление качеством WebP.
• Адаптивность + опция принудительно переносить иконки вниз на мобилке.

Быстрый старт

Вариант A — сравнение из инфоблока (несколько наборов)

• Создайте инфоблок и элементы (или установите демо-данные при установке модуля).
• Для каждого элемента заполните минимум:
  • изображение BEFORE (До)
  • изображение AFTER (После)
• Разместите компонент «Before/After — из инфоблока (табы)» на странице и укажите:
  • тип инфоблока и инфоблок
  • при необходимости раздел, сортировку, количество элементов

Если элементов > 1 — появятся иконки-табы для переключения.

Вариант B — один набор вручную (без инфоблока)

Разместите компонент «Before/After — один набор (вручную)» и укажите:

• MANUAL_BEFORE — картинка «До» (ID файла или путь/URL)
• MANUAL_AFTER — картинка «После» (ID файла или путь/URL)

Опционально: иконка, подпись, режим, стартовая позиция, логотип.

Глобальные настройки (админка)

Настройки доступны в административном меню: Сервисы → Сравнение изображений До/После → Настройки.

Визуальные

• Показывать заголовок (h2) и текст заголовка
• Показывать подпись (LABEL)

Бейджи

• Включение/выключение бейджей
• Тексты бейджей «До» и «После»

Поведение

• Режим по умолчанию (overlay / bar)
• Стартовая позиция (0..100)
• Логотип по умолчанию (ID файла или путь/URL)

Разделитель / элементы управления

• Цвет «кружка» (если логотипа нет)
• Цвет и толщина разделительной линии

Картинки / ресайз

• Пресет ресайза (например, 920×520, 920×920, 1200×675) или Custom/без ресайза
• Метод ресайза (PROPORTIONAL/EXACT)
• CSS aspect-ratio (если нужно зафиксировать пропорции)
• Качество WebP

Иконки вкладок

• Позиция (top/bottom/left/right)
• Размер иконок, отступ между иконками
• Retina-множитель для качества миниатюр

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

• Принудительно переносить иконки вниз на мобильных
• Брейкпоинт (px)

Важно: параметры компонента имеют приоритет над глобальными настройками. Даже пустое значение в параметрах считается явным переопределением.

Модуль добавляет 2 компонента для вывода блока сравнения изображений «До/После»:

• sendev:compare.beforeafter — выводит наборы сравнений из инфоблока (если элементов > 1, появятся табы-иконки).
• sendev:compare.beforeafter.manual — выводит один набор сравнения (картинки задаются вручную, без инфоблока).

Возможности (коротко)

• Режимы сравнения: overlay (ползунок по изображению) и bar (ползунок снизу).
• Табы/иконки для переключения наборов (в инфоблочном компоненте при количестве элементов > 1).
• Настройки внешнего вида: заголовок, label, бейджи «До/После», цвета/толщина разделителя, размеры/позиции иконок.
• Адаптивность: опция принудительно переносить иконки вниз на мобильных.
• Ресайз изображений (пресеты / custom / без ресайза) + WebP (если доступно на сервере).

Пример вставки: компонент из инфоблока (табы)

Минимальная вставка

<?php
$APPLICATION->IncludeComponent(
  "sendev:compare.beforeafter",
  ".default",
  [
    "IBLOCK_TYPE" => "content",
    "IBLOCK_ID"   => 12,
    "NEWS_COUNT"  => "20",

    "CACHE_TYPE" => "A",
    "CACHE_TIME" => "36000000",
  ]
);

Пример с часто используемыми опциями

<?php
$APPLICATION->IncludeComponent(
  "sendev:compare.beforeafter",
  ".default",
  [
    "IBLOCK_TYPE" => "content",
    "IBLOCK_ID"   => 12,
    "PARENT_SECTION" => 0,
    "INCLUDE_SUBSECTIONS" => "Y",
    "NEWS_COUNT" => "10",
    "SORT_BY1" => "SORT",
    "SORT_ORDER1" => "ASC",

    // Визуал
    "SHOW_TITLE" => "Y",
    "TITLE" => "Наши работы",
    "SHOW_LABEL" => "Y",

    // Бейджи
    "SHOW_BADGES" => "Y",
    "BADGE_BEFORE_TEXT" => "До",
    "BADGE_AFTER_TEXT" => "После",

    // Поведение
    "DEFAULT_MODE" => "overlay",     // overlay|bar
    "DEFAULT_START_POS" => "50",     // 0..100
    "DEFAULT_LOGO" => "/upload/logo.svg",

    // Иконки табов
    "ICON_POSITION" => "bottom",     // top|bottom|left|right
    "ICON_SIZE" => "56",
    "ICON_GAP" => "16",
    "ICON_RETINA" => "2",

    // Мобилка
    "MOBILE_FORCE_ICONS_BOTTOM" => "Y",
    "MOBILE_BREAKPOINT" => "768",

    // Кэш
    "CACHE_TYPE" => "A",
    "CACHE_TIME" => "36000000",
    "CACHE_GROUPS" => "Y",
  ]
);

Важно: параметры компонента имеют приоритет над глобальными настройками модуля (если параметр задан в компоненте — он переопределит настройку в админке).

Пример вставки: ручной компонент (один набор)

Минимальная вставка

<?php
$APPLICATION->IncludeComponent(
  "sendev:compare.beforeafter.manual",
  ".default",
  [
    "MANUAL_BEFORE" => "/upload/before.jpg",
    "MANUAL_AFTER"  => "/upload/after.jpg",

    "CACHE_TYPE" => "A",
    "CACHE_TIME" => "36000000",
  ]
);

Пример со вспомогательными параметрами

<?php
$APPLICATION->IncludeComponent(
  "sendev:compare.beforeafter.manual",
  ".default",
  [
    "MANUAL_BEFORE" => "123",                 // можно ID файла
    "MANUAL_AFTER"  => "124",
    "MANUAL_ICON"   => "125",                 // опционально, иначе берётся AFTER
    "MANUAL_LABEL"  => "Кухня",
    "MANUAL_MODE"   => "bar",                 // overlay|bar|"" (по умолчанию)
    "MANUAL_START_POS" => "40",
    "MANUAL_LOGO"   => "/upload/logo.svg",

    "SHOW_TITLE" => "Y",
    "TITLE" => "До/После",
    "SHOW_BADGES" => "Y",
    "BADGE_BEFORE_TEXT" => "До",
    "BADGE_AFTER_TEXT" => "После",

    "CACHE_TYPE" => "A",
    "CACHE_TIME" => "36000000",
  ]
);

Что нужно знать про данные (очень кратко)

Для режима из инфоблока используются пары картинок «До/После» из свойств элементов (обязательны), а также опциональные свойства для иконки/лейбла/режима/позиции/логотипа. Если иконка не задана — берётся изображение «После».