Configurar emoji personalizado

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

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?