Configurer un emoji personnalisé

[Discourse]

Ce guide explique comment configurer des émojis personnalisés sur votre site Discourse.

Niveau d’utilisateur requis : Administrateur

Configuration des émojis personnalisés

Vous souhaitez modifier les émojis pour votre site Discourse ? Examinons comment configurer les émojis personnalisés pour votre site Discourse, y compris la sélection des ensembles d’émojis, le téléchargement de nouveaux émojis et l’ajustement des tailles d’émojis.

Sélection d’un ensemble d’émojis

Discourse est livré avec sept ensembles d’émojis différents :

• Style Apple/International
• Style Google
• Style Twitter
• Style Emoji One
• Style Win10
• Google Classique
• Facebook Messenger

Vous pouvez sélectionner un ensemble d’émojis à l’adresse /admin/config/emoji/settings?filter=emoji%20set ainsi que d’autres paramètres liés aux émojis.

Ajout d’émojis personnalisés

Pour ajouter des émojis personnalisés :

1. Accédez à : Administration Discourse - Configuration - Émoji à l’adresse /admin/config/emoji
2. Vous pouvez :
   • Entrer un nom et cliquer sur Ajouter un émoji pour télécharger une photo comme émoji
   • Glisser-déposer jusqu’à 10 fichiers dans le champ Nom pour un téléchargement groupé ; les noms de fichiers seront utilisés comme noms d’émojis.

Paramètres des émojis

Vous pouvez accéder aux paramètres des émojis à l’adresse /admin/config/emoji/settings pour personnaliser le comportement des émojis sur votre site.

