Stickers de Discourse

Don · 3 Octubre, 2023 11:19


	Resumen	Añadir Stickers
	Vista previa	Theme Creator
	Repositorio	GitHub - VaperinaDEV/discourse-stickers: With this theme component you can add stickers. · GitHub
	¿Te resultó útil?	> ./support --coffee
	Guía de instalación	Cómo instalar un tema o componente de tema
	¿Nuevo en temas de Discourse?	Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

Discourse Stickers v1.0

Hola

Con este componente de tema puedes añadir stickers a publicaciones y mensajes de chat…

¿Cómo funciona?

Coloca un botón en el compositor que abre el modal de stickers.

Modal de Stickers

Cuando haces clic en un sticker, se añadirá al compositor.
El código markdown de la imagen irá dentro de [wrap=sticker] img [/wrap], lo que significa que las imágenes de stickers se pueden estilizar por separado de las demás imágenes.

Los stickers siempre van a una nueva línea y contienen título y tamaño. El tamaño ahora es fijo de 180x180px. Cada sticker tiene una sombra que hace que la imagen se vea más como un sticker…
En el compositor y en las publicaciones, la información de metadatos al pasar el ratón se oculta con CSS.

¿Cómo configurarlo?

Primero necesitas subir las imágenes que quieras usar para los stickers. Simplemente sube estas imágenes en una publicación de un tema.
Trabajaremos con estas imágenes; necesitamos la URL de la imagen y la URL markdown.

Ejemplo:
Subí la imagen en una publicación. Uso la versión optimized de la URL de la imagen. Se encuentra aquí pero puedes usar cualquier URL de la imagen.

La URL markdown de la subida dentro de los paréntesis

Configuración

imágenes de stickers
En la configuración de imágenes de stickers puedes configurar los stickers…

título: Este es el título de la imagen y el texto alternativo. También irá en el título del código markdown.

emoji: Irá en la esquina superior derecha de cada sticker en el Modal de Stickers.

previewUrl: Esta es la imagen que se muestra en el Modal de Stickers.

markdownUrl: Esta es la URL markdown de la imagen subida anteriormente.

Discourse Stickers v2.0

Hola

Con este componente de tema puedes añadir stickers a publicaciones, respuestas y mensajes de chat.

La versión 2.0 introduce un gestor de stickers rediseñado con cargas de imagen nativas, grupos de stickers, visibilidad basada en categorías y controles específicos para el chat.

¿Cómo funciona?

El componente añade un botón de stickers al compositor. Al hacer clic, se abre el selector de stickers.

Cuando seleccionas un sticker, se inserta directamente en el compositor.

Para publicaciones y respuestas regulares, los stickers se envuelven en:

[wrap=sticker]![Título del sticker|180x180](imagen)[/wrap]

Esto permite estilizar las imágenes de stickers por separado de las imágenes regulares.

Los stickers publicados no son clicables y no abrirán el lightbox de Discourse.

Selector de stickers

El selector de stickers admite grupos cuando tienes una colección más grande de stickers.

Si se configuran varios grupos, se muestra una barra de filtros en la parte superior del selector.

Los stickers sin grupo se colocan automáticamente bajo Otros.

Si no hay stickers disponibles para el contexto actual, el selector muestra un estado vacío.

¿Cómo configurarlo?

La configuración de stickers ha sido rediseñada por completo en la v2.0.

Ya no necesitas subir imágenes a un tema primero ni copiar manualmente las URL de las imágenes.

Simplemente ve a la configuración del componente y añade un sticker. El campo Imagen te permite subir el sticker directamente.

Configuración de stickers

Cada sticker puede tener ahora las siguientes propiedades:

Título

El nombre del sticker. Se utiliza como el tooltip y el texto alternativo del sticker.

Grupo

Opcional. Usa grupos para organizar tus stickers y filtrarlos en el selector.

Déjalo vacío para colocar el sticker bajo Otros.

Insignia de emoji

Opcional. Muestra un pequeño emoji en la esquina del sticker.

Puedes usar un emoji real o un shortcode de Discourse como :heart: o :smile:.

Imagen

