Esta guía explica cómo personalizar los emojis en tu sitio de Discourse mediante la selección de conjuntos de emojis, la carga de nuevos emojis, la configuración de ajustes del sitio y el ajuste del tamaño de los emojis.
Nivel de usuario requerido: Administrador
Selección de un conjunto de emojis
Actualmente, Discourse admite cinco conjuntos de emojis:
- Fluent UI
- Noto
- OpenMoji
- Twemoji
- Estándar (Unicode)
Para ver un resumen de cómo se ven los diferentes conjuntos, puedes consultar esta comparación de conjuntos de emojis. Puedes configurar la opción del sitio emoji_set en /admin/config/emoji/settings junto con otras configuraciones relacionadas con emojis.
Adición de emojis personalizados
Para añadir emojis personalizados:
-
Ve a Admin → Apariencia → Emojis en
/admin/config/emoji -
Haz clic en el botón Añadir emoji para nombrar, clasificar y cargar la imagen de tu emoji
Si tienes varios archivos de emojis para cargar, puedes seleccionar hasta 10 archivos de imagen en el selector de archivos para una carga masiva. En este caso, los nombres de los archivos de imagen se usarán como nombres de los emojis.
Importación masiva de emojis personalizados
Puedes importar hasta 1000 emojis a través de un único archivo ZIP con un manifiesto emojis.csv. El archivo CSV debe tener las siguientes columnas con encabezados: name, group, filename.
nombre,grupo,nombre_archivo
emoji_a,nombre_grupo,imagen.png
El proceso de importación depende enteramente del manifiesto. Si falta un archivo o una fila, se omitirá. El campo group puede dejarse vacío, en cuyo caso el emoji personalizado se añadirá al grupo default.
Para importar:
-
Ve a Admin → Apariencia → Emojis en
/admin/config/emoji -
Haz clic en el botón Importar y selecciona el archivo ZIP que contiene tus emojis.
-
Previsualiza la importación y confirma los cambios. Aquí puedes resolver cualquier conflicto seleccionando qué emoji conservar. Los conflictos pueden ocurrir si ya existe un emoji con el mismo nombre (y diferente grupo/imagen). Para completar la importación, haz clic en Confirmar importación.
Exportación masiva de emojis personalizados
Los emojis personalizados se pueden exportar en un único archivo ZIP. El archivo ZIP resultante contendrá un manifiesto emojis.csv, listo para ser importado a cualquier sitio de Discourse sin modificaciones. Esto contiene la imagen, el nombre y el grupo de cada emoji.
Para exportar, haz clic en el botón Seleccionar para exportar y selecciona todos los emojis que vas a exportar. Cuando estés listo, haz clic en el botón Exportar y se descargará un archivo ZIP.
Fijar emojis en la parte superior del selector
Puedes fijar cualquier grupo de emojis en la parte superior del selector de emojis. Accede a la configuración emoji_picker_pinned_groups mediante Admin → Apariencia → Emojis → Configuración en /admin/config/emoji/settings. Introduce el nombre del grupo de emojis que deseas fijar en la parte superior del selector.
Tanto los grupos de emojis personalizados como los regulares pueden fijarse en la parte superior. Por ejemplo, introduciendo flags moverá el grupo de emojis de banderas a la parte superior, por encima de las caritas.
Nombres de los grupos de emojis predeterminados:
smileys_&_emotionpeople_&_bodyanimals_&_naturefood_&_drinktravel_&_placesactivitiesobjectssymbolsflags
Configuración de emojis
Puedes acceder a la configuración de emojis en /admin/config/emoji/settings para personalizar cómo se comportan los emojis en tu sitio.
enable_emoji- Habilita la visualización y el uso de emojis en tu instancia de Discourse. Si está deshabilitado, los emojis no se renderizarán y los usuarios no podrán acceder ni usarlos en campos de texto.emoji_set- Selecciona tu estilo preferido de emojis. 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, se impide el uso de cualquier emoji en los títulos de los temas.enable_emoji_shortcuts- Textos de caritas 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 usar en menús o códigos cortos.emoji_picker_pinned_groups- Estos grupos de emojis están fijados en la parte superior del selector de emojis.external_emoji_url- URL de un servicio externo para imágenes de emojis. Déjalo en blanco para usar el predeterminado.discourse_reactions_enabled_reactions- Define una lista de reacciones habilitadas; cualquier emoji está permitido aquí. Reacciones predeterminadas: +1, laughing, open_mouth, clap, confetti_ball y hugs.discourse_reactions_excluded_from_like- Reacciones que no cuentan como un Me gusta. Cualquier reacción que no esté en esta lista contará como un Me gusta para insignias, informes y otros propósitos.discourse_reactions_allow_any_emoji- Si esto está habilitado, se añadirá un botón que permita a los usuarios seleccionar cualquier emoji en el selector de reacciones. Se permitirá a los miembros elegir cualquier emoji, incluidos los personalizados, para las reacciones. Para limitar las reacciones disponibles, usa la configuración del sitioemoji_deny_list.
Cambio de tamaño de emojis personalizados
Por defecto, todos los emojis se redimensionan mediante CSS a 20x20, pero esto puede anularse con CSS personalizado. Para mantener la relación de aspecto correcta y el tamaño nativo en las publicaciones, añade el siguiente CSS:
/* Hacer que los emojis tengan 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, usa:
img.emoji[title=":youremoji:"] {
height: XXpx;
width: YYpx;
}
Para redimensionar emojis en mensajes de chat y estado de usuario en chats:
div.chat-message-text img.emoji[src*="uploads"],
span.user-status-message img.emoji[src*="uploads"] {
width: auto;
height: auto;
}