JUX Before After - Расширение Joomla

Руководство по настройке JUX Before After для Joomla-сайта

JUX Before After нужен не для обычной галереи, а для одного очень конкретного сценария: показать две версии одного объекта так, чтобы посетитель мог сам провести границу между "до" и "после". В этом руководстве разбираем, как подготовить изображения, установить расширение, включить его в статье или модуле, настроить подписи, цвета, ориентацию и режим движения, а затем проверить, что сравнение работает на публичной части сайта.

Материал не повторяет краткую карточку продукта. Здесь важнее практика: где использовать сравнение, как не испортить макет, почему редактор Joomla влияет на короткий код, когда включать модульный вывод, что делать с кешем и как диагностировать ситуацию, когда ползунок не двигается или вместо сравнения виден текст короткого кода.

Факты о возможностях расширения опираются на страницу JoomlaUX, карточку в Joomla Extensions Directory и публичные ответы поддержки JoomlaUX. Если точный пункт интерфейса не подтверждён источниками, он описан осторожно: как ориентир для проверки, а не как гарантированное название кнопки в любой сборке продукта.

Когда сравнение "до и после" действительно усиливает страницу

Интерактивное сравнение работает сильнее обычной пары картинок, когда пользователь должен увидеть разницу сам. Это важно для реставрации фото, дизайна интерьера, ремонта, косметологии, стоматологии, портфолио ретуши, строительных кейсов, обновления интерфейса, обработки изображений, исторических материалов и демонстрации изменений в товаре. В таких задачах статичная картинка "до" рядом с картинкой "после" часто требует от читателя лишнего усилия: нужно переводить взгляд, вспоминать детали и самому сопоставлять зоны.

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

Хороший пример - страница студии ремонта. До установки расширения владелец сайта обычно добавляет две фотографии: старая ванная и готовый интерьер. Часть посетителей пролистывает их как обычную галерею. После настройки сравнения можно показать одну и ту же точку съёмки, где левая часть кадра остаётся "до", а правая показывает результат. Пользователь мгновенно видит, что изменилось: плитка, освещение, мебель, цветовая схема, свободное пространство.

Есть и обратная сторона. Такой блок не подходит для изображений с разным ракурсом, разной перспективой, разным масштабом или разной композицией. Если "до" снято сверху, а "после" сбоку, интерактивный разделитель только подчеркнёт несоответствие. Поэтому главная подготовка начинается не в админ-панели, а на уровне визуального материала.

Главная проверка перед настройкой: две картинки должны быть одной сцены, с близким кадрированием и одинаковым соотношением сторон. Если пара не совпадает визуально, ни режим drag, ни красивые подписи не сделают сравнение убедительным.

Что умеет расширение и где проходит граница ожиданий

По официальному описанию и карточке JED, JUX Before After ориентирован на вывод пар изображений в формате сравнения. В продукте заявлены короткий код для вставки в контент, генератор короткого кода, модульный вариант, слайдер из нескольких пар, горизонтальная и вертикальная ориентация, режимы взаимодействия через перетаскивание, клик или наведение, собственные подписи, цвета, позиции и overlay-элементы. Для обычного владельца сайта это означает две рабочие модели: вставить сравнение прямо в материал Joomla или вывести его через модуль в позиции шаблона.

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

Короткий код в материале

Официальное описание говорит о вставке пары изображений через открывающий и закрывающий короткий код в редакторе Joomla. На практике это удобно для статей, кейсов, страниц услуг и материалов блога, где сравнение должно быть частью текста. Пользователь читает объяснение, доходит до блока и сразу видит визуальное доказательство.

Такой подход особенно хорош для одного-двух сравнений на странице. Если нужно показать много пар, лучше не превращать статью в длинную простыню из коротких кодов. В этом случае удобнее подумать о модуле или слайдере, потому что модуль проще привязать к позиции, пункту меню или странице конструктора.

Модуль для позиции шаблона и конструкторов