La imagen del sticker.

Sube la imagen directamente usando la configuración. La misma imagen se usa tanto para el selector como para el sticker publicado.

Categorías

Opcional. Restringe el sticker a categorías específicas.

Si se seleccionan categorías, el sticker solo aparecerá en el compositor de publicaciones/respuestas regulares cuando se seleccione una de esas categorías.

Déjalo vacío para hacer el sticker disponible en todas las categorías.

Esta configuración no afecta al chat.

Ocultar de mensajes directos

Cuando está habilitado, el sticker no estará disponible en chats de mensajes privados/directos.

Canales de chat

Opcional. Restringe el sticker a canales de chat públicos específicos.

Introduce los ID de canal separados por comas.

Por ejemplo, si la URL del canal es:

/chat/c/channel-name/123

usa:

123

Déjalo vacío para hacer el sticker disponible en todos los canales de chat públicos/de categoría.

Actualización desde v1.x

Si ya estás usando una versión anterior del componente, no necesitas recrear tu colección de stickers.

La v2.0 incluye una migración de configuración que convierte automáticamente la antigua configuración sticker_images al nuevo formato.

La migración preserva:

títulos de stickers
insignias de emoji
imágenes de stickers subidas existentes

Las imágenes subidas existentes se resuelven de nuevo a sus subidas originales de Discourse y se rellenan en el nuevo campo Imagen.

Las antiguas configuraciones previewUrl y markdownUrl ya no son necesarias.

Simplemente actualiza el componente y tus stickers existentes deberían migrarse automáticamente.

Canapin · 3 Octubre, 2023 11:52

Hola Don

¡Buen trabajo! Le eché un vistazo rápido : )

Gestionar las pegatinas es un poco tedioso, especialmente la parte de la vista previa, ya que no hay un diseño o función específica y dedicada para hacerlo (como sí la hay con los avatares y los emojis personalizados), pero entiendo que sería mucho más trabajo.

El filtro de sombra paralela se desactiva cuando un gif se detiene y no aparece como un fondo cuadrado en la imagen del medio aquí (un jpg rectangular que activa una lightbox):

chrome_k71dGHbeLH

El efecto del filtro es realmente genial, pero lo pondría como una configuración opcional

El selector de pegatinas utiliza contenido justificado como:

XXX
 X

Pero creo que preferiría alineado a la derecha:

XXX
X

Una opinión muy personal, por supuesto

Don · 3 Octubre, 2023 14:10

Gracias por tus comentarios @Canapin

He añadido una nueva configuración para esto…
Screenshot 2023-10-03 at 16.04.17

Este también está hecho… Mucho mejor

Don · 3 Octubre, 2023 16:54

Actualización: DEV: Adding DTooltip to sticker picker modal images · VaperinaDEV/discourse-stickers@b6c30eb · GitHub

mattdm · 28 Octubre, 2023 15:53

¿Sería posible limitar esto a ciertas categorías? (Y, ya que estamos, ¿tener diferentes pegatinas por categoría?)

hoangphuctran93 · 28 Octubre, 2023 16:37

Si se permite a los administradores crear grupos de pegatinas y los usuarios pueden personalizar la selección de pegatinas según cada grupo de sus temas favoritos.
Y además, recomendar basándose en el icono instalado cuando un usuario utiliza un icono en un artículo, pero creo que esta es una función difícil.

deltaR · 9 Noviembre, 2023 14:12

¿Puedo preguntar qué debo hacer para que la pegatina esté en la línea de texto, no en una nueva línea? (He bifurcado este repositorio)

Don · 9 Noviembre, 2023 16:31

Hola

Sí, tienes que eliminar el \n del principio y del final de esta línea.

github.com/deltaR-3k/discourse-stickers

javascripts/discourse/components/modal/sticker.js

