Banners de categoría

[Discourse]

	Resumen	Category Banners utiliza los detalles existentes de las categorías para crear banners para tus páginas de categoría (para etiquetas, consulta Discourse Tag Banners).
	Vista previa	Vista previa en Discourse Theme Creator
	Enlace al repositorio	https://github.com/discourse/discourse-category-banners
	¿Nuevo en los temas de Discourse?	Guía para principiantes sobre el uso de los temas de Discourse

Instalar este componente de tema

Dado que este es un #componente de tema #oficial mantenido por el equipo de Discourse, las solicitudes de #soporte, bug, ux y #funcionalidad pueden realizarse en las categorías correspondientes aquí en Meta, y etiquetarse con la etiqueta del componente de tema apropiada. Haz clic en un enlace a continuación para iniciar uno.

 Soporte  Error  UX  Funcionalidad

Características

Category Banners utiliza los detalles existentes de las categorías para crear banners para tus páginas de categoría. Utiliza el nombre, la descripción y el color de la categoría para generar un banner en la parte superior de las páginas de categoría relevantes (para etiquetas, consulta Discourse Tag Banners).

La descripción de la categoría se define mediante el primer párrafo del tema “Definición de categoría para …” de cada categoría. Los colores de fondo y texto del banner se definen mediante la configuración de insignias de tu categoría.

De forma predeterminada, esto se mostrará en escritorio y móvil en todas las páginas de Categoría y Subcategoría, pero no aparecerá si no has asignado una descripción a tu categoría.

Configuración

Este componente viene con opciones para anular los valores predeterminados:

Nombre	Descripción
mostrar descripción	Mostrar descripción del tema “Acerca de esta categoría”
mostrar móvil	Mostrar banners en móvil
mostrar subcategoría	Mostrar banners para subcategorías
ocultar si no hay descripción	Ocultar banners si no se ha establecido la descripción de la categoría
mostrar logotipo de categoría	Mostrar logotipo de categoría
alinear texto
excepciones	El banner no se mostrará para estos NOMBRES de categoría
categorías	Categorías para las que mostrar un banner
plugin outlet	Cambia la posición del banner en la página
mostrar icono de categoría	Mostrar icono o emoji de categoría desde la configuración de la categoría *
anular color del icono de categoría	Cuando se utilizan los iconos de categoría, activar esto hará que el icono coincida con el color del texto del banner

• Ten en cuenta que esta configuración ahora se refiere al icono o emoji de categoría establecido en la configuración de la categoría, no al componente de tema Iconos de categoría (que está obsoleto en favor de la función principal).

Notas de personalización

Si deseas personalizarlos con algo de CSS adicional, puedes dirigirse a encabezados de categoría específicos utilizando esta estructura (ejemplo-categoría es el nombre de tu categoría):

.category-title-header {
  &.category-banner-example-category {
        background: url(example.jpg);
  }
}

Este componente también añade la clase category-header a la etiqueta body como un objetivo CSS adicional.

¿Alojado por nosotros? Los componentes de tema están disponibles para su uso en nuestros planes Estándar, Empresarial y Corporativo.

[Pad_Pors]

thanks for this wonderful theme , it helps users to note the category description much easier.

currently if there’s a link or a bold/italic word in the category description, in the banner it’ll appear as simple text (e.x. p style instead of a style). isn’t it better if the text style is preserved in the banner as well?

[jimmymckinney (Jimmy)]

Hi, I absolutely love this component! Thanks for your work!

I’m wondering, how can I style the background so that it automatically pulls the category background image and makes it the background of the banner. The backgrounds are already hidden anyways, so I want it to simply display as the background to the banner, rather than the page. I’ve tried this, but it didn’t work and I think I might be targeting the wrong variable:

