Configura emoji personalizzati

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

Ho notato che le emoji/faccine personalizzate vengono visualizzate 20x20 nei messaggi di chat e nello stato dell’utente nelle chat. L’ho risolto in questo modo:

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

span.user-status-message img.emoji[src*="uploads"] { /* Stato dell'utente nella chat */
    width: auto;
    height: auto;
}

Faresti lo stesso? Se sì, potrebbe essere utile aggiungerlo a questo post del wiki sopra. Se no, sono felice di ottimizzare il mio codice CSS.

[Vladislav_Jandric]

Ho personalizzato nuove Emoji, ma non riesco a trovarle tra le altre Emoji.

[ondrej]

Hai fatto scorrere fino in fondo nel selettore di emoji? È lì che si trovano i tuoi gruppi di emoji personalizzati.

[Moin]

@Discourse

Discourse include sette diverse serie di emoji:

• Stile Apple/Internazionale
• Stile Google
• Stile Twitter
• Stile Emoji One
• Stile Win10
• Google Classico
• Facebook Messenger

Quelli sono cambiati:

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

Ho provato diverse opzioni per il caricamento massivo di emoji personalizzate, ma non ho trovato nulla di valido, quindi chiedo qui quale sarebbe l’opzione migliore per il futuro.

Ho una piccola collezione di emoji personalizzate che mi piace caricare in tutti i miei Discourse. Alcune sono icone di FontAwesome, che mi piace avere disponibili come :icon-name: nei post del compositore in modo da poter spiegare le icone dell’interfaccia utente di Discourse agli utenti. Altre sono solo per divertimento, come una bandiera dello Yorkshire. Le ho in cartelle (e potrebbero facilmente essere online in un repository GitHub, suppongo).

Vorrei poter caricare queste intere cartelle, in una sola volta, nell’interfaccia utente delle emoji personalizzate. Al momento, il limite ai caricamenti rispetta l’impostazione di simultaneous_uploads (‘Numero massimo di file che possono essere trascinati e rilasciati nel compositore’), che è limitato a un valore massimo di 20 (Errore: “simultaneous_uploads: Il valore deve essere compreso tra 0 e 20.” se si tenta di aumentarlo, anche temporaneamente).

Ho esaminato con interesse l’altra impostazione delle emoji external-emoji-url, che consente di impostare un URL per un set di emoji esterno, ma purtroppo questo sostituisce tutte le emoji ‘standard’, che non voglio perdere.

Tutto ciò di cui ho veramente bisogno è che il caricamento di cartelle di emoji personalizzate funzioni come funziona attualmente per le singole emoji personalizzate. In alternativa, se non ci fosse alcun limite al numero di caricamenti consentiti (forse il lavoro di caricamento potrebbe essere inviato a SideKiq per essere eseguito in modo asincrono e inviare un PM agli amministratori quando è terminato, come per gli inviti di massa).

Ho esaminato l’uso dell’API REST di Discourse per questo, ma le emoji personalizzate non sono esposte tramite l’API REST. I caricamenti sono esposti nell’API e questo funzionava, ma anche utilizzando il tipo custom_emoji per un caricamento, non appare nell’elenco.

Mi chiedevo quale la community pensi che sarebbe il modo migliore per procedere:

• Attività Rake che automatizza la creazione di emoji personalizzate in blocco?
• Farlo nella console Rails?
• Modificare i limiti di caricamento dell’interfaccia utente di amministrazione per consentire diverse centinaia di caricamenti in una sola volta?
• Aggiungere il ‘caricamento di cartelle’ all’interfaccia utente di amministrazione?
• Rendere le emoji personalizzate qualcosa che potrei distribuire come componente del tema che potrei aggiungere dall’URL di GitHub? (Mi piace la semplicità di questo)
• Consentire più URL di emoji esterni in modo da poter avere un set di emoji E le mie emoji personalizzate (forse servite da un repository di pagine GitHub)
• Creare un singolo repository ‘emoji e emoji personalizzate’ che posso indirizzare tramite URL?

OPPURE - c’è un altro modo per ottenere tutte le icone FontAwesome che Discourse utilizza nella sua interfaccia utente per essere disponibili nel compositore utilizzando la sintassi :icon-name:? In realtà, la maggior parte di ciò che voglio fare è correlata a questo. Un’impostazione del sito che consentisse di rendere disponibili le icone dell’interfaccia utente nel compositore mi porterebbe al 90% del risultato.

