 |
Краткое описание | Добавляет карусель изображений (или несколько) в сообщение |
 |
Репозиторий | GitHub - NateDhaliwal/discourse-post-image-carousel: Adds a image carousel in posts · GitHub |
 |
Руководство по установке | Как установить тему или компонент темы |
 |
Новичок в темах Discourse? | Руководство для начинающих по использованию тем Discourse |
Установить этот компонент темы
Этот компонент добавляет в сообщения карусель изображений на базе Splide/Swiper. Карусели Swiper обладают дополнительными возможностями, такими как миниатюры и различные анимации.
Swiper:
Swiper с включенными миниатюрами:
Splide:
На панель инструментов редактора добавлена кнопка для создания каруселей с изображением-заглушкой:
Разметка для каруселей выглядит следующим образом:
[wrap="Carousel" autoplay=true/false interval=<длительность в мс>/false loop=true/false thumbs=true/false thumbs_loop=true/false]
![image1]()
![image2]()
![image3]()
...
[/wrap]
Чтобы упростить процесс создания каруселей, при нажатии на кнопку в панели инструментов редактора открывается модальное окно (спасибо команде Discourse GIFs TC!), где можно выбрать конфигурацию карусели:
Затем вы можете добавить больше изображений внутри тега [wrap].
Настройки (для каждой карусели) следующие:
enable_thumbnails: Показывать миниатюры изображений под каруселью.
enable_loop: Зацикливать карусель, возвращаясь к началу после достижения конца.
enable_thumbnail_loop: Зацикливать миниатюры карусели после достижения конца.
Если изображений слишком мало, включение этой настройки может вызвать дерганое и нестабильное движение карусели. Рекомендуется добавлять больше изображений перед включением этой опции.
enable_autoplay: Автоматическое воспроизведение карусели.
autoplay_interval: Количество миллисекунд ожидания перед переходом к следующему слайду. Используется вместе с enable_autoplay. Если оставить поле пустым, по умолчанию будет установлено значение 5000.
Настройки
Глобальные настройки следующие:
carousel_software: Программное обеспечение для каруселей (Swiper/Splide); Swiper предпочтителен и используется по умолчанию.
image_carousel_placeholder: Изображение-заглушка по умолчанию для новой карусели. По умолчанию используется встроенное стандартное изображение-заглушка:
show_pagination_buttons: Показывать точки навигации под каруселью для удобного перехода между изображениями.
image_transition_animation: [Только для Swiper] Анимация перехода между изображениями; по умолчанию используется ‘slide’, доступные варианты:
- cube
- fade
- cards
- flip
- slide (по умолчанию)
pagination_button_color: Цвет точек навигации; если оставить поле пустым, будут использованы настройки по умолчанию для Swiper/Splide.
active_pagination_button_color: Цвет активной точки навигации; если оставить поле пустым, будут использованы настройки по умолчанию для Swiper/Splide.
Примечания
Текущая поддержка Splide в этом компоненте темы не позволяет использовать миниатюры и анимации переходов. Я с радостью приму Pull Request’ы для реализации миниатюр в Splide (что является более сложной задачей).
Если кто-то захочет реализовать вертикальные миниатюры, в репозитории есть соответствующий код (закомментированный), который пока работает не очень хорошо. Я буду рад принять Pull Request’ы для добавления этой функции (или улучшения текущей реализации).
Еще один момент: я сейчас изучаю возможность добавления изображений карусели прямо в модальное окно создания, но столкнулся с проблемой, описанной здесь. Буду благодарен, если кто-то ответит там!
Благодарности
Благодарю @Arkshine за вдохновение здесь. Я знаю, что он создал репозиторий здесь (однако я не использовал этот репозиторий при разработке данного компонента темы).
Надеюсь, это окажется полезным для кого-то!
Я пока не публиковал, потому что работаю над отображением в богатом редакторе (prosemirror), и чтобы понять все эти новые вещи, нужно время. Планирую скоро поделиться новостями… 