Benutzerdefiniertes Emoji konfigurieren

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

Mir ist aufgefallen, dass die benutzerdefinierten Emojis/Smileys in Chatnachrichten und im Benutzernamen im Chat 20x20 groß sind. Ich habe es so gelöst:

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

span.user-status-message img.emoji[src*="uploads"] { /* Benutzerstatus im Chat */
    width: auto;
    height: auto;
}

Würden Sie es auch so machen? Wenn ja, wäre es vielleicht nützlich, es in diesen Wiki-Beitrag oben aufzunehmen. Wenn nicht, optimiere ich gerne meinen CSS-Code.

[Vladislav_Jandric]

Ich habe neue Emoji angepasst, aber ich kann sie nicht unter den anderen Emoji finden.

[ondrej]

Haben Sie im Emoji-Auswahlfenster ganz nach unten gescrollt? Dort befinden sich Ihre benutzerdefinierten Emoji-Gruppen.

[Moin]

@Discourse

Discourse wird mit sieben verschiedenen Emoji-Sets geliefert:

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

Diese haben sich geändert:

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)]

Ich habe verschiedene Optionen für den Massen-Upload von benutzerdefinierten Emojis ausprobiert, bin aber nicht fündig geworden, daher frage ich hier, wie die beste zukünftige Option aussehen könnte.

Ich habe eine kleine Sammlung von benutzerdefinierten Emojis, die ich gerne in alle meine Discourses hochladen möchte. Einige sind FontAwesome-Symbole, die ich gerne als :icon-name: in Composer-Posts verfügbar hätte, damit ich Benutzern die UI-Symbole von Discourse erklären kann. Andere dienen nur zum Spaß, wie eine Yorkshire-Flagge. Ich habe sie in Ordnern (und sie könnten auch online in einem GitHub-Repository sein, nehme ich an).

Ich möchte diese kompletten Ordner auf einmal in die Custom Emoji UI hochladen können. Derzeit respektiert die Beschränkung für Uploads die Einstellung von simultaneous_uploads (‘Maximale Anzahl von Dateien, die in den Composer gezogen werden können’) in den Site-Einstellungen, die auf einen Höchstwert von 20 begrenzt ist (Fehler: “simultaneous_uploads: Value must be between 0 and 20.”, wenn Sie versuchen, ihn höher zu setzen, auch vorübergehend).

Ich habe mit Interesse die andere Emoji-Einstellung external-emoji-url untersucht, die es ermöglicht, eine URL für ein externes Emoji-Set festzulegen, aber leider ersetzt dies alle ‘Standard’-Emojis, die ich nicht verlieren möchte.

Alles, was ich wirklich brauche, ist, dass der Ordner-Upload von benutzerdefinierten Emojis so funktioniert, wie er derzeit für einzelne benutzerdefinierte Emojis funktioniert. Alternativ, wenn es keine Beschränkung der Anzahl der erlaubten Uploads gäbe (vielleicht könnte der Upload-Job an SideKiq gesendet werden, um asynchron erledigt zu werden, und PM-Admins, wenn er fertig ist, wie bei Masseneinladungen)

Ich habe die Verwendung der Discourse REST API dafür untersucht, aber Custom Emojis werden nicht über die REST API bereitgestellt. Uploads werden in der API bereitgestellt, und ich hatte dies auch zum Laufen gebracht, aber selbst wenn ich den Typ custom_emoji für einen Upload verwende, erscheint er nicht in der Liste.

Ich frage mich nur, was die Community für den besten Weg hält:

• Rake-Task, der die Massenerstellung von benutzerdefinierten Emojis automatisiert?
• Es in der Rails-Konsole machen?
• Die Admin-UI-Upload-Beschränkungen ändern, um mehrere hundert Uploads in einem Rutsch zu ermöglichen?
• ‘Ordner-Upload’ zur Admin-UI hinzufügen?
• Benutzerdefinierte Emojis zu einer Theme-Komponente machen, die ich über eine GitHub-URL hinzufügen kann? (Ich mag die Einfachheit dieser Option)
• Mehrere externe Emoji-URLs zulassen, damit ich ein Emoji-Set UND meine benutzerdefinierten Emojis haben kann (vielleicht von einem GitHub-Pages-Repository bereitgestellt)
• Ein einzelnes ‘Emoji- und Custom-Emoji’-Repository zusammenbasteln, das ich per URL ansprechen kann?

ODER - gibt es eine andere Möglichkeit, alle FontAwesome-Symbole, die Discourse in seiner Benutzeroberfläche verwendet, im Composer mit der Syntax :icon-name: verfügbar zu machen? Eigentlich bezieht sich der Großteil dessen, was ich tun möchte, darauf. Eine Site-Einstellung, die es ermöglicht, UI-Symbole im Composer verfügbar zu machen, würde mich zu 90 % ans Ziel bringen.

[JammyDodger]

@pacharanero

Eigentlich bezieht sich das meiste, was ich tun möchte, darauf. Eine Website-Einstellung, die UI-Symbole im Composer verfügbar macht, würde mich zu 90 % dorthin bringen.