[JammyDodger]

@pacharanero

In realtà, la maggior parte di ciò che voglio fare è correlato a questo. Una impostazione del sito che renda disponibili le icone dell’interfaccia utente nel composer mi porterebbe al 90%.

Ho utilizzato il componente del tema Discourse Icon per un caso d’uso simile, se può essere d’aiuto?

Esempio dall’argomento:

Questa è l'icona [wrap=icon id=far-square][/wrap] e l'icona [wrap=icon id=pencil][/wrap].

Questa è l’icona e l’icona .

[pacharanero (Marcus Baw)]

Grazie @JammyDodger, è utile e sicuramente un’opzione che prenderei in considerazione, anche se la UX della sintassi [wrap=icon id=icon-name][/wrap] non è bella come :icon-name:.

Un aspetto negativo dell’approccio Discourse Icon è che devo aggiungere manualmente un elenco di tutte le icone che voglio usare nell’impostazione del sito svg icon subset. Ma almeno questo può essere fatto in una sola volta copiando e incollando da un elenco in un file di testo.

[Moin]

[citazione=“pacharanero, post:34, topic:23365”]
spiega le icone dell’interfaccia utente di Discourse agli utenti
[/citazione]

In base alla tua descrizione, non mi aspetterei che tu debba aggiungere così tanto. L’impostazione serve per aggiungere più icone. Tutte le icone utilizzate nel forum sono già disponibili.

[pacharanero (Marcus Baw)]

@Moin

Tutte le icone utilizzate nel forum sono già disponibili.

Dove sono disponibili? Lo accolgo con favore, se lo sono. Ma non riesco ad accedervi con la sintassi del tipo :nome-icona:.

Voglio solo poter dire facilmente alle persone, ad esempio, che per aggiungere una data/ora consapevole del fuso orario a un post utilizzano il pulsante :calendar-days: nella barra degli strumenti del Composer. Ma quando cerco le emoji/icone incluse, l’unica cosa che riesco a trovare è .

[Moin]

Lavorano con la sintassi wrap e l’icona Discourse senza aggiungerle a svg icon subset.

La risposta si riferiva al tuo commento secondo cui è uno svantaggio dover aggiungere tutte le icone.

@pacharanero

Uno svantaggio dell’approccio Discourse Icon è che devo aggiungere manualmente un elenco di tutte le icone che voglio usare nell’impostazione del sito svg icon subset.

---

Forse funzionerebbe usare watched-words per sostituire :calendar-days: con [wrap=icon id=calendar-days][/wrap]

[pacharanero (Marcus Baw)]

@Moin

Funzionano con la sintassi wrap e l’icona di Discourse senza aggiungerle a svg icon subset.

La risposta si riferiva al tuo commento secondo cui è uno svantaggio dover aggiungere tutte le icone.

Ah OK, grazie e scusa per il mio malinteso. Questo è fantastico. Quindi posso usare ovunque usando la sintassi wrap! Ogni giorno è un giorno di scuola di Discourse!

L’unica parte mancante è la possibilità di cercare facilmente il nome di Discourse dell’icona di cui ho bisogno, ma immagino di poter sempre usare l’ispettore del browser per trovare il nome d-icon- e adattarlo di conseguenza. O il sito web di FontAwesome.

Grazie @Moin

[Roi]

Qualcosa è cambiato dall’ultima volta che ho aggiornato Discourse (alcuni giorni fa).

Invece di

ora sembra

Quando controllo il CSS, c’è un elemento element.style (quindi uno stile all’interno dell’HTML per questa emoji) aspect-ratio: 20 / 20; e se lo disabilito, l’emoji appare come dovrebbe.

Cosa fare?

(A proposito, “Choker” non ha nulla da dire. Riguarda le immersioni subacquee e non altre cose ed è lì solo per vedere la dimensione del testo nel post.)

[Steven]

Potresti aggiungere queste righe CSS nei tuoi temi

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

[Roi]

Ottimo grazie, ha funzionato!

Posso chiedere:

Qual è lo scopo dell’impostazione del rapporto d’aspetto nell’ultima versione?

E perché questo CSS, anche il codice menzionato sopra, non è incluso nel core di Discourse? Sta rompendo qualcos’altro o troppe poche persone usano emoji/smiley personalizzati?

[Steven]

Onestamente non lo so, immagino sia correlato a questa discussione

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?