הגדר אימוג'י מותאם אישית

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

I noticed that the custom emojis/smileys show 20x20 in chat messages and in the user status in chats. I solved it that way:

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

span.user-status-message img.emoji[src*="uploads"] { /* User status in chat */
    width: auto;
    height: auto;
}

Would you do it that way, too? If yes, it might be useful to add it to this wiki post above. If not, I am happy to optimize my CSS code.

[Vladislav_Jandric]

I customized new Emoji, but I can t it find among another Emojis.

[ondrej]

Have you scrolled all the way down in the emoji picker? That’s where your custom emoji groups live.

[Moin]

@Discourse

Discourse comes with seven different emoji sets:

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

Those have changed:

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

ניסיתי כמה אפשרויות שונות להעלאה המונית של אימוג’י מותאם אישית, אבל לא הצלחתי למצוא פתרון אז אני שואל כאן מה האפשרות הטובה ביותר לעתיד.

יש לי אוסף קטן של אימוג’י מותאם אישית שאני אוהב להעלות לכל הדיסקורסים שלי. חלקם הם אייקוני FontAwesome, שאני אוהב שיהיו זמינים כ-:icon-name: בפוסטים של מלחין כדי שאוכל להסביר אייקוני ממשק משתמש של Discourse למשתמשים. אחרים הם סתם בשביל הכיף כמו דגל יורקשייר. יש לי אותם בתיקיות (ואפשר גם שיהיו באינטרנט במאגר GitHub אני מניח).

הייתי רוצה להיות מסוגל להעלות את כל התיקיות האלה, בבת אחת, לממשק המשתמש של אימוג’י מותאם אישית. כרגע המגבלה על העלאות מכבדת את ההגדרה של simultaneous_uploads (מספר מקסימלי של קבצים שניתן לגרור ולשחרר במלחין) בהגדרות האתר, אשר מוגבלת לערך תקרה של 20 (שגיאה: “simultaneous_uploads: הערך חייב להיות בין 0 ל-20.” אם תנסה להגדיל אותו יותר, אפילו באופן זמני)

חקרתי בעניין את הגדרת האימוג’י האחרת external-emoji-url, אשר מאפשרת להגדיר URL עבור סט אימוג’י חיצוני, אבל לצערי זה מחליף את כל האימוג’י ה’סטנדרטיים’, שאני לא רוצה לאבד.

כל מה שאני באמת צריך זה שהעלאת תיקיות של אימוג’י מותאם אישית תעבוד כמו שזה עובד כרגע עבור אימוג’י מותאם אישית בודד. לחלופין, אם לא הייתה מגבלה על מספר ההעלאות המותרות (אולי משימת ההעלאה יכולה להישלח ל-SideKiq כדי שתתבצע באופן אסינכרוני, ולשלוח PM למנהלים כשהיא תסתיים, כמו בהזמנות המוניות)

בדקתי את השימוש ב-Discourse REST API עבור זה, אבל אימוג’י מותאם אישית לא נחשף דרך REST API. העלאות נחשפות ב-API, וזה עבד לי, אבל גם אם משתמשים בסוג custom_emoji להעלאה, זה לא מופיע ברשימה.

אני רק תוהה מה הקהילה חושבת שתהיה הדרך הטובה ביותר להתקדם:

• משימת Rake שמבצעת אוטומציה של יצירת אימוג’י מותאם אישית בכמות גדולה?
• לעשות את זה במסוף Rails?
• לשנות את מגבלות ההעלאה של ממשק המשתמש למנהל כדי לאפשר כמה מאות העלאות בבת אחת?
• להוסיף ‘העלאת תיקייה’ לממשק המשתמש למנהל?
• להפוך אימוג’י מותאם אישית למשהו שאני יכול לפרוס כרכיב ערכת נושא שאני יכול להוסיף מכתובת URL של GitHub? (אני אוהב את הפשטות של זה)
• לאפשר כתובות URL מרובות של אימוג’י חיצוניים כדי שאוכל לקבל סט אימוג’י וגם את האימוג’י המותאם אישית שלי (אולי יוגש ממאגר דפי GitHub)
• לפרוץ יחד מאגר יחיד של ‘אימוג’י ואימוג’י מותאם אישית’ שאני יכול לפנות אליו באמצעות URL?