В changelog продукта отдельно отмечено добавление модуля. Это важно для Joomla: модуль можно вывести в позиции шаблона, назначить на пункты меню и использовать в связке с конструктором страниц. В публичном ответе поддержки JoomlaUX для SP Page Builder рекомендован путь через пользовательский модуль, включение параметра Prepare content и последующий вызов этого модуля из Page Builder. Это не универсальная гарантия для каждого конструктора, но полезный практический ориентир.

Если сайт построен на шаблоне с несколькими позициями, модульный вывод часто удобнее короткого кода. Например, сравнение можно поставить в боковую колонку портфолио, в секцию под описанием услуги или в отдельный блок на посадочной странице. Главное - не забыть про назначение модуля к нужным пунктам меню и проверить результат именно на той странице, где он должен появиться.

Слайдер из нескольких сравнений

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

Но слайдер требует дисциплины. Все пары должны быть подготовлены в едином стиле: одинаковая ориентация, близкий размер, понятные подписи, один принцип кадрирования. Если одна пара горизонтальная, другая вертикальная, а третья снята совсем иначе, пользователь теряет фокус. В таком случае лучше разделить материал на несколько отдельных сравнений по смысловым разделам.

Кому JUX Before After подойдёт, а кому лучше выбрать другой формат

Расширение полезно владельцам Joomla-сайтов, которым нужно не просто показать изображения, а доказать изменение. Это могут быть агентства, мастера услуг, клиники, студии дизайна, фотографы, реставраторы, магазины с демонстрацией эффекта товара, образовательные проекты и редакции, которые объясняют визуальные различия. У продукта есть понятный плюс: он решает одну задачу без необходимости собирать собственный JavaScript-слайдер.

Администратору сайта JUX Before After подойдёт, если он готов работать с подготовленными изображениями и проверять результат после каждой правки. Контент-менеджеру продукт удобен при регулярной публикации кейсов. Разработчику он может сэкономить время, если задача типовая и не требует уникальной логики. Дизайнеру он помогает показать изменения в интерфейсе или макете без длинной презентации.

Не стоит выбирать этот инструмент, если вам нужна полноценная фотогалерея с категориями, фильтрами, альбомами, массовой загрузкой и сложной навигацией. Для такой задачи лучше смотреть в сторону галерейных расширений. Также продукт может быть не лучшим выбором, если сайт полностью управляется внешним SaaS-конструктором виджетов, где удобнее вставить готовый внешний код, или если редакционная команда не готова соблюдать требования к исходным изображениям.

Практический вывод простой: JUX Before After стоит использовать там, где сравнение является аргументом. Если блок не помогает принять решение, понять разницу или проверить результат, его лучше не добавлять ради движения на странице.

Подготовка перед установкой: изображения, редактор, шаблон и резервная копия

Перед установкой расширения проверьте четыре вещи: техническое состояние сайта, редактор, место будущего вывода и сами изображения. Это скучная часть, но именно она чаще всего отделяет нормальный результат от ситуации "в админке всё установлено, а на странице ничего не работает".

Проверьте совместимость и способ установки

Страница разработчика и JED указывают совместимость продукта с несколькими ветками Joomla, а также наличие системы обновлений Joomla. Но сайт всегда стоит проверять в своей среде: версия CMS, PHP, шаблон, включённые расширения, кеш и редактор могут влиять на поведение. Перед установкой сделайте резервную копию файлов и базы данных. Это стандартная безопасная практика для любых расширений, особенно если сайт рабочий и на нём уже есть сторонние плагины.

Устанавливать пакет нужно через штатный менеджер расширений Joomla. Официальная документация Joomla описывает обычный путь: загрузить ZIP-пакет, открыть установку расширений в админ-панели и выполнить установку через загрузку пакета. Если Joomla сообщает, что пакет не того формата, не пытайтесь распаковывать и копировать файлы вручную без необходимости. Сначала проверьте, не лежит ли внутри загруженного архива отдельный установочный ZIP.

Уточните редактор для короткого кода