Ich habe die Theme-Komponente Discourse Icon für einen ähnlichen Anwendungsfall verwendet, falls das hilfreich ist?

Beispiel aus dem Thema:

Dies ist das [wrap=icon id=far-square][/wrap] Symbol und das [wrap=icon id=pencil][/wrap] Symbol.

Dies ist das Symbol und das Symbol.

[pacharanero (Marcus Baw)]

Danke @JammyDodger, das ist hilfreich und definitiv eine Option, die ich in Betracht ziehen würde, auch wenn die UX der [wrap=icon id=icon-name][/wrap]-Syntax nicht so schön ist wie :icon-name:.

Ein Nachteil des Discourse Icon-Ansatzes ist, dass ich manuell eine Liste aller Icons, die ich verwenden möchte, in der Site-Einstellung svg icon subset hinzufügen muss. Aber zumindest kann das auf einmal erledigt werden, indem man es aus einer Liste in einer Textdatei kopiert und einfügt.

[Moin]

[Zitat=“pacharanero, Beitrag:34, Thema:23365”]
Erkläre den Benutzern die Discourse UI-Symbole
[/Zitat]

Deiner Beschreibung nach würde ich nicht erwarten, dass du so viel hinzufügen musst. Die Einstellung dient dazu, weitere Symbole hinzuzufügen. Alle im Forum verwendeten Symbole sind bereits verfügbar.

[pacharanero (Marcus Baw)]

@Moin

Alle Icons, die im Forum verwendet werden, sind bereits verfügbar.

Wo sind sie verfügbar? Ich begrüße es, wenn sie es sind. Aber ich kann nicht auf sie mit der :icon-name: Syntax zugreifen.

Ich möchte einfach nur leicht in der Lage sein, den Leuten zu sagen, dass sie zum Beispiel den Button :calendar-days: in der Composer-Symbolleiste verwenden, um ein zeitsensitives Datum und eine Uhrzeit zu einem Beitrag hinzuzufügen. Aber wenn ich die enthaltenen Emoji/Icons durchsuche, ist das Nächstliegende, was ich bekommen kann, .

[Moin]

Sie arbeiten mit der Wrap-Syntax und dem Discourse-Icon, ohne sie zu svg icon subset hinzuzufügen.
Die Antwort bezog sich auf Ihren Kommentar, dass es ein Nachteil ist, dass Sie alle Icons hinzufügen müssen.

@pacharanero

Ein Nachteil des Discourse Icon-Ansatzes ist, dass ich manuell eine Liste aller Icons hinzufügen muss, die ich verwenden möchte, in der svg icon subset Site-Einstellung.

---

Vielleicht würde es funktionieren, watched-words zu verwenden, um :calendar-days: durch [wrap=icon id=calendar-days][/wrap] zu ersetzen

[pacharanero (Marcus Baw)]

[Zitat=“Moin, Beitrag:39, Thema:23365”]
Sie funktionieren mit der Wrap-Syntax und dem Discourse-Icon, ohne sie zu svg icon subset hinzuzufügen.

Die Antwort bezog sich auf deinen Kommentar, dass es ein Nachteil ist, dass man alle Icons hinzufügen muss.
[/Zitat]

Ah OK, danke und Entschuldigung für mein Missverständnis. Das ist grossartig. Ich kann also überall mit der Wrap-Syntax verwenden! Jeder Tag ist ein Discourse-Schultag!

Der einzige fehlende Teil ist die Möglichkeit, einfach nach dem Discourse-Namen des Icons zu suchen, das ich benötige, aber ich denke, ich kann immer den Browser-Inspektor verwenden, um den d-icon- Namen zu finden und ihn entsprechend anzupassen. Oder die FontAwesome-Website.

Danke @Moin

[Roi]

Seit meinem letzten Discourse-Update (vor einigen Tagen) hat sich etwas geändert.

Anstatt

sieht es jetzt so aus

Wenn ich mir den CSS-Code ansehe, gibt es ein element.style (also einen Stil innerhalb des HTML für dieses Emoji) aspect-ratio: 20 / 20; und wenn ich es deaktiviere, sieht das Emoji so aus, wie es sollte.

Was ist zu tun?

(Übrigens hat „Choker“ nichts damit zu tun. Es geht ums Tauchen und nicht um andere Dinge und ist nur da, um die Größe des Textes in dem Beitrag zu sehen.)

[Steven]

Sie könnten diese CSS-Zeilen zu Ihren Themes hinzufügen

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

[Roi]

Großartig, danke, das hat funktioniert!

Darf ich fragen:

Was ist der Zweck der Einstellung des Seitenverhältnisses in der neuesten Version?

Und warum ist dies, CSS, auch der oben erwähnte Code, nicht im Kern von Discourse enthalten? Zerbricht dies etwas anderes oder verwenden zu wenige Leute benutzerdefinierte Emojis/Smileys?

[Steven]

Ich weiß es ehrlich gesagt nicht, ich schätze, es hängt mit dieser Diskussion zusammen

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?