Adesivos do Discourse

Don · Outubro 3, 2023, 11:19am


	Resumo	Adicionar Stickers
	Pré-visualização	Theme Creator
	Repositório	GitHub - VaperinaDEV/discourse-stickers: With this theme component you can add stickers. · GitHub
	Achei útil?	> ./support --coffee
	Guia de Instalação	Como instalar um tema ou componente de tema
	Novo em Temas do Discourse?	Guia para iniciantes sobre o uso de Temas do Discourse

Instalar este componente de tema

Discourse Stickers v1.0

Olá

Com este componente de tema, você pode adicionar stickers a posts e mensagens de chat…

Como funciona?

Ele coloca um botão no compositor que abre o modal de stickers.

Modal de Stickers

Quando você clica em um sticker, ele será adicionado ao compositor.
O código markdown da imagem ficará dentro de [wrap=sticker] img [/wrap], o que significa que as imagens de stickers podem ser estilizadas separadamente das outras imagens.

Os stickers sempre vão para uma nova linha e contêm título e tamanho. O tamanho agora é fixo em 180x180px. Cada sticker tem uma sombra, o que torna a imagem mais parecida com um sticker…
No compositor e nos posts, as informações de meta no hover são ocultas com CSS.

Como configurar?

Primeiro, você precisa fazer upload das imagens que deseja usar para stickers. Basta fazer upload dessas imagens em um post de tópico.
Trabalharemos com essas imagens; precisamos da URL da imagem e da URL markdown.

Exemplo:
Fiz upload da imagem em um post. Uso a versão optimized da URL da imagem. Ela é encontrada aqui , mas você pode usar qualquer URL da imagem.

A URL markdown do upload dentro dos colchetes

Configurações

imagens de stickers
Na configuração de imagens de stickers, você pode configurar os stickers…

título: Este é o título da imagem e o texto alternativo (alt). Ele também vai para o título no código markdown.

emoji: Ele aparecerá no canto superior direito de cada sticker no Modal de Stickers.

previewUrl: Esta é a imagem exibida no Modal de Stickers.

markdownUrl: Esta é a URL markdown da imagem enviada anteriormente.

Discourse Stickers v2.0

Olá

Com este componente de tema, você pode adicionar stickers a posts, respostas e mensagens de chat.

A versão 2.0 introduz um gerenciador de stickers redesenhado, com upload nativo de imagens, grupos de stickers, visibilidade baseada em categorias e controles específicos para chat.

Como funciona?

O componente adiciona um botão de sticker ao compositor. Ao clicar nele, o seletor de stickers é aberto.

Quando você seleciona um sticker, ele é inserido diretamente no compositor.

Para posts e respostas regulares, os stickers são envolvidos em:

[wrap=sticker]![Título do sticker|180x180](imagem)[/wrap]

Isso permite que as imagens de stickers sejam estilizadas separadamente das imagens regulares.

Os stickers publicados não são clicáveis e não abrirão a lightbox do Discourse.

Seletor de stickers

O seletor de stickers suporta grupos quando você tem uma coleção maior de stickers.

Se vários grupos forem configurados, uma barra de filtro será exibida no topo do seletor.

Stickers sem grupo são automaticamente colocados em Outros.

Se não houver stickers disponíveis para o contexto atual, o seletor exibirá um estado vazio.

Como configurar?

A configuração de stickers foi completamente redesenhada na v2.0.

Você não precisa mais fazer upload de imagens para um tópico primeiro ou copiar URLs de imagens manualmente.

Basta ir para as configurações do componente e adicionar um sticker. O campo Imagem permite que você faça upload do sticker diretamente.

Configurações do sticker

Cada sticker agora pode ter as seguintes propriedades:

Título

O nome do sticker. Isso é usado como a dica de ferramenta (tooltip) e o texto alternativo (alt) do sticker.

Grupo

Opcional. Use grupos para organizar seus stickers e filtrá-los no seletor.

Deixe em branco para colocar o sticker em Outros.

Emblema de emoji

Opcional. Exibe um pequeno emoji no canto do sticker.

Você pode usar um emoji real ou um shortcode do Discourse, como :heart: ou :smile:.

Imagem

A imagem do sticker.

Faça upload da imagem diretamente usando a configuração. A mesma imagem é usada tanto no seletor quanto no sticker publicado.

Categorias

Opcional. Restringe o sticker a categorias específicas.

Se categorias forem selecionadas, o sticker aparecerá apenas no compositor de post/resposta regular quando uma dessas categorias estiver selecionada.

Deixe em branco para tornar o sticker disponível em todas as categorias.