Публичный ответ поддержки JoomlaUX по старому обращению указывает важный нюанс: для JUX Before After была отмечена совместимость с редактором TinyMCE Joomla по умолчанию. При этом в changelog JED есть запись о поддержке JCE editor в более позднем обновлении. Значит, редактор нужно проверять не по памяти, а на конкретной версии продукта и сайта.

Если команда использует JCE, CodeMirror или другой редактор, сделайте тестовую статью. Вставьте короткий код через интерфейс расширения или вручную по инструкции продукта, сохраните материал, откройте его снова и убедитесь, что редактор не изменил служебную разметку. Если короткий код пропадает, экранируется или превращается в обычный текст, временно протестируйте TinyMCE и проверьте настройки фильтрации HTML для группы пользователя.

Подготовьте пары изображений заранее

Для блока "до и после" особенно важны размеры. Пара должна иметь одинаковое соотношение сторон, близкую резкость и одинаковый визуальный центр. Не загружайте огромные исходники прямо с камеры, если они будут показываться в ширине контентной колонки. Лучше заранее подготовить web-версии, сохранить понятные имена файлов и проверить вес. Рекомендации похожих сервисов для before/after-слайдеров обычно сводятся к тому же принципу: совпадающее соотношение сторон, разумное разрешение и небольшие файлы для быстрой загрузки.

Названия файлов тоже важны. Вместо случайных IMG_4837.jpg и final-new-2.png используйте осмысленную пару: kitchen-before.jpg и kitchen-after.jpg. Это помогает контент-менеджеру не перепутать изображения, а разработчику быстрее диагностировать проблему, если на странице отображается не та версия.

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

Установка и первичная проверка в Joomla

Установка JUX Before After ничем принципиально не отличается от установки другого Joomla-расширения, но после неё нужно проверить не только факт установки, а все части, которые реально участвуют в выводе. По данным JED продукт включает элементы для работы через контент и модуль, поэтому после установки стоит посмотреть список плагинов и список модулей.

Порядок безопасной установки

1. Сделайте резервную копию сайта и убедитесь, что можете восстановить её без участия посетителей.
2. Скачайте установочный пакет из доверенного источника разработчика или страницы продукта.
3. Откройте админ-панель Joomla и перейдите в штатный раздел установки расширений.
4. Загрузите ZIP-пакет через вкладку загрузки пакета и дождитесь сообщения об успешной установке.
5. Проверьте список расширений: модуль и плагин должны быть установлены, а нужный элемент должен быть опубликован.
6. Очистите кеш Joomla и кеш внешней оптимизации, если он включён на сайте.
7. Создайте тестовую страницу с одной парой изображений и проверьте вывод без дополнительных украшений.

После установки не стоит сразу собирать сложный слайдер из десяти пар. Первый тест должен быть минимальным: две подготовленные картинки, стандартные подписи, базовый режим движения, страница без тяжёлых сторонних скриптов. Так проще понять, работает ли сам механизм.

Что считать успешной первичной проверкой

Успешная установка - это не только зелёное сообщение в админ-панели. На публичной части сайта должна появиться интерактивная область, в которой видны оба изображения, разделитель реагирует на выбранный тип взаимодействия, подписи не перекрывают важные детали, а блок не ломает ширину контента. Проверьте страницу в обычном браузере, в приватном окне и на мобильном устройстве.

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

Настройка после установки: короткий код, модуль, подписи и поведение ползунка

Раздел настройки - ключевой, потому что именно здесь продукт превращается из установленного расширения в рабочий блок на странице. У JUX Before After есть несколько групп параметров, подтверждённых официальным описанием: режим вставки через короткий код, модуль, слайдер из нескольких пар, ориентация, поведение разделителя, подписи, цвета, позиции и overlay. Не все интерфейсные названия могут совпадать в разных версиях, поэтому ниже описана логика настройки.

Короткий код: где он уместен

