Stickers Discourse

Don · Octobre 3, 2023, 11:19


	Résumé	Ajouter des autocollants
	Aperçu	Theme Creator
	Dépôt	GitHub - VaperinaDEV/discourse-stickers: With this theme component you can add stickers. · GitHub
	Vous l’avez trouvé utile ?	> ./support --coffee
	Guide d’installation	Comment installer un thème ou un composant de thème
	Nouveau aux thèmes Discourse ?	Guide du débutant pour l’utilisation des thèmes Discourse

Installer ce composant de thème

Discourse Stickers v1.0

Bonjour

Avec ce composant de thème, vous pouvez ajouter des autocollants aux publications et aux messages de chat…

Comment ça marche ?

Il place un bouton dans le composeur qui ouvre la modale des autocollants.

Modale des autocollants

Lorsque vous cliquez sur un autocollant, il est ajouté au composeur.
Le code markdown de l’image est placé dans [wrap=sticker] img [/wrap], ce qui signifie que les images des autocollants peuvent être ciblées séparément des autres images.

Les autocollants passent toujours à la ligne suivante et contiennent un titre et une taille. La taille est actuellement fixée à 180x180px. Chaque autocollant a une ombre qui donne à l’image un aspect plus « autocollant »…
Dans le composeur et les publications, les informations métadonnées au survol sont masquées par CSS.

Comment configurer ?

D’abord, vous devez télécharger les images que vous souhaitez utiliser pour les autocollants. Téléchargez simplement ces images dans une publication de sujet.
Nous travaillerons avec ces images car nous avons besoin de l’URL de l’image et de l’URL markdown.

Exemple :
J’ai téléchargé l’image dans une publication. J’utilise la version optimisée de l’URL de l’image. Elle se trouve ici mais vous pouvez utiliser n’importe quelle URL de l’image.

L’URL markdown du téléchargement dans les parenthèses

Paramètres

images des autocollants
Dans le paramètre des images des autocollants, vous pouvez configurer les autocollants…

titre : C’est le titre de l’image et le texte alternatif. Il sera également ajouté au titre du code markdown.

emoji : Il sera placé dans la modale des autocollants, dans le coin supérieur droit de chaque autocollant.

previewUrl : C’est l’image affichée dans la modale des autocollants.

markdownUrl : C’est l’URL markdown de l’image téléchargée précédemment.

Discourse Stickers v2.0

Bonjour

Avec ce composant de thème, vous pouvez ajouter des autocollants aux publications, aux réponses et aux messages de chat.

La version 2.0 introduit un gestionnaire d’autocollants repensé avec des téléchargements d’images natifs, des groupes d’autocollants, une visibilité basée sur les catégories et des contrôles spécifiques au chat.

Comment ça marche ?

Le composant ajoute un bouton d’autocollant au composeur. En cliquant dessus, le sélecteur d’autocollants s’ouvre.

Lorsque vous sélectionnez un autocollant, il est inséré directement dans le composeur.

Pour les publications et réponses régulières, les autocollants sont enveloppés dans :