Esta configuração não afeta o chat.

Ocultar de mensagens diretas

Quando ativado, o sticker não estará disponível em chats de mensagem direta/particular.

Canais de chat

Opcional. Restringe o sticker a canais públicos de chat específicos.

Insira os IDs dos canais separados por vírgulas.

Por exemplo, se a URL do canal for:

/chat/c/nome-do-canal/123

use:

123

Deixe em branco para tornar o sticker disponível em todos os canais de chat público/categoria.

Atualização da v1.x

Se você já estiver usando uma versão mais antiga do componente, não precisa recriar sua coleção de stickers.

A v2.0 inclui uma migração de configurações que converte automaticamente a antiga configuração sticker_images para o novo formato.

A migração preserva:

títulos dos stickers
emblemas de emoji
imagens de stickers já enviadas

As imagens já enviadas são resolvidas de volta para seus uploads originais no Discourse e preenchidas no novo campo Imagem.

As antigas configurações previewUrl e markdownUrl não são mais necessárias.

Basta atualizar o componente e seus stickers existentes devem ser migrados automaticamente.

Canapin · Outubro 3, 2023, 11:52am

Olá Don

Bom trabalho! Dei uma olhada rápida : )

Gerenciar os stickers é um pouco tedioso – especialmente a parte de pré-visualização – pois não há um layout ou recurso específico e dedicado para isso (como há com avatares e emojis personalizados), mas entendo que seria muito mais trabalho.

O filtro de sombra projetada é desativado quando um gif é parado, e não aparece como um fundo quadrado na imagem do meio aqui (um jpg retangular que aciona uma lightbox):

chrome_k71dGHbeLH

O efeito do filtro é muito legal, mas eu o colocaria como uma configuração opcional

O seletor de stickers usa conteúdo justificado como:

XXX
 X

Mas acho que preferiria alinhado à direita:

XXX
X

Opinião muito pessoal, é claro

Don · Outubro 3, 2023, 2:10pm

Obrigado pelo feedback @Canapin

Adicionei uma nova configuração para isso…
Screenshot 2023-10-03 at 16.04.17

Este também foi feito… Muito melhor

Don · Outubro 3, 2023, 4:54pm

Atualização: DEV: Adding DTooltip to sticker picker modal images · VaperinaDEV/discourse-stickers@b6c30eb · GitHub

mattdm · Outubro 28, 2023, 3:53pm

Seria possível limitar isso a certas categorias? (E, aliás, ter adesivos diferentes por categoria?)

hoangphuctran93 · Outubro 28, 2023, 4:37pm

Se os administradores puderem criar grupos de adesivos e os usuários puderem personalizar a seleção de adesivos de acordo com cada grupo de seus tópicos favoritos.
E, além disso, recomendar com base no ícone instalado quando um usuário usa um ícone em um artigo, mas acho que este é um recurso difícil.

deltaR · Novembro 9, 2023, 2:12pm

Posso perguntar o que devo fazer para colocar o sticker na linha de texto, e não em uma nova linha? (Eu fiz um fork deste repositório)

Don · Novembro 9, 2023, 4:31pm

Olá

Sim, você tem que remover o \\n do início e do fim desta linha.

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();
              });
            });
          }

Olá @mattdm Desculpe pela demora. Sim, acho que é provavelmente possível mostrar o botão no composer por categoria. Preciso verificar isso.

O componente já é um pouco complexo de configurar. Não tenho certeza sobre isso.

Olá Sim, este é outro nível. Não tenho certeza se é possível agora com esta implementação.

deltaR · Novembro 9, 2023, 5:03pm

Obrigado por responder!
Mas depois de mudar, o adesivo não pode ser exibido, assim

Don · Novembro 9, 2023, 5:13pm

Ah, desculpe, acho que você deveria remover o [wrap=sticker] e o [/wrap] também. Isso exibirá a imagem inline, então provavelmente não ficará faltando.
O [wrap=sticker] serve apenas para adicionar um estilo à imagem do 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 · Novembro 9, 2023, 5:23pm

Entendi, a exibição inline não pode usar [wrap=sticker]?
Funcionou, obrigado!

ps: Estou me perguntando se é possível ocultar o markdownUrl no Composer, já que será uma URL longa e ocupará muito espaço?

Don · Agosto 14, 2026, 2:31pm

Discourse Stickers v2.0

Este lançamento representa uma modernização bastante significativa do componente. Além de várias melhorias internas, a configuração de adesivos foi redesenhada para facilitar muito o gerenciamento de coleções de adesivos maiores.