return h('div.category-title-header' + " ." + category.slug, {
                    "attributes" : {
                        "style" : "background-color: #" + category.color + "; color: #" + category.text_color + "; background-image: url(\'" + 
                        category.background_url + "\');"
                    }
                }

Also, I’m wondering, how can I make the banner thinner for a fixed width design. When I attempted, it continued to be left-justified.

[jrgong]

I think it’s great that the category banners now render content in HTML.

Is there any way to display emojis there? In my case, I added three important links: Anfänger - Forum | Cannabisanbauen.net

I want to display the emojis next to each link as well. The original about topic is here: Über die Kategorie Anfänger - Anfänger - Forum | Cannabisanbauen.net

[awesomerobot (Kris)]

Not prefixing the category name is a recipe for disaster, so I’ve added category-banner- before the class name (e.g., category-banner-meta). If you were targeting the category name in your CSS you’ll just have to add category-banner- before it.

@jrgong

Is there any way to display emoji’s there?

I’m not sure, I don’t think our default category descriptions support them either, but I can look into it…

[Hang]

I want to use the uploaded background image from the category to put it in the background of the banner. I’ve edited the code and everything looks great. I wonder is there anything I can do to make the image load faster or together with the rest of the page? I want to avoid the flickering of the background for a second before the image appears.
Compressing image is certainly an option, but I wonder if there are others. Can I grab the thumbnail of the uploaded background image in the code? Thanks for all leads!

[Vanecx]

¡Hola, y gracias por este componente de tema!

Acabo de intentar instalarlo siguiendo este tutorial (hice exactamente los mismos pasos) para probar el componente de Banners de Categoría, pero no ocurre nada. No aparece ningún banner en ninguna de las categorías. ¿Hay algo que pueda haber hecho mal que impida que funcione? La única explicación que veo es que la advertencia de “bootstrap” lo esté bloqueando.

[simon]

@Vanecx

No hay ningún banner en ninguna de las categorías. ¿Hay algo que pueda haber hecho que impida que funcione?

De forma predeterminada, el componente del tema no muestra los banners de categoría si no has establecido una descripción para la categoría. Esto se puede cambiar desmarcando la casilla “Ocultar banners si no se ha establecido una descripción de categoría”.

Las descripciones de categoría se establecen editando el tema “Acerca de” que Discourse crea automáticamente para cada categoría. Si has agregado descripciones de categoría o has desactivado la configuración para ocultar los banners de las categorías sin descripción y aún no ves los banners de categoría, avísanos. Investigaremos qué está ocurriendo.

[Vanecx]

Gracias por tu respuesta. He verificado y confirmado que cada categoría en el foro tiene una descripción. La opción “Ocultar banners…” ahora está desmarcada solo para asegurarme, pero no hay cambios.

Como puedes ver en las imágenes, todo parece normal en la configuración:

No sé si esto pueda tener algo que ver con el problema, pero solo para informarte, es una instalación de Discourse en una instancia de Yunohost.

[downey (Michael Downey)]

¿Hay alguien más, aparte de mí, que piense que sería agradable habilitar este mismo estilo en las páginas de listado de grupos (por ejemplo, /g/foo)? Lamentablemente, el CSS no es exactamente el mismo, y supongo que requeriría un manejo adicional de los varios botones a la derecha del nombre del grupo, es decir, Solicitar Mensaje Eliminar

Esto podría ayudar mucho a lograr una apariencia y sensación coherentes, y hacer que los grupos se sientan más como ciudadanos de “primera clase” dentro de la interfaz de usuario. (En mi opinión)

[jord8on (Jordan)]

¡Me encantan estos banners de categoría! Gracias por crear este componente del tema.

Me encantaría que este banner existiera en la página de inicio principal de nuestros foros, donde se muestre:

• Discusiones “Recientes” o
• Discusiones “Destacadas” o
• “Categorías” o
• “Siguiendo” (si estás usando el Plugin Seguir )

¿Habría una forma fácil (más o menos) de mostrar un banner si alguien selecciona cada una de estas opciones, según lo que haya seleccionado?

[Rhidian (Rhidian Bramley)]

@awesomerobot, espero que no te importe que comparta esto aquí…

He creado un fork de este tema discourse-category-banners llamado

discourse-category-banner-boxes
https://github.com/naidihr/discourse-category-banner-boxes

Puedes previsualizarlo aquí:

https://theme-creator.discourse.org/theme/Rhidian/discourse-category-banner-boxes

Básicamente hace lo mismo, pero con algunas modificaciones:

• El cuadro del banner de la categoría se muestra en línea, justo encima del título principal, en lugar de ocupar todo el ancho en la parte superior. Esto permite mostrar un tema de banner en la parte superior, por ejemplo, discourse-versatile-banner.

• El cuadro del banner de la categoría se muestra con el mismo estilo que los cuadros nativos de subcategorías de Discourse, que son un componente central de la plataforma. Estos cuadros de subcategorías son una opción de visualización en la configuración de categorías de Discourse: Mostrar lista de subcategorías encima de los temas en esta categoría. Esta opción muestra el nombre y la descripción de la subcategoría como una fila o cuadro encima de la lista de temas, utilizando el color de fondo de la categoría como borde izquierdo.

• Si la categoría es una subcategoría, el nombre de la categoría se muestra como una ruta de navegación de la siguiente manera: Nombre de la categoría principal: Nombre de la subcategoría.

Captura de pantalla de demostración del cuadro de banner del tema para la categoría, encima de los cuadros nativos de subcategorías.

Captura de pantalla de la subcategoría, mostrando la referencia de ruta de navegación a la categoría principal.

Esta es mi primer intento de modificación de un tema. Espero que esto sea útil.

Actualización

He refactorizado esta adaptación como un componente independiente, con muchas características adicionales, incluido el uso de la imagen del logotipo de la categoría y la imagen de fondo en el encabezado. Este nuevo componente reemplaza efectivamente el encabezado estándar de categoría de Discourse, a diferencia de los banners de categoría, por lo que se convierte en un nuevo componente. Por favor, consulta:

Discourse Category Headers theme component

This theme component provides a number of enhancements for the Discourse category header. The ‘standard’ Discourse category header is displayed at the top of each category page, above the navigation links and list of topics. It is normally only visible if a category logo image has been uploaded in the category settings. The header displays the logo and a short description of the category, taken from the first paragraph of the ‘About the.. category’ topic. This theme component provides the foll…

[nathank (Nathan Kershaw)]

@awesomerobot

Excepciones: si no deseas que una categoría tenga un banner, añade su nombre aquí

Esto no nos está funcionando. He probado tanto el slug de la categoría como su ID, pero el banner sigue obstinadamente ahí. ¿Funciona esto para alguien más?

[awesomerobot (Kris)]

Acabo de probarlo y funciona en mi caso. Está buscando la categoría name con distinción de mayúsculas y minúsculas. En retrospectiva, no fue la mejor manera de implementarlo… Probablemente pueda mejorarlo.

[nathank (Nathan Kershaw)]

Ah, ¡ese tipo es para mí! Y sí, mencionas ‘nombre’ en la guía de arriba; simplemente no lo leí.

‘Nombre’ no es muy intuitivo, ya que realmente no lo usamos para nada más. Pero se muestra con frecuencia. Creo que sería suficiente hacerlo más explícito en la configuración.

[AntiMetaman]

En lugar de añadir excepciones sobre qué categorías no mostrarán un banner cargado, ¿no podríamos simplemente especificar qué categoría debe mostrar qué banner?

[awesomerobot (Kris)]

Depende del sitio específico y del caso de uso, estoy seguro. Mi primera impresión fue que es más probable que un sitio quiera implementarlo en todas partes, y si hubiera excepciones, serían solo unas pocas.

Si quisieras implementar un banner para un número reducido de categorías, podría haber una opción de componente de tema más adecuada, diseñada para ser menos genérica y de cobertura total, como Versatile Banner o personalizando una de las opciones disponibles en https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368

[Idan]

Sería genial poder subir una imagen para reemplazar el texto.

[oca]

¡Gracias por ese componente muy útil!

¿Sería posible añadir una pequeña función?

• Añadir la clase restricted al elemento <span.discourse-category-banners> o <div.category-title-header> cuando la categoría no sea pública, de la misma manera que se hace con la insignia de la categoría.

Sería útil para ajustar el banner con CSS adicional y mostrar al usuario que esta categoría es especial.

Por ahora, es posible hacerlo, pero resulta complicado seleccionar el icono de candado con CSS y realizar ciertas acciones, ya que CSS no tiene selector de padre, por lo que no puedo usar la presencia del icono de candado para verificar si el banner debe modificarse.

Aún no sé muy bien cómo hacer PRs, pero usaría esto como una buena razón para aprender si estás abierto a mi modificación.

[Drew-ART (Drew)]

¿Se puede hacer que funcione en las páginas de etiquetas? Encontré el complemento de banners de etiquetas, pero no tiene la capacidad de agregar texto o enlaces a él.