Configurer un emoji personnalisé

[Discourse]

This guide explains how to configure custom emojis on your Discourse site.

Required user level: Administrator

Configuring custom emoji

Want to change emoji for your Discourse site? Let’s take a look at how to configure custom emoji for your Discourse site, including selecting emoji sets, uploading new emoji, and adjusting emoji sizes.

Selecting an emoji set

Discourse comes with seven different emoji sets:

• Apple/International style
• Google style
• Twitter style
• Emoji One style
• Win10 style
• Google Classic
• Facebook Messenger

You can select an emoji set at /admin/config/emoji/settings?filter=emoji%20set along with other emoji-related settings.

Adding custom emoji

To add custom emoji:

1. Navigate to: Discourse Admin - Config - Emoji at /admin/config/emoji
2. You can:
   • Enter a name and click Add emoji to upload a photo as an emoji
   • Drag and drop up to 10 files into the Name field to bulk upload; filenames will be used as emoji names.

Resizing custom emoji

By default, all emoji are resized via CSS to 20x20, but this can be overridden with custom CSS. To maintain the correct aspect ratio and native size in posts, add the following CSS:

/* Make emoji normal size (don't force square) */
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;
}

To customize a specific emoji’s size, use:

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

For resizing emoji in chat messages and user status in chats:

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

Last edited by @martin 2025-01-23T05:07:38Z

Check document

Perform check on document:

[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?