main


      
          @tracked stickerImages = JSON.parse(settings.sticker_images);
          @service site;
          @service capabilities;
          
          @action
          pick() {
            let stickerImage = document.querySelectorAll(".sticker-pack span.sticker-holder img.sticker:hover");
            stickerImage.forEach((sticker) => {
              sticker.classList.add("picked");
              sticker.addEventListener("animationend", () => {
                let markupComposer = `![${sticker.alt}|60x52](${sticker.getAttribute("markdownUrl")})`;
                let markupChatComposer = `![${sticker.alt}|60x52](${sticker.getAttribute("markdownUrl")})`;
                if (this.args.model?.customPickHandler) {
                  this.args.model.customPickHandler(markupChatComposer);
                } else {
                  getOwner(this).lookup("service:app-events").trigger("composer:insert-text", markupComposer);
                }
                this.args.closeModal();
              });
            });
          }

Hola @mattdm Disculpa la demora. Sí, creo que probablemente sea posible mostrar el botón en el compositor por categoría. Necesito comprobar esto.

El componente ya es un poco complejo de configurar. No estoy seguro con esto.

Hola Sí, esto es otro nivel. No estoy seguro de que sea posible ahora con esta implementación.

deltaR · 9 Noviembre, 2023 17:03

¡Gracias por responder!
Pero después de cambiar, la pegatina no se puede mostrar, así

Don · 9 Noviembre, 2023 17:13

Oh, lo siento, creo que deberías eliminar también [wrap=sticker] y [/wrap]. Mostrará la imagen en línea, así que probablemente no se perderá.

El [wrap=sticker] es solo para añadir algo de estilo a la imagen del sticker.

github.com/deltaR-3k/discourse-stickers

common/common.scss