Configuração de adesivos completamente redesenhada

A maior mudança na v2.0 é a própria configuração de adesivos.

A versão antiga armazenava adesivos como uma configuração JSON contendo valores como:

title
emoji
previewUrl
markdownUrl

Na v2.0, isso foi substituído pelo tipo de configuração nativa do Discourse objects.

Cada adesivo é agora um objeto configurável adequado com seus próprios campos:

Título - o nome do adesivo / texto da dica
Grupo - organize opcionalmente os adesivos em grupos
Emblema de emoji - exiba opcionalmente um pequeno emoji no canto
Imagem - faça upload do adesivo diretamente através da configuração
Categorias - restrinja opcionalmente os adesivos a categorias específicas
Ocultar de mensagens diretas - controle se um adesivo está disponível em mensagens diretas
Canais de chat - restrinja opcionalmente os adesivos a canais de chat públicos específicos

Isso torna a configuração de adesivos muito mais fácil de entender e manter, especialmente para coleções maiores.

Grupos de adesivos e filtragem

Agora você pode atribuir adesivos a um Grupo.

Quando vários grupos estão disponíveis, o seletor de adesivos exibe automaticamente uma barra de filtro no topo.

Você pode alternar entre:

Todos
grupos individuais
Outros para adesivos sem grupo

O filtro é gerado dinamicamente a partir dos adesivos atualmente disponíveis para o usuário.

Adesivos específicos de categoria

Os adesivos agora podem ser opcionalmente atribuídos a categorias específicas do Discourse.

Se um adesivo tiver categorias configuradas, ele aparecerá apenas no editor de postagem/resposta regular quando uma dessas categorias for selecionada.

Se nenhuma categoria for configurada, o adesivo permanecerá disponível em todos os lugares.

Mais controle sobre adesivos de Chat

A v2.0 adiciona mais controle sobre a disponibilidade de adesivos no Discourse Chat.

Agora você pode:

ocultar adesivos individuais de mensagens diretas;
restringir adesivos a canais de chat públicos específicos;
deixar a configuração do canal vazia para tornar um adesivo disponível em todos os canais de chat públicos/de categoria.

Isso permite que os administradores mantenham conjuntos de adesivos diferentes para diferentes partes de sua comunidade.

Adesivos publicados não são mais clicáveis

Os adesivos publicados agora são tratados como imagens não interativas.

Eles não abrem mais a lightbox do Discourse ao serem clicados.

Isso se aplica tanto a:

adesivos em postagens regulares;
adesivos postados no Chat.

O objetivo é fazer com que os adesivos se comportem mais como conteúdo real de adesivo/reação do que como imagens carregadas normais.

Melhor estado vazio

Se nenhum adesivo estiver disponível para o contexto atual, o seletor agora exibe um estado vazio adequado em vez de simplesmente mostrar um seletor vazio.

Por exemplo, isso pode acontecer quando restrições de categoria ou Chat impedem que qualquer adesivo esteja disponível.

Configurações de adesivos existentes são migradas

Uma das partes mais importantes da v2.0 é que as instalações existentes não precisam recriar sua coleção de adesivos.

A antiga configuração JSON sticker_images é migrada automaticamente para o novo formato objects quando o componente é atualizado.

Os títulos e valores de emoji dos adesivos existentes são preservados.

Mais importante ainda, as imagens de adesivos carregadas existentes também são migradas automaticamente.

Então, se você já tiver dezenas de adesivos configurados, a atualização para a v2.0 não exigirá que você faça upload de todos eles novamente.

A antiga propriedade markdownUrl não é mais necessária e não é transferida porque o novo campo Image representa o upload real do 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.

Tópico		Respostas	Visualizações
Telegram-like stickers? Feature	8	1993	25 de Janeiro de 2024
Discourse Chat Plugin official , chat , included-in-core	43	34258	29 de Julho de 2026
Image comparison slider Theme component	31	3898	6 de Junho de 2026
Emoji Fluff Theme component	39	1725	28 de Novembro de 2025
MD Composer extras Theme component	70	9893	8 de Julho de 2025

Adesivos do Discourse

Discourse Stickers v2.0

Como funciona?

Seletor de stickers

Como configurar?

Configurações do sticker

Atualização da v1.x

Discourse Stickers v2.0

Configuração de adesivos completamente redesenhada

Grupos de adesivos e filtragem

Adesivos específicos de categoria

Mais controle sobre adesivos de Chat

Adesivos publicados não são mais clicáveis

Melhor estado vazio

Configurações de adesivos existentes são migradas

Tópicos relacionados