Configura emoji personalizzati

[Discourse]

Questa guida spiega come configurare le emoji personalizzate sul tuo sito Discourse.

Livello utente richiesto: Amministratore

Configurazione delle emoji personalizzate

Vuoi cambiare le emoji per il tuo sito Discourse? Vediamo come configurare le emoji personalizzate per il tuo sito Discourse, inclusa la selezione dei set di emoji, il caricamento di nuove emoji e la regolazione delle dimensioni delle emoji.

Selezione di un set di emoji

Discourse è dotato di sette diversi set di emoji:

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

Puoi selezionare un set di emoji su /admin/config/emoji/settings?filter=emoji%20set insieme ad altre impostazioni relative alle emoji.

Aggiunta di emoji personalizzate

Per aggiungere emoji personalizzate:

1. Vai su: Amministrazione di Discourse - Config - Emoji su /admin/config/emoji
2. Puoi:
   • Inserire un nome e fare clic su Aggiungi emoji per caricare una foto come emoji
   • Trascina e rilascia fino a 10 file nel campo Nome per il caricamento in blocco; i nomi dei file verranno utilizzati come nomi delle emoji.

Impostazioni emoji

Puoi accedere alle impostazioni delle emoji su /admin/config/emoji/settings per personalizzare il comportamento delle emoji sul tuo sito.

• enable_emoji - Abilita la visualizzazione e l’uso delle emoji nell’istanza di Discourse. Se disabilitato, le emoji non verranno renderizzate e gli utenti non potranno accedervi o utilizzarle nei campi di testo.
• emoji_set - Seleziona il tuo stile di emoji preferito. Diversi set di emoji possono fornire aspetti unici alle emoji visualizzate sul sito.
• max_emojis_in_title - Numero massimo di emoji consentite nel titolo di un argomento (predefinito: 1). Se il valore impostato è zero, impedisce l’uso di qualsiasi emoji nei titoli degli argomenti.
• enable_emoji_shortcuts - I testi smiley comuni come :) :p :( verranno convertiti in emoji.
• emoji_autocomplete_min_chars - Numero minimo di caratteri richiesti per attivare il popup di completamento automatico delle emoji (predefinito: 0).
• enable_inline_emoji_translation - Abilita la traduzione per le emoji inline (senza spazi o punteggiatura precedenti).
• emoji_deny_list - Queste emoji non saranno disponibili per l’uso nei menu o negli shortcode.
• external_emoji_url - URL del servizio esterno per le immagini emoji (predefinito: https://emoji.discourse-cdn.com). Lasciare vuoto per disabilitare.
• discourse_reactions_enabled_reactions - Definisce un elenco di reazioni abilitate, qualsiasi emoji è consentita qui. Le reazioni predefinite includono: cuore, risata, pianto, testa che esplode, applauso, palla di coriandoli, abbracci, bacio dello chef, 100, +1, razzo, occhi sbarrati, discourse e occhi.
• discourse_reactions_excluded_from_like - Reazioni che non contano come Mi piace. Qualsiasi reazione non presente in questo elenco conterà come Mi piace per badge, segnalazioni e altri scopi.
• discourse_reactions_allow_any_emoji - Se abilitato, aggiungerà un pulsante che consente agli utenti di selezionare qualsiasi emoji nel selettore di reazioni. Ai membri sarà consentito scegliere qualsiasi emoji, incluse le emoji personalizzate, per le reazioni. Per limitare le reazioni disponibili, utilizzare l’impostazione del sito emoji_deny_list.

Ridimensionamento delle emoji personalizzate

Per impostazione predefinita, tutte le emoji vengono ridimensionate tramite CSS a 20x20, ma ciò può essere sovrascritto con CSS personalizzato. Per mantenere il corretto rapporto di aspetto e la dimensione nativa nei post, aggiungi il seguente CSS:

/* Rendi le emoji di dimensioni normali (non forzare il quadrato) */
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;
}

Per personalizzare le dimensioni di una specifica emoji, usa:

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

Per ridimensionare le emoji nei messaggi di chat e nello stato utente nelle chat:

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

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