f28fb4b9c


      
          .d-wrap[data-wrap="sticker"] {
            @include user-select(none);
            img {
              width: 75px !important;
              height: 65px !important;
              aspect-ratio: 75 / 65 !important;
              @if $stickers_shadow == "true" {
                filter: drop-shadow(2px 2px 2px rgba(var(--always-black-rgb), 0.8));
              }
            }
            .button-wrapper {
              display: none;
            }
            a.lightbox {
              .discourse-touch & {
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                transition: filter 200ms;
                &:active {
                  filter: brightness(0.8);
                }

This file has been truncated. show original

deltaR · 9 Noviembre, 2023 17:23

Entiendo, ¿la visualización en línea no puede usar [wrap=sticker]?
¡Funciona, gracias!

ps: Me pregunto si es posible ocultar la markdownUrl en el Composer, ya que será una URL larga y ocupará demasiado espacio.

Don · 14 Agosto, 2026 14:31

Discourse Stickers v2.0

Esta versión representa una modernización bastante significativa del componente. Además de varias mejoras internas, la configuración de los stickers ha sido rediseñada para facilitar mucho la gestión de colecciones de stickers más grandes.

Configuración de stickers completamente rediseñada

El cambio más importante en la v2.0 es la propia configuración de los stickers.

La versión anterior almacenaba los stickers como una configuración JSON que contenía valores como:

title
emoji
previewUrl
markdownUrl

En la v2.0, esto ha sido reemplazado por el tipo de configuración objects nativo de Discourse.

Cada sticker es ahora un objeto configurable con sus propios campos:

Título - el nombre del sticker / texto del tooltip
Grupo - opcionalmente organiza los stickers en grupos
Insignia de emoji - opcionalmente muestra un pequeño emoji en la esquina
Imagen - carga el sticker directamente a través de la configuración
Categorías - opcionalmente restringe los stickers a categorías específicas
Ocultar en mensajes directos - controla si un sticker está disponible en mensajes directos
Canales de chat - opcionalmente restringe los stickers a canales de chat públicos específicos

Esto hace que la configuración de los stickers sea mucho más fácil de entender y mantener, especialmente para colecciones más grandes.

Grupos de stickers y filtrado

Ahora puedes asignar stickers a un Grupo.

Cuando hay varios grupos disponibles, el selector de stickers muestra automáticamente una barra de filtros en la parte superior.

Puedes cambiar entre:

Todos
grupos individuales
Otros para stickers sin grupo

El filtro se genera dinámicamente a partir de los stickers disponibles actualmente para el usuario.

Stickers específicos por categoría

Los stickers ahora pueden asignarse opcionalmente a categorías específicas de Discourse.

Si un sticker tiene categorías configuradas, solo aparecerá en el compositor habitual de publicaciones/respuestas cuando se seleccione una de esas categorías.

Si no se configuran categorías, el sticker sigue estando disponible en todas partes.

Más control sobre los stickers de Chat

La v2.0 añade más control sobre la disponibilidad de stickers en Discourse Chat.

Ahora puedes:

ocultar stickers individuales de los mensajes directos;
restringir stickers a canales de chat públicos específicos;
dejar el ajuste de canal vacío para que un sticker esté disponible en todos los canales de chat públicos/de categoría.

Esto permite a los administradores mantener diferentes conjuntos de stickers para diferentes partes de su comunidad.

Los stickers publicados ya no son clicables

Los stickers publicados ahora se tratan como imágenes no interactivas.

Ya no abren la lightbox de Discourse al hacer clic.

Esto aplica tanto a:

stickers en publicaciones normales;
stickers publicados en Chat.

El objetivo es que los stickers se comporten más como contenido real de sticker/reacción en lugar de imágenes cargadas normales.

Mejor estado vacío

Si no hay stickers disponibles para el contexto actual, el selector ahora muestra un estado vacío adecuado en lugar de simplemente mostrar un selector vacío.

Por ejemplo, esto puede ocurrir cuando las restricciones de categoría o de Chat impiden que cualquier sticker esté disponible.

Las configuraciones de stickers existentes se migran

Una de las partes más importantes de la v2.0 es que las instalaciones existentes no necesitan recrear su colección de stickers.

La antigua configuración JSON sticker_images se migra automáticamente al nuevo formato objects cuando se actualiza el componente.

Se conservan los títulos y valores de emoji de los stickers existentes.

Lo más importante es que las imágenes de stickers cargadas existentes también se migran automáticamente.

Así que si ya tienes docenas de stickers configurados, actualizar a la v2.0 no debería requerir que vuelvas a cargarlos todos.

La antigua propiedad markdownUrl ya no es necesaria y no se transfiere porque el nuevo campo Image representa la carga real de Discourse.

github.com/VaperinaDEV/discourse-stickers

FEATURE: Modernize Discourse Stickers (#5)

main ← v2.0

merged 02:27PM - 14 Aug 26 UTC

VaperinaDEV

+424 -126

Modernizes the component and significantly expands sticker management. ### Wh…at's included - Migrate `sticker_images` from the legacy JSON setting to Discourse's native `objects` setting. - Add native image uploads for stickers. - Add optional sticker groups with filtering in the picker. - Add category-based sticker visibility. - Add Chat-specific visibility controls for direct messages and channels. - Modernize the sticker modal to Glimmer. - Improve sticker selection by passing the selected sticker directly to the action. - Prevent published stickers from opening the lightbox. - Add a proper empty state when no stickers are available. - Add localization for the new UI and settings. - Add a settings migration that preserves existing sticker titles, emojis, and uploaded images when upgrading from the previous version. ### Migration Existing `sticker_images` configurations are automatically migrated when the component is updated. Legacy sticker image URLs are resolved back to their existing Discourse uploads, so existing stickers do not need to be uploaded again. The legacy `markdownUrl` property is no longer used because the new `image` property directly represents the sticker upload.

Tema		Respuestas	Vistas
Telegram-like stickers? Feature	8	1993	25 Enero 2024
Discourse Chat Plugin official , chat , included-in-core	43	34258	29 Julio 2026
Image comparison slider Theme component	31	3898	6 Junio 2026
Emoji Fluff Theme component	39	1725	28 Noviembre 2025
MD Composer extras Theme component	70	9893	8 Julio 2025

Stickers de Discourse

Discourse Stickers v2.0

¿Cómo funciona?

Selector de stickers

¿Cómo configurarlo?

Configuración de stickers

Actualización desde v1.x

Discourse Stickers v2.0

Configuración de stickers completamente rediseñada

Grupos de stickers y filtrado

Stickers específicos por categoría

Más control sobre los stickers de Chat

Los stickers publicados ya no son clicables

Mejor estado vacío

Las configuraciones de stickers existentes se migran

Temas relacionados