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