Configurar emoji personalizado

[Discourse]

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

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

Configurando emoji personalizado

Quer mudar os emojis 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 sete conjuntos de emojis diferentes:

• Estilo Apple/Internacional
• Estilo Google
• Estilo Twitter
• Estilo Emoji One
• Estilo Win10
• Google Clássico
• Facebook Messenger

Você pode selecionar um conjunto de emojis 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 para: Administração do Discourse - Config - Emoji em /admin/config/emoji
2. Você pode:
   • Inserir um nome e clicar em Adicionar emoji para carregar uma foto como emoji
   • Arrastar e soltar até 10 arquivos no campo Nome para upload em massa; 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 - Habilita a exibição e o uso de emojis na sua instância do Discourse. Se desabilitado, 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 - Selecione seu 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 necessários para acionar o pop-up de autocompletar emoji (padrão: 0).
• enable_inline_emoji_translation - Habilita 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 do serviço externo para imagens de emoji (padrão: https://emoji.discourse-cdn.com). Deixe em branco para desabilitar.
• discourse_reactions_enabled_reactions - Define uma lista de reações habilitadas, qualquer emoji é permitido aqui. As reações padrão incluem: coração, rindo, chorando, cabeça explodindo, aplauso, bola de confete, abraços, beijo do chef, 100, +1, foguete, olhos arregalados, discourse e olhos.
• 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 outros fins.
• discourse_reactions_allow_any_emoji - Se isso estiver habilitado, 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 de usuário em chats:

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

[Roi]

Notei que os emojis/smiles personalizados aparecem com 20x20 nas mensagens de chat e no status do usuário nos chats. Eu resolvi assim:

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

span.user-status-message img.emoji[src*="uploads"] { /* Status do usuário no chat */
    width: auto;
    height: auto;
}

Você faria assim também? Se sim, pode ser útil adicioná-lo a este post da wiki acima. Se não, ficarei feliz em otimizar meu código CSS.

[Vladislav_Jandric]

Eu personalizei novos Emojis, mas não consigo encontrá-los entre os outros Emojis.

[ondrej]

Você rolou até o final do seletor de emojis? É lá que ficam seus grupos de emojis personalizados.

[Moin]

@Discourse

O Discourse vem com sete conjuntos diferentes de emojis:

• Estilo Apple/Internacional
• Estilo Google
• Estilo Twitter
• Estilo Emoji One
• Estilo Win10
• Google Clássico
• Facebook Messenger

Esses mudaram:

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

Tenho tentado algumas opções diferentes para o Upload em Massa de Emoji Personalizados, mas não obtive sucesso, então estou perguntando aqui qual seria a melhor opção futura.

Eu tenho uma pequena coleção de emoji personalizados que gosto de enviar para todos os meus Discourses. Alguns são ícones do FontAwesome, que eu gosto de ter disponíveis como :icon-name: nas postagens do composer para que eu possa explicar os ícones da interface do usuário do Discourse para os usuários. Outros são apenas por diversão, como uma bandeira de Yorkshire. Eu os tenho em pastas (e eles poderiam facilmente estar online em um repositório GitHub, eu suponho).

Eu gostaria de poder enviar essas pastas inteiras, de uma só vez, para a interface do usuário de Emoji Personalizados. Atualmente, o limite nos uploads respeita a configuração de simultaneous_uploads (‘Número máximo de arquivos que podem ser arrastados e soltos no composer’) nas configurações do site, que é limitado a um valor máximo de 20 (Erro: “simultaneous_uploads: O valor deve estar entre 0 e 20.” se você tentar aumentá-lo, mesmo que temporariamente)

Investiguei com interesse a outra configuração de Emoji external-emoji-url, que permite definir um URL para um conjunto de Emoji externo, mas, infelizmente, isso substitui todos os emoji ‘padrão’, que eu não quero perder.

Tudo o que eu realmente preciso é que o upload de pasta de emoji personalizado funcione como funciona atualmente para emoji personalizado individual. Alternativamente, se não houvesse limite para o número de uploads permitidos (talvez o trabalho de upload pudesse ser enviado para o SideKiq para ser feito de forma assíncrona e PM aos administradores quando estiver concluído, como para convites em massa)

Investiguei o uso da API REST do Discourse para isso, mas os Emoji Personalizados não são expostos por meio da API REST. Os uploads são expostos na API, e eu consegui fazer isso funcionar, mas mesmo usando o tipo custom_emoji para um upload, ele não aparece na lista.

Só queria saber o que a comunidade acha que seria a melhor maneira de avançar:

• Tarefa Rake que automatiza a criação de emoji personalizado em massa?
• Fazer isso no console Rails?
• Alterar os limites de upload da interface do usuário de administração para permitir várias centenas de uploads de uma só vez?
• Adicionar ‘upload de pasta’ à interface do usuário de administração?
• Tornar o emoji personalizado algo que eu pudesse implantar como um Componente de Tema que eu pudesse adicionar a partir do URL do GitHub? (Eu gosto da simplicidade deste)
• Permitir vários URLs de emoji externos para que eu possa ter um conjunto de emoji E meus emoji personalizados (talvez servidos de um repositório de páginas do GitHub)
• Juntar um único repositório de ‘emoji e emoji personalizado’ que eu possa acessar via URL?

OU - existe outra maneira de obter todos os ícones do FontAwesome que o Discourse usa em sua interface do usuário para estarem disponíveis no composer usando a sintaxe :icon-name:? Realmente, a maioria do que eu quero fazer está relacionada a isso. Uma configuração do site que permitisse que os ícones da interface do usuário estivessem disponíveis no composer me ajudaria em 90%.

[JammyDodger]

@pacharanero

Na verdade, a maioria do que quero fazer está relacionado a isso. Uma configuração de site que disponibilizasse ícones de interface do usuário no composer me levaria 90% lá.

Usei o componente de tema Discourse Icon para um caso de uso semelhante, se isso ajudar?

Exemplo do tópico:

Este é o ícone [wrap=icon id=far-square][/wrap] e o ícone [wrap=icon id=pencil][/wrap].

Este é o ícone e o ícone .

[pacharanero (Marcus Baw)]

Obrigado @JammyDodger, isso é útil e definitivamente uma opção que eu consideraria, embora a UX da sintaxe [wrap=icon id=icon-name][/wrap] não seja tão boa quanto :icon-name:.

Uma desvantagem da abordagem de Ícone do Discourse é que eu tenho que adicionar manualmente uma lista de todos os ícones que eu quero usar na configuração do site svg icon subset (subconjunto de ícones svg). Mas pelo menos isso pode ser feito de uma vez copiando e colando de uma lista em um arquivo de texto.

[Moin]

@pacharanero

explicar ícones da interface do Discourse aos usuários

Pela sua descrição, eu não esperaria que você tivesse que adicionar tanto. A configuração é para adicionar mais ícones. Todos os ícones usados no fórum já estão disponíveis.

[pacharanero (Marcus Baw)]

@Moin

Todos os ícones que são usados no fórum já estão disponíveis.

Onde eles estão disponíveis? Fico feliz se estiverem. Mas não consigo acessá-los com a sintaxe do tipo :nome-do-ícone:.

Eu só quero poder dizer facilmente às pessoas, por exemplo, que para adicionar um datetime ciente do fuso horário a uma postagem, elas usam o botão :calendar-days: na barra de ferramentas do Composer. Mas quando procuro os emojis/ícones incluídos, a coisa mais próxima que consigo é .

[Moin]

Eles funcionam com a sintaxe wrap e o ícone do Discourse sem adicioná-los ao svg icon subset.

A resposta referiu-se ao seu comentário de que é uma desvantagem ter que adicionar todos os ícones.

@pacharanero

Uma desvantagem da abordagem do Ícone do Discourse é que tenho que adicionar manualmente uma lista de todos os ícones que quero usar na configuração do site svg icon subset.

---

Talvez funcionasse usar #watched-words para substituir :calendar-days: por [wrap=icon id=calendar-days][/wrap]

[pacharanero (Marcus Baw)]

@Moin

Eles funcionam com a sintaxe wrap e o ícone do Discourse sem adicioná-los a svg icon subset.

A resposta se referiu ao seu comentário de que é uma desvantagem ter que adicionar todos os ícones.

Ah, ok, obrigado e desculpe pelo meu mal-entendido. Isso é incrível. Então, posso usar em qualquer lugar usando a sintaxe wrap! Todos os dias são um dia de aprendizado no Discourse!

A única parte que falta é a capacidade de pesquisar facilmente o nome do Discourse do ícone que preciso, mas acho que sempre posso usar o inspetor do navegador para encontrar o nome d-icon- e ajustar de acordo. Ou o site do FontAwesome.

Obrigado @Moin

[Roi]

Algo mudou desde a última vez que atualizei o Discourse (há alguns dias).

Em vez de

agora parece

Quando verifico o CSS, há um elemento style (então um estilo dentro do HTML para este emoji) aspect-ratio: 20 / 20; e se eu o desativar, o emoji fica como deveria.

O que fazer?

(Aliás, “Choker” não tem nada a ver com isso. É sobre mergulho e não outras coisas e está ali apenas para ver o tamanho do texto na postagem.)

[Steven]

Você poderia adicionar estas linhas de CSS em seus temas

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

[Roi]

Ótimo, obrigado, funcionou!

Posso perguntar:

Qual o propósito de definir a proporção no último lançamento?

E por que isso não está incluído no Discourse principal, assim como o código mencionado acima? Isso está quebrando algo mais ou poucas pessoas estão usando emojis/smiles personalizados?

[Steven]

Eu honestamente não sei, acho que está relacionado a esta discussão

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?