Configurar emoji personalizado

[Discourse]

Este guia explica como configurar emojis personalizados no seu site Discourse.

Nível de usuário necessário: Administrador

Configurando emojis personalizados

Quer mudar o emoji do seu site Discourse? Vamos ver como configurar emojis personalizados para o seu site Discourse, incluindo a seleção de conjuntos de emojis, o upload de novos emojis e o ajuste dos tamanhos dos emojis.

Selecionando um conjunto de emoji

O Discourse vem com onze conjuntos de emojis diferentes:

• Estilo Apple/Internacional
• Facebook Messenger
• Fluent UI
• Estilo Google
• Google Clássico
• Noto
• OpenMoji
• Twemoji
• Estilo Twitter
• Padrão (Unicode)
• Estilo Win10

Você pode selecionar um conjunto de emoji em /admin/config/emoji/settings?filter=emoji%20set, juntamente com outras configurações relacionadas a emojis.

Adicionando emoji personalizado

Para adicionar emoji personalizado:

1. Navegue até: Discourse Admin - Config - Emoji em /admin/config/emoji
2. Você pode:
   • Inserir um nome e clicar em Adicionar emoji para fazer o upload de uma foto como um emoji
   • Arrastar e soltar até 10 arquivos no campo Nome para upload em lote; os nomes dos arquivos serão usados como nomes de emoji.

Configurações de emoji

Você pode acessar as configurações de emoji em /admin/config/emoji/settings para personalizar como os emojis se comportam no seu site.

• enable_emoji - Ativa a exibição e o uso de emojis na sua instância Discourse. Se desativado, os emojis não serão renderizados e os usuários não poderão acessá-los ou usá-los em campos de texto.
• emoji_set - Seleciona o estilo de emoji preferido. Diferentes conjuntos de emojis podem fornecer aparências exclusivas para os emojis exibidos no site.
• max_emojis_in_title - Número máximo de emojis permitidos no título do tópico (padrão: 1). Se o valor definido for zero, impede o uso de quaisquer emojis nos títulos dos tópicos.
• enable_emoji_shortcuts - Textos de smiley comuns, como :) :p :( serão convertidos em emojis.
• emoji_autocomplete_min_chars - Número mínimo de caracteres exigido para acionar o pop-up de autocompletar emoji (padrão: 0).
• enable_inline_emoji_translation - Ativa a tradução para emojis em linha (sem espaço ou pontuação anterior).
• emoji_deny_list - Estes emojis não estarão disponíveis para uso em menus ou códigos curtos.
• external_emoji_url - URL de um serviço externo para imagens de emoji. Deixe em branco para usar o padrão.
• discourse_reactions_enabled_reactions - Define uma lista de reações ativadas, qualquer emoji é permitido aqui. Reações padrão: +1, laughing, open_mouth, clap, confetti_ball, e hugs.
• discourse_reactions_excluded_from_like - Reações que não contam como Curtir. Quaisquer reações que não estejam nesta lista contarão como Curtir para emblemas, relatórios e outras finalidades.
• discourse_reactions_allow_any_emoji - Se ativado, adicionará um botão permitindo que os usuários selecionem qualquer emoji no seletor de reações. Os membros poderão escolher qualquer emoji, incluindo emojis personalizados, para reações. Para limitar as reações disponíveis, use a configuração do site emoji_deny_list.

Redimensionando emoji personalizado

Por padrão, todos os emojis são redimensionados via CSS para 20x20, mas isso pode ser substituído com CSS personalizado. Para manter a proporção correta e o tamanho nativo nas postagens, adicione o seguinte CSS:

/* Torna o emoji de tamanho normal (não força o quadrado) */
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;
}

Para personalizar o tamanho de um emoji específico, use:

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

Para redimensionar emojis em mensagens de chat e status do usuário em chats:

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