Короткий код удобно использовать в статье, когда сравнение является частью объяснения. Официальное описание говорит о конструкции с открывающим и закрывающим тегом [before-after]. Не стоит писать длинные параметры вручную, если в вашей версии доступен генератор короткого кода. Генератор снижает риск ошибки в синтаксисе, особенно если нужно указать две картинки, подписи и режим поведения.

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

Минимальная проверка короткого кода

• На странице не должен отображаться сырой текст [before-after].
• Оба изображения должны загружаться из медиатеки или правильной папки сайта.
• Разделитель должен реагировать на выбранный режим: перетаскивание, клик или наведение.
• После повторного открытия материала редактор не должен удалять служебную конструкцию.

Модуль: когда он удобнее статьи

Модуль выбирайте для зон шаблона, посадочных страниц, конструкторов и повторяемых блоков. В Joomla модуль можно назначить к конкретным пунктам меню, вывести в позиции шаблона и настроить публикацию отдельно от материала. Это удобно, когда сравнение должно жить рядом с контентом, но не внутри текста статьи.

Если вы выводите JUX Before After через пользовательский модуль или конструктор страниц, включите обработку контента там, где она нужна. Публичный ответ поддержки JoomlaUX для SP Page Builder прямо указывает на схему: создать custom module, добавить JUX Before After, включить Prepare content, затем вызвать созданный модуль в Page Builder. Этот совет особенно важен, если вместо интерактивного блока вы видите обычный короткий код.

Проверка назначения модуля

После сохранения модуля откройте не только саму страницу, но и настройки назначения меню. Частая ошибка Joomla-сайтов - модуль опубликован, но не назначен к нужному пункту меню или стоит в позиции, которую текущий шаблон не выводит. Если позиция неизвестна, временно проверьте модуль в заведомо видимой зоне шаблона, а затем перенесите его в нужное место.

Режимы движения: drag, click и hover

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

Если аудитория часто заходит с телефона, обязательно проверьте мобильное поведение. В changelog продукта отмечалось исправление touch move event, поэтому тема сенсорного управления для этого типа расширения не теоретическая. На телефоне пользователь должен понимать, что блок можно двигать, а страница не должна "бороться" с жестом прокрутки.

Горизонтальная и вертикальная ориентация

Горизонтальная ориентация обычно подходит для широких кадров: интерьер, фасад, ландшафт, интерфейс, общий план. Вертикальная ориентация полезна для портретов, длинных объектов, мобильных экранов, фасадов зданий и ситуаций, где разница лучше читается сверху вниз. Не выбирайте ориентацию ради разнообразия. Она должна соответствовать композиции исходных изображений.

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

Подписи, цвета и overlay

Подписи должны объяснять смысл, а не просто повторять "Before" и "After". Для русской страницы лучше использовать короткие формулировки: "До ремонта", "После ремонта", "Исходник", "Ретушь", "Старый дизайн", "Новый дизайн". Если продукт показывает медицинский, косметологический или другой чувствительный результат, избегайте громких обещаний. Подпись должна быть фактической.

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

Какие параметры менять осторожно

• Hover-режим включайте только после проверки на шаблоне, мобильных устройствах и в конструкторе страницы.
• Overlay используйте, если он действительно объясняет деталь, а не закрывает результат работы.
• Яркие цвета ручки и подписей подбирайте под фотографии, а не только под фирменную палитру сайта.
• Слайдер из нескольких пар собирайте только из изображений с единым визуальным ритмом.

Практический пример: блок сравнения для страницы услуги

Разберём предметный сценарий: сайт студии ремонта хочет показать результат обновления кухни. Цель - вставить интерактивное сравнение в страницу услуги и затем вывести похожий блок в посадочной секции через модуль. Такой пример хорошо показывает обе модели работы: короткий код внутри материала и модульный вывод для страницы с более сложной компоновкой.

Цель

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

Подготовка

Сначала подготовьте две фотографии одинакового размера. Кадр "до" и кадр "после" должны совпадать по ракурсу. Если исходники отличаются, откройте их в редакторе изображений, выровняйте горизонт, обрежьте по одному соотношению сторон и сохраните web-версии. Загрузите файлы в медиатеку Joomla или в понятную папку сайта.

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

