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]

Noté que los emojis/emoticonos personalizados se muestran 20x20 en los mensajes de chat y en el estado del usuario en los chats. Lo solucioné de esta manera:

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

span.user-status-message img.emoji[src*="uploads"] { /* Estado del usuario en el chat */
    width: auto;
    height: auto;
}

¿Lo harías de esta manera también? Si es así, podría ser útil agregarlo a esta publicación de wiki anterior. Si no, estaré encantado de optimizar mi código CSS.

[Vladislav_Jandric]

Personalicé nuevos Emojis, pero no los encuentro entre los otros Emojis.

[ondrej]

¿Has desplazado hasta el final del selector de emojis? Ahí es donde viven tus grupos de emojis personalizados.

[Moin]

@Discourse

Discourse viene con siete conjuntos de emojis diferentes:

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

Esos han cambiado:

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

He estado probando diferentes opciones para la carga masiva de emojis personalizados, pero no he encontrado nada, así que pregunto aquí cuál sería la mejor opción futura.

Tengo una pequeña colección de emojis personalizados que me gusta subir a todos mis Discourses. Algunos son iconos de FontAwesome, que me gusta tener disponibles como :icon-name: en las publicaciones del compositor para poder explicar los iconos de la interfaz de usuario de Discourse a los usuarios. Otros son solo por diversión, como una bandera de Yorkshire. Los tengo en carpetas (y también podrían estar en línea en un repositorio de GitHub, supongo).

Me gustaría poder subir todas estas carpetas, de una sola vez, a la interfaz de usuario de emojis personalizados. Actualmente, el límite de subidas respeta la configuración de simultaneous_uploads (Número máximo de archivos que se pueden arrastrar y soltar en el compositor), que está limitado a un valor máximo de 20 (Error: “simultaneous_uploads: El valor debe estar entre 0 y 20.” si intentas aumentarlo, incluso temporalmente).

Investigué con interés la otra configuración de Emoji external-emoji-url, que permite establecer una URL para un conjunto de emojis externos, pero lamentablemente esto reemplaza todos los emojis ‘estándar’, que no quiero perder.

Todo lo que realmente necesito es que la carga de carpetas de emojis personalizados funcione como lo hace actualmente para los emojis personalizados individuales. Alternativamente, si no hubiera límite en el número de subidas permitidas (tal vez el trabajo de subida podría enviarse a SideKiq para que se haga de forma asíncrona, y notificar a los administradores por PM cuando esté hecho, como para las invitaciones masivas).

Investigué el uso de la API REST de Discourse para esto, pero los emojis personalizados no están expuestos a través de la API REST. Las subidas sí están expuestas en la API, y esto me funcionó, pero incluso si se usa el tipo custom_emoji para una subida, no aparece en la lista.

Me pregunto cuál cree la comunidad que sería la mejor manera de avanzar:

• ¿Tarea Rake que automatice la creación masiva de emojis personalizados?
• ¿Hacerlo en la consola de Rails?
• ¿Cambiar los límites de subida de la interfaz de usuario de administración para permitir varios cientos de subidas de una sola vez?
• ¿Añadir ‘carga de carpeta’ a la interfaz de usuario de administración?
• ¿Hacer que los emojis personalizados sean algo que pueda desplegar como un Componente de tema que pueda añadir desde la URL de GitHub? (Me gusta la simplicidad de este)
• ¿Permitir múltiples URLs de emojis externos para que pueda tener un conjunto de emojis Y mis emojis personalizados (tal vez servidos desde un repositorio de páginas de GitHub)?
• ¿Hackear un único repositorio de ‘emoji y emoji personalizado’ al que pueda dirigirme a través de la URL?

O - ¿hay otra manera de conseguir que todos los iconos de FontAwesome que Discourse utiliza en su interfaz de usuario estén disponibles en el compositor utilizando la sintaxis :icon-name:? Realmente la mayor parte de lo que quiero hacer está relacionado con esto. Una configuración del sitio que permita que los iconos de la interfaz de usuario estén disponibles en el compositor me llevaría al 90% del camino.

[JammyDodger]

@pacharanero