או - האם יש דרך אחרת לגרום לכל אייקוני FontAwesome ש-Discourse משתמש בהם בממשק המשתמש שלו להיות זמינים במלחין באמצעות תחביר :icon-name:? באמת שרוב מה שאני רוצה לעשות קשור לזה. הגדרת אתר המאפשרת לאייקוני ממשק משתמש להיות זמינים במלחין תביא אותי ל-90% ממה שאני צריך.

[JammyDodger]

@pacharanero

Really the majority of what I want to do is related to this. A site setting that enabled UI icons to be available in the composer would get me 90% there.

I have used the Discourse Icon theme component for a similar use case, if that’s any help?

Example from the topic:

This is the [wrap=icon id=far-square][/wrap] icon and the [wrap=icon id=pencil][/wrap] icon.

This is the icon and the icon.

[pacharanero (Marcus Baw)]

תודה @JammyDodger זה מועיל ובהחלט אופציה שאשקול, למרות שה-UX של תחביר [wrap=icon id=icon-name][/wrap] לא נעים כמו :icon-name:.

חיסרון בגישת Discourse Icon הוא שאני צריך להוסיף ידנית רשימה של כל הסמלים שאני רוצה להשתמש בהם בהגדרת האתר svg icon subset. אבל לפחות אפשר לעשות את זה בבת אחת על ידי העתקה והדבקה מרשימה בקובץ טקסט.

[Moin]

@pacharanero

explain Discourse UI icons to users

From your description, I wouldn’t expect you to have to add that much. The setting is to add more icons. All icons that are used in the forum are already available.

[pacharanero (Marcus Baw)]

@Moin

All icons that are used in the forum are already available.

Where are they available? I welcome it, if they are. But I can’t seem to access them with the :icon-name: type syntax.

I just want to easily be able to tell people, for example, that to add a timezone-aware datetime to a post they use the :calendar-days: button in the Composer toolbar. But when I search the included emoji/icons the nearest thing I can get is .

[Moin]

They work with the wrap syntax and Discourse icon without adding them to svg icon subset.

The answer referred to your comment that it is a disadvantage that you have to add all the icons.

@pacharanero

A downside of the Discourse Icon approach is that I have to manually add a list of all the icons I want to use in the svg icon subset site setting.

---

Maybe it would work to use watched-words to replace :calendar-days: with [wrap=icon id=calendar-days][/wrap]

[pacharanero (Marcus Baw)]

@Moin

They work with the wrap syntax and Discourse icon without adding them to svg icon subset.

The answer referred to your comment that it is a disadvantage that you have to add all the icons.

Ah OK, thanks and apologies for my misunderstanding. This is awesome. So I can use anywhere using wrap syntax! Every day is a Discourse school day!

The only missing part is the ability to easily search for the Discourse name of the icon I need, but I guess I can always use the browser inspector to find the d-icon- name and adjust accordingly. Or the FontAwesome website.

Thanks @Moin

[Roi]

Something changed since I last updated Discourse (some days ago).

Instead of

it now looks

When I check CSS there is a element.style (so a style inside HTML for this emoji) aspect-ratio: 20 / 20; and if I disable it, the emoji looks like it should.

What to do?

(Btw, “Choker” doesn’t have anything to say. It is about scuba diving and not other things and just there to see the size of the text in the post.)

[Steven]

You could adding this css lines in your themes

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

It will override the aspect-ratio: 20/20

[Roi]

Great thank you, that did work!

May I ask:

What is the purpose of setting the aspect ratio in the latest release?

And why isn’t this CSS, also the code mentioned above, not included in core Discourse? Is this breaking something else or are too less people using custom emojis/smileys?

[Steven]

I honestly don’t know, I guess it’s related to this 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?