Adesivos do Discourse

Don · Outubro 3, 2023, 11:19am


	Resumo	Adicionar Adesivos
	Prévia	Theme Creator
	Repositório	GitHub - VaperinaDEV/discourse-stickers: With this theme component you can add stickers.
	Guia de Instalação	Como instalar um tema ou componente de tema
	Novo no Discourse Themes?	Guia para iniciantes sobre como usar temas do Discourse

Instalar este componente de tema

Olá
Com este componente de tema você pode adicionar adesivos a postagens e mensagens de chat…

Como funciona?

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

Modal de Adesivos

Quando você clica em um adesivo, ele o adiciona ao compositor.
O código markdown da imagem vai para [wrap=sticker] img [/wrap], o que significa que as imagens de adesivos podem ser direcionadas separadamente das outras imagens.

Os adesivos sempre vão para uma nova linha e contêm título e tamanho. O tamanho agora é fixo em 180x180px. Cada adesivo tem uma sombra que torna a imagem mais “adesivada”…
No compositor e nas postagens, as informações de meta de hover são ocultadas com CSS.

Como configurar?

Primeiro, você precisa carregar as imagens que deseja usar como adesivos. Simplesmente carregue essas imagens em uma postagem de tópico.
Trabalharemos com essas imagens, precisaremos do URL da imagem e do URL markdown.

Exemplo:
Eu carreguei a imagem em uma postagem. Eu uso a versão otimizada do URL da imagem. Que é encontrada aqui mas você pode usar qualquer URL da imagem.

O URL de upload markdown dentro dos colchetes

Configurações

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

título: Este é o título e o alt da imagem. Ele também irá para o título do código markdown.

emoji: Ele irá no canto superior direito de cada adesivo na Modal de Adesivos.

previewUrl: Esta é a imagem que é mostrada na Modal de Adesivos.

markdownUrl: Este é o URL markdown da imagem previamente carregada.

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?

Tópico		Respostas	Visualizações
Telegram-like stickers? Feature	9	1892	25 de Janeiro de 2024
Permanent/stickied note on Discourse Support	1	272	30 de Setembro de 2023
What are good plugins or theme components for a forum emphasizing pictures? Community	12	1767	4 de Agosto de 2025
MD Composer extras Theme component	70	8704	8 de Julho de 2025
Welcome Link Banner theme-component with photos Feature welcome-link-banner	10	833	14 de Junho de 2023

Adesivos do Discourse

Tópicos relacionados