Шаги

1. Откройте тестовый материал Joomla в редакторе, который корректно сохраняет короткий код расширения.
2. Запустите генератор короткого кода JUX Before After, если он доступен в вашей версии, или вставьте конструкцию по документации продукта.
3. Выберите изображение "до" и изображение "после". Не меняйте местами стороны после публикации, если подписи уже согласованы с текстом.
4. Поставьте режим перетаскивания как базовый вариант и горизонтальную ориентацию для широкого кадра кухни.
5. Задайте подписи "До ремонта" и "После ремонта", выберите контрастный цвет, но не делайте подписи слишком крупными.
6. Сохраните материал, очистите кеш и откройте страницу в публичной части сайта.
7. Если блок нужен в посадочной секции, создайте модуль с тем же сравнением, назначьте его к нужному пункту меню и проверьте позицию шаблона.

Ожидаемый результат

На странице должна появиться единая область сравнения, а не две отдельные картинки. Разделитель двигается плавно, подписи остаются читаемыми, блок не выходит за границы контента, а на мобильном устройстве пользователь может взаимодействовать с ним без случайного закрытия меню или прокрутки всей страницы.

Нюанс, который часто мешает

Если вы вставили короткий код в custom module или в блок конструктора, но он выводится как текст, почти всегда нужно проверить обработку контента. Для связки с SP Page Builder поддержка JoomlaUX рекомендовала использовать custom module и включить Prepare content. В других конструкторах логика может отличаться, но принцип тот же: короткий код должен пройти через обработчик контентных плагинов.

Мини-итог примера: сначала добейтесь работающего сравнения в обычной статье, затем переносите тот же сценарий в модуль или конструктор. Так вы отделите проблему расширения от проблемы позиции шаблона или page builder-интеграции.

Идеи применения: от портфолио до обучающих материалов

JUX Before After раскрывается лучше, когда блок сравнения встроен в сценарий страницы, а не стоит сам по себе. Ниже - несколько практичных направлений, которые можно адаптировать под Joomla-сайт без выдумывания дополнительных функций продукта.

Портфолио работ

Для портфолио важна последовательность. Если вы показываете пять кейсов ремонта, не смешивайте в одном слайдере кухню, фасад, ванную и спальню без пояснений. Лучше сделать отдельные пары по типу работ или разделить страницу на блоки. В каждой паре используйте одинаковый стиль подписей, чтобы посетитель не тратил внимание на оформление.

Фотообработка и ретушь

Для фотографа или студии ретуши сравнение помогает показать качество обработки без длинной галереи. Но здесь особенно важно не перегружать изображение overlay-подписями. В кадре и так много деталей: кожа, фон, свет, цветокоррекция. Подписи должны быть маленькими и контрастными, а разделитель - заметным, но не агрессивным.

Дизайн интерфейса и редизайн сайта

Если сравниваете старую и новую версию страницы, используйте скриншоты одинаковой высоты и одинакового масштаба браузера. Не вставляйте длинные full-page скриншоты, если их невозможно рассмотреть. Лучше показать ключевую область: первый экран, карточку товара, блок формы, меню или фрагмент каталога. Так интерактивное сравнение помогает понять изменение, а не превращается в тонкую вертикальную ленту.

Обучающие материалы и разбор ошибок

Иногда сравнение "до и после" полезно не для продажи, а для обучения. Например, можно показать фотографию до оптимизации и после коррекции цвета, страницу до исправления контраста и после правки, макет до выравнивания сетки и после. В таком случае подписи должны быть учебными: "До правки контраста", "После выравнивания", "Исходный кадр", "Оптимизированная версия".

Проверка результата: публичная часть сайта, мобильные устройства и кеш

Проверка результата должна идти по цепочке: админ-панель, публичная страница, другое устройство, приватное окно, кеш. Если смотреть только в том браузере, где вы только что работали в админке, можно пропустить конфликт кеша, прав доступа или шаблона.

