Questa guida spiega come personalizzare le emoji sul tuo sito Discourse tramite set di emoji selezionabili, caricamento di nuove emoji, configurazione delle impostazioni del sito e regolazione delle dimensioni delle emoji.
Livello utente richiesto: Amministratore
Selezione di un set di emoji
Discourse supporta attualmente cinque set di emoji:
- Fluent UI
- Noto
- OpenMoji
- Twemoji
- Standard (Unicode)
Per un’anteprima di come appaiono i diversi set, puoi consultare questo confronto tra set di emoji. Puoi configurare l’impostazione del sito emoji_set in /admin/config/emoji/settings insieme ad altre impostazioni relative alle emoji.
Aggiunta di emoji personalizzate
Per aggiungere emoji personalizzate:
-
Vai su Admin → Aspetto → Emoji in
/admin/config/emoji -
Clicca sul pulsante Aggiungi emoji per nominare, classificare e caricare l’immagine della tua emoji
Se hai piĂą file di emoji da caricare, puoi selezionare fino a 10 file immagine nel selettore file per il caricamento in blocco. In questo caso, i nomi dei file immagine verranno utilizzati come nomi delle emoji.
Importazione in blocco di emoji personalizzate
Puoi importare fino a 1000 emoji tramite un unico file ZIP con un manifesto emojis.csv. Il file CSV deve avere le seguenti colonne con intestazioni: name, group, filename.
name,group,filename
emoji_a,group_name,image.png
Il processo di importazione si basa interamente sul manifesto. Se un file o una riga manca, verrà ignorato. Il campo group può essere lasciato vuoto, nel qual caso l’emoji personalizzata verrà aggiunta al gruppo default.
Per importare:
-
Vai su Admin → Aspetto → Emoji in
/admin/config/emoji -
Clicca sul pulsante Importa e seleziona il file ZIP contenente le tue emoji.
-
Anteprima dell’importazione e conferma delle modifiche. Puoi risolvere eventuali conflitti qui selezionando quale emoji mantenere. I conflitti possono verificarsi se esiste già un’emoji esistente con lo stesso nome (e gruppo/immagine diverso). Per completare l’importazione, clicca su Conferma importazione.
Esportazione in blocco di emoji personalizzate
Le emoji personalizzate possono essere esportate in un unico file ZIP. Il file ZIP risultante conterrà un manifesto emojis.csv, pronto per essere importato in qualsiasi sito Discourse senza modifiche. Questo contiene l’immagine, il nome e il gruppo di ogni emoji.
Per esportare, clicca sul pulsante Seleziona per esportare e seleziona tutte le emoji che stai esportando. Quando sei pronto, clicca sul pulsante Esporta e verrĂ scaricato un file ZIP.
Fissaggio delle emoji in cima al selettore
Puoi fissare qualsiasi gruppo di emoji in cima al selettore emoji. Accedi all’impostazione emoji_picker_pinned_groups tramite Admin → Aspetto → Emoji → Impostazioni in /admin/config/emoji/settings. Inserisci il nome del gruppo di emoji da fissare in cima al selettore.
Sia i gruppi di emoji personalizzati che quelli regolari possono essere fissati in cima. Ad esempio, inserendo flags il gruppo di emoji delle bandiere verrĂ spostato in cima, sopra le faccine.
Nomi dei gruppi di emoji predefiniti:
smileys_&_emotionpeople_&_bodyanimals_&_naturefood_&_drinktravel_&_placesactivitiesobjectssymbolsflags
Impostazioni emoji
Puoi accedere alle impostazioni delle emoji in /admin/config/emoji/settings per personalizzare il comportamento delle emoji sul tuo sito.
enable_emoji- Abilita la visualizzazione e l’uso delle emoji nella tua istanza Discourse. Se disabilitato, le emoji non verranno renderizzate e gli utenti non potranno accedervi o utilizzarle nei campi di testo.emoji_set- Seleziona lo 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 dell’argomento (predefinito: 1). Se il valore impostato è zero, impedisce l’uso di qualsiasi emoji nei titoli degli argomenti.enable_emoji_shortcuts- I testi di faccine 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 prima).emoji_deny_list- Queste emoji non saranno disponibili per l’uso nei menu o negli shortcode.emoji_picker_pinned_groups- Questi gruppi di emoji sono fissati in cima al selettore emoji.external_emoji_url- URL di un servizio esterno per le immagini delle emoji. Lascia vuoto per utilizzare il predefinito.discourse_reactions_enabled_reactions- Definisce un elenco di reazioni abilitate, è consentita qualsiasi emoji qui. Reazioni predefinite: +1, laughing, open_mouth, clap, confetti_ball e hugs.discourse_reactions_excluded_from_like- Reazioni che non contano come un “Mi piace”. Qualsiasi reazione non presente in questo elenco conterà come “Mi piace” per badge, report e altri scopi.discourse_reactions_allow_any_emoji- Se abilitato, aggiungerà un pulsante che consente agli utenti di selezionare qualsiasi emoji nel selettore delle reazioni. Ai membri sarà consentito scegliere qualsiasi emoji, incluse quelle personalizzate, per le reazioni. Per limitare le reazioni disponibili, utilizza l’impostazione del sitoemoji_deny_list.
Ridimensionamento di emoji personalizzate
Per impostazione predefinita, tutte le emoji vengono ridimensionate tramite CSS a 20x20, ma questo 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 la dimensione di una specifica emoji, usa:
img.emoji[title=":youremoji:"] {
height: XXpx;
width: YYpx;
}
Per il ridimensionamento delle 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;
}