Configurar emoji personalizado

[Discourse]

Esta guía explica cómo configurar emojis personalizados en su sitio de Discourse.

Nivel de usuario requerido: Administrador

Configuración de emojis personalizados

¿Desea cambiar los emojis de su sitio de Discourse? Veamos cómo configurar emojis personalizados para su sitio de Discourse, incluida la selección de conjuntos de emojis, la carga de nuevos emojis y el ajuste de los tamaños de los emojis.

Selección de un conjunto de emojis

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

Puede seleccionar un conjunto de emojis en /admin/config/emoji/settings?filter=emoji%20set junto con otras configuraciones relacionadas con los emojis.

Adición de emojis personalizados

Para agregar emojis personalizados:

1. Navegue a: Administración de Discourse - Configuración - Emoji en /admin/config/emoji
2. Usted puede:
   • Ingresar un nombre y hacer clic en Añadir emoji para cargar una foto como emoji
   • Arrastrar y soltar hasta 10 archivos en el campo Nombre para cargar masivamente; los nombres de archivo se usarán como nombres de emoji.

Configuración de emojis

Puede acceder a la configuración de emojis en /admin/config/emoji/settings para personalizar cómo se comportan los emojis en su sitio.

• enable_emoji - Habilita la visualización y el uso de emojis en su instancia de Discourse. Si está deshabilitado, los emojis no se renderizarán y los usuarios no podrán acceder a ellos ni usarlos en campos de texto.
• emoji_set - Seleccione su estilo de emoji preferido. Diferentes conjuntos de emojis pueden proporcionar apariencias únicas a los emojis mostrados en el sitio.
• max_emojis_in_title - Número máximo de emojis permitidos en el título del tema (predeterminado: 1). Si el valor establecido es cero, evita el uso de cualquier emoji en los títulos de los temas.
• enable_emoji_shortcuts - Los textos de emoticonos comunes como :) :p :( se convertirán en emojis.
• emoji_autocomplete_min_chars - Número mínimo de caracteres requeridos para activar la ventana emergente de autocompletado de emojis (predeterminado: 0).
• enable_inline_emoji_translation - Habilita la traducción para emojis en línea (sin ningún espacio o puntuación antes).
• emoji_deny_list - Estos emojis no estarán disponibles para su uso en menús o códigos cortos.
• external_emoji_url - URL del servicio externo para imágenes de emojis (predeterminado: https://emoji.discourse-cdn.com). Dejar en blanco para deshabilitar.
• discourse_reactions_enabled_reactions - Define una lista de reacciones habilitadas, se permite cualquier emoji aquí. Las reacciones predeterminadas incluyen: corazón, risa, llanto, cabeza_explotando, aplauso, bola_confeti, abrazos, beso_de_chef, 100, +1, cohete, cara_de_asombro, discourse y ojos.
• discourse_reactions_excluded_from_like - Reacciones que no cuentan como “Me gusta”. Cualquier reacción que no esté en esta lista contará como “Me gusta” para insignias, informes y otros fines.
• discourse_reactions_allow_any_emoji - Si esto está habilitado, agregará un botón que permitirá a los usuarios seleccionar cualquier emoji en el selector de reacciones. Se permitirá a los miembros elegir cualquier emoji, incluidos los emojis personalizados, para las reacciones. Para limitar las reacciones disponibles, utilice la configuración del sitio emoji_deny_list.

Redimensionamiento de emojis personalizados

Por defecto, todos los emojis se redimensionan mediante CSS a 20x20, pero esto se puede anular con CSS personalizado. Para mantener la relación de aspecto correcta y el tamaño nativo en las publicaciones, agregue el siguiente CSS:

/* Hacer que los emojis tengan el tamaño normal (no forzar cuadrado) */
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 el tamaño de un emoji específico, use:

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

Para cambiar el tamaño de los emojis en los mensajes de chat y el estado del usuario en los chats:

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

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