Слайдер для сравнения изображений

Настройка Компонент темы
22

Есть ли способ заставить это работать с фотографиями, которые не были загружены? С фотографиями, вставленными через ссылки?

23

Здравствуйте, я хотел бы сообщить об ошибке, возникшей в компоненте темы.

Сообщение об ошибке на веб-сайте указывает, что посты могут отображаться некорректно из-за проблемы со слайдером сравнения изображений, и предлагает обновить, перенастроить или отключить его. (Подпись сгенерирована ИИ)
Сообщение об ошибке на веб-сайте указывает, что посты могут отображаться некорректно из-за проблемы со слайдером сравнения изображений, и предлагает обновить, перенастроить или отключить его. (Подпись сгенерирована ИИ)1200×207 24.9 KB

Видно здесь:

Последняя версия слайдера сравнения изображений

Версия Discourse: 3.5.0.beta1-dev

(402ec6bf5c)

Спасибо за вашу работу.
Стефан.

2 лайка
24

Я обновил этот компонент в соответствии с новыми стандартами API:

1 лайк
25

Отличная работа!

Чтобы не нагружать вас дополнительно… но… вы уже посмотрели это с помощью нового редактора форматированного текста?

26

Я не проверял, есть ли с ним какая-то проблема?

1 лайк
27

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

CleanShot 2025-09-24 at 10.30.26@2x
CleanShot 2025-09-24 at 10.30.26@2x1586×1374 88.3 KB

28

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

1 лайк
29

Привет, Джозеф, не возражаешь, если я попробую починить компонент?

1 лайк
30

Не думаешь, что у тебя есть время разобраться в этом или воспользоваться предложением @Arkshine? :smiley:

1 лайк
31

Извините, я забыл ответить. Я бы с радостью, если бы кто-то другой, более knowledgeable, попробовал это сделать. У меня нет доступа к экземпляру Discourse с включенным богатым тестированием, и я не могу его включить, поэтому я не могу это проверить :thinking: Спасибо за предложение!

3 лайка
32

Хорошо, спасибо, что сообщили. Я попробую. :+1:

3 лайка
33

Всем привет, наконец-то у меня появилось время поработать над этим.
Надеюсь, интерес к этому TC ещё сохраняется!

В этом PR TC полностью переработан со следующими функциями:

  • Масштабирование и перемещение (колесо мыши, щипок и элементы управления на изображении)
  • Полноэкранный режим
  • Открытие оригинальных изображений в полном размере в лайтбоксе
  • Опциональные метки «до»/«после» с настраиваемым расположением
  • Опциональная подпись
  • Несколько стилей ползунка (линия, тонкая, круг, захват) и настраиваемый цвет ползунка
  • Редактирование ползунков прямо в визуальном редакторе или с помощью markdown
  • Поддержка управления с клавиатуры (стрелки перемещают разделитель, +/-/0 для масштабирования)
  • Ограничение вставки ползунков по группам

Формат markdown изменился с использованием тега [wrap]. Обратная совместимость обеспечена.
Требуется версия 2026.6.0-latest.

Поддержка мобильных устройств и правостороннего письма (RTL). Хотя я не эксперт в UX и не смог много протестировать на мобильных устройствах или iOS.

Если вы хотите протестировать отдельно, вы можете использовать:

  • URL: https://github.com/arkshine/discourse-image-comparison-slider
  • ветка: modernize-with-rte
    (Рекомендую не редактировать ползунки из предыдущей версии, чтобы не менять формат markdown)
4 лайка