Esta guía explica cómo personalizar los emojis en su sitio de Discourse a través de conjuntos de emojis seleccionables, carga de nuevos emojis, configuración de los ajustes del sitio y ajuste de los tamaños de los emojis.
Nivel de usuario requerido: Administrador
Selección de un conjunto de emojis
Discourse actualmente soporta cinco conjuntos de emojis:
- Fluent UI
- Noto
- OpenMoji
- Twemoji
- Estándar (Unicode)
Para obtener una descripción general de cómo se ven los diferentes conjuntos, puede echar un vistazo a esta comparación de conjuntos de emojis. Puede configurar el ajuste del sitio emoji_set en /admin/config/emoji/settings junto con otros ajustes relacionados con los emojis.
Adición de emojis personalizados
Para añadir emojis personalizados:
-
Navegue a Administrador → Apariencia → Emoji en
/admin/config/emoji -
Haga clic en el botón Añadir emoji para nombrar, clasificar y cargar la imagen de su emoji
Si tiene varios archivos de emoji para subir, puede seleccionar hasta 10 archivos de imagen en el selector de archivos para subirlos en lote. Los nombres de archivo de imagen se utilizarán como nombres de emoji en este caso.
Ajustes de Emoji
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 emoticonos comunes de texto como:):p:(se convertirán en emojis.emoji_autocomplete_min_chars- Número mínimo de caracteres necesarios para activar la ventana emergente de autocompletar emojis (predeterminado: 0).enable_inline_emoji_translation- Habilita la traducción para emojis en línea (sin ningún espacio o puntuación anterior).emoji_deny_list- Estos emojis no estarán disponibles para su uso en menús o códigos cortos.external_emoji_url- URL de un servicio externo para imágenes de emojis. Déjelo en blanco para usar el valor 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, 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 el ajuste del sitioemoji_deny_list.
Cambio de tamaño de los 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, añada 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;
}