• enable_emoji - Active l’affichage et l’utilisation des émojis dans votre instance Discourse. Si désactivé, les émojis ne seront pas rendus et les utilisateurs ne pourront pas y accéder ou les utiliser dans les champs de texte.
• emoji_set - Sélectionnez votre style d’émoji préféré. Différents ensembles d’émojis peuvent donner des apparences uniques aux émojis affichés sur le site.
• max_emojis_in_title - Nombre maximum d’émojis autorisés dans le titre d’un sujet (par défaut : 1). Si la valeur définie est zéro, cela empêche l’utilisation de tout émoji dans les titres de sujets.
• enable_emoji_shortcuts - Les textes souriants courants tels que :) :p :( seront convertis en émojis.
• emoji_autocomplete_min_chars - Nombre minimum de caractères requis pour déclencher la fenêtre contextuelle d’autocomplétion des émojis (par défaut : 0).
• enable_inline_emoji_translation - Active la traduction pour les émojis en ligne (sans espace ni ponctuation avant).
• emoji_deny_list - Ces émojis ne seront pas disponibles pour être utilisés dans les menus ou les codes courts.
• external_emoji_url - URL du service externe pour les images d’émojis (par défaut : https://emoji.discourse-cdn.com). Laissez vide pour désactiver.
• discourse_reactions_enabled_reactions - Définit une liste de réactions activées, tout émoji est autorisé ici. Les réactions par défaut incluent : cœur, rire, pleurer, tête_explosée, applaudir, boule_confettis, câlins, bisou_du_chef, 100, +1, fusée, yeux_étonnés, discourse, et yeux.
• discourse_reactions_excluded_from_like - Réactions qui ne comptent pas comme un J’aime. Toutes les réactions qui ne figurent pas dans cette liste compteront comme un J’aime pour les badges, le signalement et d’autres fins.
• discourse_reactions_allow_any_emoji - Si cette option est activée, un bouton sera ajouté permettant aux utilisateurs de sélectionner n’importe quel émoji dans le sélecteur de réactions. Les membres seront autorisés à choisir n’importe quel émoji, y compris les émojis personnalisés, pour les réactions. Pour limiter les réactions disponibles, utilisez le paramètre de site emoji_deny_list.

Redimensionnement des émojis personnalisés

Par défaut, tous les émojis sont redimensionnés via CSS à 20x20, mais cela peut être remplacé par du CSS personnalisé. Pour conserver le rapport d’aspect correct et la taille native dans les publications, ajoutez le CSS suivant :

/* Rendre les émojis de taille normale (ne pas forcer le carré) */
div.topic-post img.emoji[src*="uploads"], 
div.d-editor-preview img.emoji[src*="uploads"], 
div.emoji-modal img.emoji[src*="uploads"], 
div.d-editor-textarea-wrapper img.emoji[src*="uploads"], 
div.title-wrapper img.emoji[src*="uploads"], 
td.main-link img.emoji[src*="uploads"] {
    width: auto;
    height: auto;
}

Pour personnaliser la taille d’un émoji spécifique, utilisez :

img.emoji[title=":youremoji:"] { 
    height: XXpx; 
    width: YYpx; 
}

Pour redimensionner les émojis dans les messages de chat et le statut utilisateur dans les chats :

div.chat-message-text img.emoji[src*="uploads"], 
span.user-status-message img.emoji[src*="uploads"] {
    width: auto;
    height: auto;
}

[Roi]

J’ai remarqué que les emojis/smileys personnalisés s’affichent en 20x20 dans les messages de chat et dans le statut de l’utilisateur dans les chats. Je l’ai résolu comme ceci :

div.chat-message-text img.emoji[src*="uploads"] { /* Messages de chat */
    width: auto;
    height: auto;
}

span.user-status-message img.emoji[src*="uploads"] { /* Statut de l'utilisateur dans le chat */
    width: auto;
    height: auto;
}

Feriez-vous de même ? Si oui, il pourrait être utile de l’ajouter à ce post wiki ci-dessus. Sinon, je suis heureux d’optimiser mon code CSS.

[Vladislav_Jandric]

J’ai personnalisé de nouveaux Emoji, mais je ne le trouve pas parmi les autres Emojis.

[ondrej]

Avez-vous fait défiler tout en bas du sélecteur d’emojis ? C’est là que se trouvent vos groupes d’emojis personnalisés.

[Moin]

@Discourse

Discourse est livré avec sept jeux d’émojis différents :

• Style Apple/International
• Style Google
• Style Twitter
• Style Emoji One
• Style Win10
• Google Classique
• Facebook Messenger

Ceux-ci ont changé :

Emojis update

For licensing reasons, we had to change the emoji sets. The following existing sets have been migrated automatically to a new set: apple → twemoji facebook_messenger → unicode google → noto google_classic → noto win10 → fluentui emoji_one → twemoji twitter → twemoji On top of fluent ui, noto, twemoji, and unicode, we also added the openmoji set. Admins can change the set at /admin/config/emoji/settings?filter=emoji_set If there’s an existing open-source set you would like to see available i…

[pacharanero (Marcus Baw)]

J’ai essayé différentes options pour le téléversement groupé d’émojis personnalisés, mais je n’ai rien trouvé, alors je demande ici quelle serait la meilleure option pour l’avenir.

J’ai une petite collection d’émojis personnalisés que j’aime téléverser dans tous mes Discourse. Certains sont des icônes FontAwesome, que j’aime avoir disponibles sous forme de :icon-name: dans les messages de composition afin de pouvoir expliquer les icônes de l’interface utilisateur de Discourse aux utilisateurs. D’autres sont juste pour le plaisir, comme un drapeau du Yorkshire. Je les ai dans des dossiers (et ils pourraient facilement être en ligne dans un dépôt GitHub, je suppose).

J’aimerais pouvoir téléverser ces dossiers entiers, en une seule fois, dans l’interface utilisateur des émojis personnalisés. Actuellement, la limite de téléversement respecte le paramètre simultaneous_uploads (« Nombre maximal de fichiers pouvant être glissés et déposés dans le compositeur ») du site, qui est limité à une valeur maximale de 20 (Erreur : « simultaneous_uploads : La valeur doit être comprise entre 0 et 20. » si vous essayez de l’augmenter davantage, même temporairement)

J’ai examiné avec intérêt l’autre paramètre d’émoji external-emoji-url, qui permet de définir une URL pour un ensemble d’émojis externes, mais malheureusement, cela remplace tous les émojis « standard », ce que je ne veux pas perdre.

Tout ce dont j’ai vraiment besoin, c’est que le téléversement de dossiers d’émojis personnalisés fonctionne comme il le fait actuellement pour les émojis personnalisés individuels. Alternativement, s’il n’y avait pas de limite au nombre de téléversements autorisés (peut-être que la tâche de téléversement pourrait être envoyée à SideKiq pour être effectuée de manière asynchrone, et envoyer un message privé aux administrateurs une fois terminée, comme pour les invitations groupées)

J’ai étudié l’utilisation de l’API REST de Discourse pour cela, mais les émojis personnalisés ne sont pas exposés via l’API REST. Les téléversements sont exposés dans l’API, et j’ai réussi à faire fonctionner cela, mais même en utilisant le type custom_emoji pour un téléversement, il n’apparaît pas dans la liste.

Je me demande simplement quelle serait la meilleure voie à suivre selon la communauté :

• Une tâche Rake qui automatise la création groupée d’émojis personnalisés ?
• Le faire dans la console Rails ?
• Modifier les limites de téléversement de l’interface utilisateur d’administration pour autoriser plusieurs centaines de téléversements en une seule fois ?
• Ajouter le « téléversement de dossiers » à l’interface utilisateur d’administration ?
• Faire des émojis personnalisés quelque chose que je pourrais déployer en tant que composant de thème que je pourrais ajouter à partir d’une URL GitHub ? (J’aime la simplicité de celui-ci)
• Autoriser plusieurs URL d’émojis externes afin que je puisse avoir un ensemble d’émojis ET mes émojis personnalisés (peut-être servis à partir d’un dépôt de pages GitHub)
• Bricoler un seul dépôt « émojis et émojis personnalisés » auquel je peux accéder via une URL ?

OU - existe-t-il une autre façon de faire en sorte que toutes les icônes FontAwesome que Discourse utilise dans son interface utilisateur soient disponibles dans le compositeur en utilisant la syntaxe :icon-name: ? En réalité, la majorité de ce que je veux faire est lié à cela. Un paramètre de site qui permettrait aux icônes de l’interface utilisateur d’être disponibles dans le compositeur me permettrait d’atteindre 90 % de mon objectif.

[JammyDodger]

@pacharanero

En réalité, la majorité de ce que je veux faire est lié à cela. Un paramètre de site qui rendrait les icônes de l’interface utilisateur disponibles dans le compositeur me permettrait d’avancer à 90 %.

J’ai utilisé le composant de thème Discourse Icon pour un cas d’utilisation similaire, si cela peut aider ?

Exemple du sujet :

Ceci est l'icône [wrap=icon id=far-square][/wrap] et l'icône [wrap=icon id=pencil][/wrap].

Ceci est l’icône et l’icône .

[pacharanero (Marcus Baw)]

Merci @JammyDodger, c’est utile et c’est certainement une option que j’envisagerais, même si l’UX de la syntaxe [wrap=icon id=icon-name][/wrap] n’est pas aussi agréable que :icon-name:.

Un inconvénient de l’approche Discourse Icon est que je dois ajouter manuellement une liste de toutes les icônes que je veux utiliser dans le paramètre du site svg icon subset (sous-ensemble d’icônes SVG). Mais au moins, cela peut être fait en une seule fois en copiant-collant à partir d’une liste dans un fichier texte.

[Moin]

@pacharanero

expliquer les icônes de l’interface utilisateur de Discourse aux utilisateurs

D’après votre description, je ne m’attendais pas à ce que vous ayez à ajouter autant. Le réglage consiste à ajouter plus d’icônes. Toutes les icônes utilisées sur le forum sont déjà disponibles.

[pacharanero (Marcus Baw)]

@Moin

Toutes les icônes utilisées dans le forum sont déjà disponibles.

Où sont-elles disponibles ? Je m’en réjouis si c’est le cas. Mais je n’arrive pas à y accéder avec la syntaxe du type :icon-name:.

Je veux juste pouvoir dire facilement aux gens, par exemple, qu’ils utilisent le bouton :calendar-days: dans la barre d’outils du Compositeur pour ajouter une date et une heure conscientes du fuseau horaire à un message. Mais lorsque je recherche les émojis/icônes inclus, la chose la plus proche que je puisse obtenir est .

[Moin]

Ils fonctionnent avec la syntaxe wrap et l’icône Discourse sans les ajouter à svg icon subset.

La réponse faisait référence à votre commentaire selon lequel il est désavantageux de devoir ajouter toutes les icônes.

@pacharanero

Un inconvénient de l’approche Discourse Icon est que je dois ajouter manuellement une liste de toutes les icônes que je veux utiliser dans le paramètre du site svg icon subset.

---

Peut-être que cela fonctionnerait d’utiliser watched-words pour remplacer :calendar-days: par [wrap=icon id=calendar-days][/wrap]

[pacharanero (Marcus Baw)]

@Moin

Ils fonctionnent avec la syntaxe wrap et l’icône Discourse sans les ajouter à svg icon subset.

La réponse faisait référence à votre commentaire selon lequel c’est un inconvénient de devoir ajouter toutes les icônes.

Ah OK, merci et désolé pour mon incompréhension. C’est génial. Donc je peux utiliser n’importe où en utilisant la syntaxe wrap ! Chaque jour est un jour d’école Discourse !

La seule partie manquante est la possibilité de rechercher facilement le nom Discourse de l’icône dont j’ai besoin, mais je suppose que je peux toujours utiliser l’inspecteur du navigateur pour trouver le nom d-icon- et l’ajuster en conséquence. Ou le site web FontAwesome.

Merci @Moin

[Roi]

Quelque chose a changé depuis ma dernière mise à jour de Discourse (il y a quelques jours).

Au lieu de

cela ressemble maintenant à

Lorsque je vérifie le CSS, il y a un élément element.style (donc un style dans le HTML pour cet emoji) aspect-ratio: 20 / 20; et si je le désactive, l’emoji ressemble à ce qu’il devrait être.

Que faire ?

(Au fait, “Choker” n’a rien à voir. Il s’agit de plongée sous-marine et non d’autres choses et il est juste là pour voir la taille du texte dans le message.)

[Steven]

Vous pourriez ajouter ces lignes CSS dans vos thèmes

.emoji-custom {
    aspect-ratio: unset !important;
}

[Roi]

Super merci, ça a fonctionné !

Puis-je demander :

Quel est le but de la définition du rapport d’aspect dans la dernière version ?

Et pourquoi ce CSS, ainsi que le code mentionné ci-dessus, n’est-il pas inclus dans le cœur de Discourse ? Est-ce que cela casse autre chose ou est-ce que trop peu de gens utilisent des emojis/smileys personnalisés ?

[Steven]

Je ne sais vraiment pas, je suppose que c’est lié à cette discussion

Add lazy loading for emojis

Profile pictures and image elements in posts get lazyloaded by having the attribute loading="lazy" set. Emojis are missing out on this. <img src="https://emoji.discourse-cdn.com/twitter/sloth.png?v=12" title="" class="emoji" alt=""> I could not find the location in the sources where the emoji tags are generated. Are emojis “baked” into the posts?