Realmente la mayoría de lo que quiero hacer está relacionado con esto. Una configuración del sitio que habilite los íconos de la interfaz de usuario en el compositor me llevaría al 90%.

He utilizado el componente temático Discourse Icon para un caso de uso similar, ¿si eso ayuda?

Ejemplo del tema:

Este es el icono [wrap=icon id=far-square][/wrap] y el icono [wrap=icon id=pencil][/wrap].

Este es el icono y el icono .

[pacharanero (Marcus Baw)]

Gracias @JammyDodger, eso es útil y definitivamente es una opción que consideraría, aunque la experiencia de usuario de la sintaxis [wrap=icon id=icon-name][/wrap] no es tan buena como :icon-name:.

Una desventaja del enfoque de Iconos de Discourse es que tengo que añadir manualmente una lista de todos los iconos que quiero usar en la configuración del sitio svg icon subset (subconjunto de iconos svg). Pero al menos eso se puede hacer de una vez copiando y pegando desde una lista en un archivo de texto.

[Moin]

@pacharanero

explicar los iconos de la interfaz de usuario de Discourse a los usuarios

Por tu descripción, no esperaría que tuvieras que añadir tanto. La configuración es para añadir más iconos. Todos los iconos que se utilizan en el foro ya están disponibles.

[pacharanero (Marcus Baw)]

@Moin

Todos los iconos que se utilizan en el foro ya están disponibles.

¿Dónde están disponibles? Lo agradezco si lo están. Pero no parece que pueda acceder a ellos con la sintaxis de tipo :nombre-icono:.

Solo quiero poder decir fácilmente a la gente, por ejemplo, que para añadir una fecha y hora consciente de la zona horaria a una publicación, utilicen el botón :calendar-days: en la barra de herramientas del Compositor. Pero cuando busco los emojis/iconos incluidos, lo más parecido que puedo obtener es .

[Moin]

Trabajan con la sintaxis de wrap y el icono de Discourse sin añadirlos al svg icon subset.

La respuesta se refería a tu comentario de que es una desventaja tener que añadir todos los iconos.

@pacharanero

Una desventaja del enfoque de Discourse Icon es que tengo que añadir manualmente una lista de todos los iconos que quiero usar en la configuración del sitio svg icon subset.

---

¿Quizás funcionaría usar watched-words para reemplazar :calendar-days: con [wrap=icon id=calendar-days][/wrap]?

[pacharanero (Marcus Baw)]

@Moin

Funcionan con la sintaxis wrap y el icono de Discourse sin añadirlos a svg icon subset.

La respuesta se refería a tu comentario de que es una desventaja tener que añadir todos los iconos.

Ah, de acuerdo, gracias y disculpas por mi malentendido. Esto es genial. ¡Así que puedo usar en cualquier lugar usando la sintaxis wrap! ¡Cada día es un día de escuela de Discourse!

La única parte que falta es la capacidad de buscar fácilmente el nombre de Discourse del icono que necesito, pero supongo que siempre puedo usar el inspector del navegador para encontrar el nombre d-icon- y ajustarlo en consecuencia. O el sitio web de FontAwesome.

Gracias @Moin

[Roi]

Algo cambió desde la última vez que actualicé Discourse (hace algunos días).

En lugar de

ahora se ve así

Cuando reviso el CSS, hay un elemento element.style (es decir, un estilo dentro del HTML para este emoji) aspect-ratio: 20 / 20; y si lo deshabilito, el emoji se ve como debería.

¿Qué hacer?

(Por cierto, “Choker” no tiene nada que decir. Se trata de buceo y no de otras cosas y solo está ahí para ver el tamaño del texto en la publicación).

[Steven]

Podrías añadir estas líneas de CSS en tus temas

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

[Roi]

¡Genial, gracias, funcionó!

¿Puedo preguntar?

¿Cuál es el propósito de establecer la relación de aspecto en la última versión?

Y, ¿por qué esto no es CSS, y tampoco el código mencionado anteriormente, incluido en el Discourse principal? ¿Está esto rompiendo algo más o muy pocas personas usan emojis/caras sonrientes personalizadas?

[Steven]

La verdad es que no lo sé, supongo que está relacionado con esta discusión

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?