Autocollants 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.
	Guide d’installation	Comment installer un thème ou un composant de thème
	Nouveau sur les thèmes Discourse ?	Guide du débutant pour l’utilisation des thèmes Discourse

← Remplissez "repoName" et "repoURL" pour le bouton d’installation automatique →

Installer ce composant de thème

← Décrivez ce thème/composant en une ou deux phrases →

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

← Ajoutez plus de détails et expliquez les paramètres (si applicable) →

Comment ça marche ?

Il place un bouton dans l’éditeur qui ouvre la fenêtre modale des autocollants.

Fenêtre modale des autocollants

Lorsque vous cliquez sur un autocollant, il l’ajoute à l’éditeur.
Le code markdown de l’image va dans [wrap=sticker] img [/wrap], ce qui signifie que les images d’autocollants sont ciblables séparément des autres images.

Les autocollants vont toujours à la ligne et contiennent un titre et une taille. La taille est maintenant fixe à 180x180px. Chaque autocollant a une ombre qui rend l’image plus autocollante…
Dans l’éditeur et les messages, les informations de survol - métadonnées sont masquées avec CSS.

Comment configurer ?

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

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

L’URL de téléchargement markdown entre crochets

Paramètres

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

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

emoji : Il apparaîtra dans la fenêtre modale des autocollants dans le coin supérieur droit de chaque autocollant.

previewUrl : C’est l’image qui s’affiche dans la fenêtre modale des autocollants.

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

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 ?

Sujet		Réponses	Vues
Telegram-like stickers? Feature	9	1892	Janvier 25, 2024
Permanent/stickied note on Discourse Support	1	272	Septembre 30, 2023
What are good plugins or theme components for a forum emphasizing pictures? Community	12	1768	Août 4, 2025
MD Composer extras Theme component	70	8704	Juillet 8, 2025
Welcome Link Banner theme-component with photos Feature welcome-link-banner	10	833	Juin 14, 2023

Autocollants Discourse

Sujets connexes