Что проверить на странице

• Блок сравнения загружается там, где вы его ожидали увидеть.
• Изображения не растянуты и не обрезаны неожиданно.
• Подписи не закрывают лица, товар, результат работы или важную деталь.
• Разделитель виден на светлых и тёмных участках изображения.
• Выбранный режим движения понятен пользователю без инструкции.
• На странице нет ошибок JavaScript в консоли браузера.
• После очистки кеша результат совпадает для гостя и администратора.

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

JUX Before After заявлен как отзывчивый и touch-friendly продукт, но реальный сайт всё равно нужно проверять. Сенсорное взаимодействие зависит не только от расширения, но и от шаблона, сторонних скриптов, всплывающих элементов и оптимизаторов. Откройте страницу на телефоне, попробуйте двигать разделитель, прокрутить страницу выше и ниже блока, повернуть экран и вернуться назад.

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

Кеш и оптимизация

Joomla может кешировать страницы, части вывода и модули. Внешние плагины оптимизации могут объединять или откладывать JavaScript. Для интерактивного сравнения это критично: HTML блока может появиться, а скрипт управления разделителем - не выполниться. После правки настроек очищайте кеш Joomla, кеш шаблона или конструктора, кеш CDN и кеш браузера.

Если на сайте включены агрессивные оптимизаторы, временно отключите объединение и отложенную загрузку скриптов для тестовой страницы. Если после этого JUX Before After работает, значит проблема не в изображениях и не в коротком коде, а в порядке загрузки ресурсов. Возвращайте оптимизацию постепенно, проверяя результат после каждого изменения.

Производительность, SEO и доступность: как не испортить страницу красивым эффектом

Before/after-блок обычно содержит две картинки на одно сравнение. Слайдер из пяти пар - это уже десять изображений, плюс стили и скрипты. Поэтому даже простое расширение может заметно повлиять на страницу, если загрузить тяжёлые исходники. Производительность здесь зависит не от одного переключателя в JUX Before After, а от общей дисциплины работы с медиаконтентом.

Размер и формат изображений

Подготовьте изображения под реальную ширину блока. Если контентная колонка показывает картинку шириной около тысячи пикселей, нет смысла загружать исходник в несколько тысяч пикселей по ширине. Сохраняйте качество достаточным для сравнения деталей, но не оставляйте файл тяжелее необходимого. Для фотографий чаще подходит JPEG или WebP, для интерфейсов и графики - PNG или WebP, если сайт и процесс публикации это поддерживают.

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

Alt-текст и контекст рядом с блоком

Интерактивный блок не заменяет текстовое объяснение. Рядом со сравнением должен быть абзац, который объясняет, что именно сравнивается. Если продукт генерирует изображения через стандартную вставку, проверьте, как на странице формируются атрибуты изображений. Если alt нельзя настроить внутри расширения, компенсируйте это понятным текстом до и после блока, заголовком раздела и подписью в материале.

Не обещайте SEO-рост из-за самого расширения. Оно помогает пользователю лучше понять результат, а поведенческая польза страницы зависит от всего материала: заголовка, текста, скорости, структуры, изображений и доверия к кейсу.

Безопасное CSS-улучшение вокруг блока

Если нужно аккуратно ограничить ширину зоны сравнения и добавить отступы, лучше не править файлы расширения. Создайте вокруг блока контейнер в материале или модуле, например before-after-demo, и добавьте CSS в пользовательский файл шаблона или штатное поле custom CSS вашего шаблона. Этот snippet не зависит от внутренних классов JUX Before After и не ломает обновления.

.before-after-demo {
  max-width: 980px;
  margin: 28px auto;
}

.before-after-demo img {
  height: auto;
}

.before-after-demo .comparison-note {
  margin-top: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
}

Проверка простая: после добавления CSS откройте страницу, убедитесь, что блок не стал уже нужного, изображения не растянулись, а отступы выглядят нормально на мобильном устройстве. Откат тоже безопасный: удалите этот CSS или снимите класс с контейнера. Не используйте CSS для скрытия ошибок вывода. Если короткий код не обрабатывается или скрипт не работает, стили не решат причину.