[wrap=sticker]![Titre de l'autocollant|180x180](image)[/wrap]

Cela permet de styliser les images des autocollants séparément des images régulières.

Les autocollants publiés ne sont pas cliquables et n’ouvriront pas la lightbox de Discourse.

Sélecteur d’autocollants

Le sélecteur d’autocollants prend en charge les groupes lorsque vous avez une grande collection d’autocollants.

Si plusieurs groupes sont configurés, une barre de filtres est affichée en haut du sélecteur.

Les autocollants sans groupe sont automatiquement placés sous Autre.

Si aucun autocollant n’est disponible pour le contexte actuel, le sélecteur affiche un état vide.

Comment configurer ?

La configuration des autocollants a été entièrement repensée dans la v2.0.

Vous n’avez plus besoin de télécharger d’abord les images dans un sujet ou de copier manuellement les URL des images.

Allez simplement dans les paramètres du composant et ajoutez un autocollant. Le champ Image vous permet de télécharger l’autocollant directement.

Paramètres des autocollants

Chaque autocollant peut désormais avoir les propriétés suivantes :

Titre

Le nom de l’autocollant. Il est utilisé comme infobulle et texte alternatif de l’autocollant.

Groupe

Facultatif. Utilisez les groupes pour organiser vos autocollants et les filtrer dans le sélecteur.

Laissez vide pour placer l’autocollant sous Autre.

Badge emoji

Facultatif. Affiche un petit emoji dans le coin de l’autocollant.

Vous pouvez utiliser un emoji réel ou un code court Discourse tel que :heart: ou :smile:.

Image

L’image de l’autocollant.

Téléchargez l’image directement en utilisant le paramètre. La même image est utilisée pour le sélecteur et l’autocollant publié.

Catégories

Facultatif. Restreint l’autocollant à des catégories spécifiques.

Si des catégories sont sélectionnées, l’autocollant n’apparaîtra que dans le composeur de publication/réponse régulier lorsqu’une de ces catégories est sélectionnée.

Laissez vide pour rendre l’autocollant disponible dans toutes les catégories.

Ce paramètre n’affecte pas le chat.

Masquer des messages directs

Lorsqu’il est activé, l’autocollant ne sera pas disponible dans les chats privés/messages directs.

Canaux de chat

Facultatif. Restreint l’autocollant à des canaux de chat publics spécifiques.

Saisissez les identifiants des canaux séparés par des virgules.

Par exemple, si l’URL du canal est :

/chat/c/channel-name/123

utilisez :

123

Laissez vide pour rendre l’autocollant disponible dans tous les canaux de chat publics/par catégorie.

Mise à niveau depuis la v1.x

Si vous utilisez déjà une version antérieure du composant, vous n’avez pas besoin de recréer votre collection d’autocollants.

La v2.0 inclut une migration des paramètres qui convertit automatiquement l’ancienne configuration sticker_images au nouveau format.

La migration préserve :

les titres des autocollants
les badges emoji
les images d’autocollants téléchargées existantes

Les images téléchargées existantes sont résolues vers leurs téléchargements Discourse d’origine et remplies dans le nouveau champ Image.

Les anciens paramètres previewUrl et markdownUrl ne sont plus nécessaires.

Mettez simplement à jour le composant et vos autocollants existants devraient être migrés automatiquement.

Canapin · Octobre 3, 2023, 11:52

Salut Don

Beau travail ! J’ai jeté un coup d’œil rapide

La gestion des autocollants est un peu fastidieuse – surtout la partie aperçu – car il n’y a pas de mise en page ou de fonctionnalité spécifique pour le faire (comme c’est le cas pour les avatars et les emojis personnalisés), mais je comprends que cela demanderait beaucoup plus de travail.

Le filtre d’ombre portée est désactivé lorsqu’un gif est arrêté, et n’apparaît pas comme un arrière-plan carré sur l’image du milieu ici (un jpg rectangulaire qui déclenche une lightbox) :

chrome_k71dGHbeLH

L’effet de filtre est vraiment sympa, mais je le mettrais comme un réglage optionnel

Le sélecteur d’autocollants utilise un contenu justifié tel que :

XXX
 X

Mais je pense que je préférerais un alignement à droite :

XXX
X

Opinion très personnelle, bien sûr

Don · Octobre 3, 2023, 2:10

Merci pour vos commentaires @Canapin

J’ai ajouté un nouveau paramètre pour cela…
Screenshot 2023-10-03 at 16.04.17

Celui-ci est également fait… Beaucoup mieux

Don · Octobre 3, 2023, 4:54

Mise à jour : DEV: Adding DTooltip to sticker picker modal images · VaperinaDEV/discourse-stickers@b6c30eb · GitHub

mattdm · Octobre 28, 2023, 3:53

Serait-il possible de limiter cela à certaines catégories ? (Et, d’ailleurs, d’avoir des autocollants différents par catégorie ?)

hoangphuctran93 · Octobre 28, 2023, 4:37

Si vous pouvez permettre aux administrateurs de créer des groupes d’autocollants et aux utilisateurs de personnaliser la sélection d’autocollants en fonction de chaque groupe de leurs sujets préférés.
Et en outre, recommander en fonction de l’icône installée lorsqu’un utilisateur utilise une icône dans un article, mais je pense que c’est une fonctionnalité difficile.

deltaR · Novembre 9, 2023, 2:12

Puis-je demander ce que je dois faire pour que l’autocollant soit dans la ligne de texte, et non sur une nouvelle ligne ? (J’ai forké ce dépôt)

Don · Novembre 9, 2023, 4:31

Bonjour

Oui, vous devez supprimer le \n du début et de la fin de cette ligne.

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

Salut @mattdm Désolé pour le retard. Oui, je pense qu’il est probablement possible d’afficher le bouton dans le compositeur par catégorie. Je dois vérifier cela.

Le composant est déjà un peu complexe à configurer. Je ne suis pas sûr pour cela.

Bonjour Oui, c’est un autre niveau. Je ne suis pas sûr que ce soit possible maintenant avec cette implémentation.

deltaR · Novembre 9, 2023, 5:03

Merci de votre réponse !
Mais après avoir changé, l’autocollant ne peut pas être affiché, comme ceci

Don · Novembre 9, 2023, 5:13

Oh, désolé, je pense que vous devriez également supprimer [wrap=sticker] et [/wrap]. Cela affichera l’image en ligne, donc elle ne manquera probablement pas.

Le [wrap=sticker] sert uniquement à ajouter un style à l’image du 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 · Novembre 9, 2023, 5:23

Je vois, l’affichage en ligne ne peut pas utiliser [wrap=sticker] ?
Ça marche, merci !

ps : Je me demande s’il est possible de masquer le markdownUrl dans le Compositeur, car ce sera une longue URL et elle prendra trop de place ?

Don · Août 14, 2026, 2:31

Discourse Stickers v2.0

Cette version représente une modernisation assez significative du composant. Outre un certain nombre d’améliorations internes, la configuration des autocollants a été repensée pour faciliter la gestion de collections d’autocollants plus volumineuses.

Paramètres des autocollants entièrement repensés

Le changement le plus important dans la v2.0 concerne la configuration des autocollants elle-même.

L’ancienne version stockait les autocollants sous forme de paramètre JSON contenant des valeurs telles que :

title
emoji
previewUrl
markdownUrl

Dans la v2.0, cela a été remplacé par le type de paramètre objects natif de Discourse.

Chaque autocollant est désormais un objet configurable à part entière avec ses propres champs :

Titre - le nom de l’autocollant / texte de l’infobulle
Groupe - organiser optionnellement les autocollants en groupes
Badge émoji - afficher optionnellement un petit émoji dans le coin
Image - télécharger l’autocollant directement via le paramètre
Catégories - restreindre optionnellement les autocollants à des catégories spécifiques
Masquer dans les messages privés - contrôler si un autocollant est disponible dans les MP
Canaux de chat - restreindre optionnellement les autocollants à des canaux de chat publics spécifiques

Cela rend la configuration des autocollants beaucoup plus facile à comprendre et à maintenir, en particulier pour les collections volumineuses.

Groupes d’autocollants et filtrage

Vous pouvez désormais attribuer des autocollants à un Groupe.

Lorsque plusieurs groupes sont disponibles, le sélecteur d’autocollants affiche automatiquement une barre de filtres en haut.

Vous pouvez basculer entre :

Tous
les groupes individuels
Autre pour les autocollants sans groupe

Le filtre est généré dynamiquement à partir des autocollants actuellement disponibles pour l’utilisateur.

Autocollants spécifiques à une catégorie

Les autocollants peuvent désormais être attribués optionnellement à des catégories Discourse spécifiques.

Si un autocollant a des catégories configurées, il n’apparaîtra dans le composant de message/réponse classique que si l’une de ces catégories est sélectionnée.

Si aucune catégorie n’est configurée, l’autocollant reste disponible partout.

Plus de contrôle sur les autocollants de Chat

La v2.0 offre plus de contrôle sur la disponibilité des autocollants dans Discourse Chat.

Vous pouvez désormais :

masquer des autocollants individuels des messages privés ;
restreindre les autocollants à des canaux de chat publics spécifiques ;
laisser le paramètre de canal vide pour rendre un autocollant disponible dans tous les canaux de chat publics/catégorie.

Cela permet aux administrateurs de maintenir différents ensembles d’autocollants pour différentes parties de leur communauté.

Les autocollants publiés ne sont plus cliquables

Les autocollants publiés sont désormais traités comme des images non interactives.

Ils n’ouvrent plus la lightbox Discourse lorsqu’on clique dessus.

Cela s’applique à la fois aux :

autocollants dans les messages classiques ;
autocollants publiés dans le Chat.

L’objectif est de faire en sorte que les autocollants se comportent davantage comme du contenu d’autocollant/réaction plutôt que comme des images téléchargées normales.

Meilleur état vide

Si aucun autocollant n’est disponible pour le contexte actuel, le sélecteur affiche désormais un état vide approprié au lieu d’afficher simplement un sélecteur vide.

Par exemple, cela peut se produire lorsque les restrictions de catégorie ou de Chat empêchent tout autocollant d’être disponible.

Migration des configurations d’autocollants existantes

L’une des parties les plus importantes de la v2.0 est que les installations existantes n’ont pas besoin de recréer leur collection d’autocollants.

L’ancien paramètre JSON sticker_images est automatiquement migré vers le nouveau format objects lors de la mise à jour du composant.

Les titres et les valeurs émoji des autocollants existants sont conservés.

Plus important encore, les images d’autocollants téléchargées existantes sont également migrées automatiquement.

Ainsi, si vous avez déjà des dizaines d’autocollants configurés, la mise à jour vers la v2.0 ne devrait pas vous obliger à les télécharger tous à nouveau.

L’ancienne propriété markdownUrl n’est plus nécessaire et n’est pas conservée car le nouveau champ Image représente le téléchargement Discourse effectif.

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.

Sujet		Réponses	Vues
Telegram-like stickers? Feature	8	1993	Janvier 25, 2024
Discourse Chat Plugin official , chat , included-in-core	43	34314	Juillet 29, 2026
Image comparison slider Theme component	31	3913	Juin 6, 2026
Emoji Fluff Theme component	39	1738	Novembre 28, 2025
MD Composer extras Theme component	70	9904	Juillet 8, 2025

Stickers Discourse

Discourse Stickers v2.0

Comment ça marche ?

Sélecteur d’autocollants

Comment configurer ?

Paramètres des autocollants

Mise à niveau depuis la v1.x

Discourse Stickers v2.0

Paramètres des autocollants entièrement repensés

Groupes d’autocollants et filtrage

Autocollants spécifiques à une catégorie

Plus de contrôle sur les autocollants de Chat

Les autocollants publiés ne sont plus cliquables

Meilleur état vide

Migration des configurations d’autocollants existantes

Sujets connexes