Стикеры для Discourse

:information_source: Краткое описание Добавление стикеров
:eyeglasses: Предпросмотр Theme Creator
:hammer_and_wrench: Репозиторий GitHub - VaperinaDEV/discourse-stickers: With this theme component you can add stickers. · GitHub
:question: Руководство по установке Как установить тему или компонент темы
:open_book: Новичок в темах Discourse? Начинающее руководство по использованию тем Discourse

Установить этот компонент темы

Привет :wave:

С помощью этого компонента темы вы можете добавлять стикеры в сообщения и чаты…

Как это работает?

Он добавляет кнопку в редактор, которая открывает модальное окно со стикерами.

Модальное окно со стикерами

При клике на стикер он добавляется в редактор.
Код изображения в формате markdown помещается внутри [wrap=sticker] img [/wrap], что означает, что изображения стикеров можно выделять отдельно от других изображений.

Стикеры всегда переносятся на новую строку и содержат заголовок и размер. Размер теперь фиксированный — 180x180 пикселей. Каждый стикер имеет тень, что делает изображение более похожим на наклейку…
В редакторе и сообщениях при наведении курсора мета-информация скрывается с помощью CSS.


Как настроить?

Сначала вам нужно загрузить изображения, которые вы хотите использовать в качестве стикеров. Просто загрузите эти изображения в сообщение темы.
Мы будем работать с этими изображениями: нам понадобятся URL изображения и URL в формате markdown.

Пример:
Я загрузил изображение в сообщение. Я использую оптимизированную версию URL изображения. Она находится здесь :arrow_down_small:, но вы можете использовать любой URL изображения.

URL загрузки в формате markdown внутри скобок :arrow_down_small:


Настройки

Изображения стикеров
В настройке “Изображения стикеров” вы можете настроить стикеры…

title: Это заголовок изображения и альтернативный текст. Он также будет добавлен в заголовок кода markdown.

emoji: Он будет отображаться в модальном окне со стикерами в правом верхнем углу каждого стикера.

previewUrl: Это изображение, которое отображается в модальном окне со стикерами.

markdownUrl: Это ранее загруженный URL изображения в формате markdown.


17 лайков

Привет, Дон :wave:

Отличная работа! Я быстро посмотрел :slight_smile:

Управление стикерами немного утомительно — особенно часть с предпросмотром — так как для этого нет специального макета или функции (как, например, для аватаров и пользовательских эмодзи), но я понимаю, что это потребовало бы гораздо больше работы.

Фильтр тени отключается, когда GIF-анимация остановлена, и не отображается как квадратный фон на среднем изображении здесь (прямоугольный JPG, который открывает лайтбокс):

chrome_k71dGHbeLH

Эффект фильтра действительно классный, но я бы сделал его опциональной настройкой :slight_smile:

Выборщик стикеров использует выравнивание по центру, например:

XXX
 X 

Но, думаю, мне больше понравилось бы выравнивание по правому краю:

XXX
X 

Конечно, это чисто личное мнение :v:

5 лайков

Спасибо за обратную связь, @Canapin :slight_smile:

Я добавил новую настройку для этого…
Screenshot 2023-10-03 at 16.04.17

Это тоже сделано… Гораздо лучше :slight_smile:

7 лайков

Обновление: DEV: Adding DTooltip to sticker picker modal images · VaperinaDEV/discourse-stickers@b6c30eb · GitHub

5 лайков

Возможно ли ограничить это определенными категориями? (И, кстати, иметь разные стикеры для каждой категории?)

1 лайк

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

Кроме того, можно рекомендовать иконки на основе установленных, когда пользователь использует иконку в статье, но, думаю, это сложная функция.

Могу я спросить, что нужно сделать, чтобы стикер отображался в строке текста, а не на новой строке? (Я сделал форк этого репозитория)

Привет :waving_hand:

Да, вам нужно убрать \n в начале и в конце этой строки.


Привет @mattdm :waving_hand: Извините за задержку. Да, думаю, вполне возможно отображать кнопку в редакторе сообщения в зависимости от категории. Мне нужно это проверить.

Компонент уже немного сложен в настройке. Не уверен насчёт этого. :thinking:

Привет :waving_hand: Да, это уже другой уровень. :slightly_smiling_face: Не уверен, что это возможно реализовать сейчас в текущей версии.

1 лайк

Спасибо за ответ!
Но после изменения стикер не отображается, вот так

Ой, извините, я думаю, вам стоит также удалить [wrap=sticker] и [/wrap]. Тогда изображение отобразится внутри строки, и оно, скорее всего, не пропадёт. :thinking:

[wrap=sticker] нужен только для добавления некоторых стилей к изображению стикера.

Понятно, для встроенного отображения нельзя использовать [wrap=sticker]?
Работает, спасибо!

PS: Мне интересно, можно ли скрыть markdownUrl в редакторе, так как это будет длинная ссылка, занимающая слишком много места?