Почему JUX Before After может не работать и как искать причину

Диагностику лучше вести от простого к сложному. Не меняйте сразу редактор, шаблон, кеш, режим взаимодействия и изображения. Зафиксируйте один тестовый материал, проверьте короткий код, затем модуль, затем конфликт с шаблоном или конструктором. Так вы быстро поймёте, на каком уровне ломается цепочка.

На странице виден короткий код вместо сравнения

Симптом: посетитель видит текст вроде [before-after] или похожую служебную конструкцию, а интерактивного блока нет. Возможная причина: контентный плагин не опубликован, редактор изменил код, вывод идёт через модуль без подготовки контента или конструктор страницы не пропускает текст через обработчик Joomla.

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

Открывается пустая область или загружается только одно изображение

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

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

Hover-режим не ведёт себя как в демо

Симптом: при наведении разделитель не двигается, двигается рывками или конфликтует с другими элементами страницы. Возможная причина: поверх блока лежит другой слой шаблона, конструктор добавил wrapper с собственными событиями мыши, мобильный сценарий не поддерживает ожидаемое поведение или есть конфликт JavaScript. В старом публичном обращении пользователь спрашивал именно о hover-действии, а поддержка указала на конфликт на сайте.

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

Сравнение работает в статье, но не в SP Page Builder или другом конструкторе

Симптом: в обычном материале Joomla всё работает, а в странице конструктора виден текст, пустое место или блок без интерактива. Возможная причина: конструктор не обрабатывает короткий код как Joomla-контент. Для SP Page Builder поддержка JoomlaUX рекомендовала создать custom module, добавить туда JUX Before After, включить Prepare content и вызвать этот модуль в Page Builder.

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

На мобильном устройстве ползунок двигается плохо

Симптом: палец прокручивает страницу вместо движения разделителя, блок дергается или жест работает только с нескольких попыток. Возможная причина: конфликт жестов, слишком маленькая область взаимодействия, тяжёлые изображения, overlay поверх ручки или старые настройки кеша. В changelog продукта есть отдельная запись об исправлении мобильного touch-события, поэтому при старой сборке первым делом проверьте обновление.

Уменьшите вес изображений, проверьте drag-режим, временно отключите overlay и убедитесь, что ручка достаточно заметна. Если проблема появилась после включения оптимизатора, откатите эту настройку и исключите страницу или ресурс расширения из агрессивного объединения.

После правки настроек посетители всё ещё видят старый вариант

Симптом: администратор видит новый цвет, подписи или режим, а гость видит прежний блок. Возможная причина: кеш Joomla, кеш модуля, кеш шаблона, внешний CDN или кеш браузера. Очистите все уровни кеша и проверьте страницу в приватном окне. Если используется прогрессивный кеш, временно отключите его для проверки интерактивной страницы.

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

Когда JUX Before After будет удачным выбором

JUX Before After стоит использовать, если на вашем Joomla-сайте есть реальные пары изображений, где посетитель должен увидеть изменение сам. Продукт особенно уместен для кейсов, портфолио, ремонта, ретуши, редизайна, образовательных разборов и страниц услуг. Его сильная сторона - понятная механика сравнения: две версии, разделитель, подписи, ориентация, режим взаимодействия и возможность вывода через статью или модуль.

Перед публикацией держите короткий чек-лист: подготовлены одинаковые изображения, выбран подходящий редактор, короткий код не ломается при сохранении, модуль назначен к правильной странице, включена обработка контента там, где она нужна, кеш очищен, мобильное взаимодействие проверено, а подписи не обещают больше, чем показывает пара картинок.

Если после теста блок решает задачу и не ломает страницу, можно получить файл JUX Before After и перенести сценарий на рабочие материалы. Начинайте с одной сильной пары изображений, затем добавляйте слайдер или модульные блоки только там, где они действительно помогают пользователю принять решение.