Bannières de catégorie

[Discourse]

	Résumé	Bannières de catégorie utilise les détails existants des catégories pour créer des bannières pour vos pages de catégories (pour les balises, consultez Discourse Tag Banners).
	Aperçu	Aperçu sur Discourse Theme Creator
	Lien du dépôt	https://github.com/discourse/discourse-category-banners
	Nouveau sur les thèmes Discourse ?	Guide pour débutants sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Comme il s’agit d’un composant de thème official maintenu par l’équipe Discourse, les demandes de Support, de rapport de bug, d’amélioration de l’expérience utilisateur (ux) et de nouvelle fonctionnalité (#feature) peuvent être soumises dans les catégories respectives ici sur Meta, en les étiquetant avec le tag approprié du composant de thème. Cliquez sur un lien ci-dessous pour en créer un.

 Support  Bug  UX  Fonctionnalité

Fonctionnalités

Bannières de catégorie utilise les détails existants des catégories pour créer des bannières pour vos pages de catégories. Il utilise le nom de la catégorie, sa description et sa couleur pour générer une bannière en haut des pages de catégorie concernées (pour les balises, consultez Discourse Tag Banners).

La description de la catégorie est définie par le premier paragraphe du sujet « Définition de la catégorie pour … » de chaque catégorie. Les couleurs de l’arrière-plan et du texte de la bannière sont définies par vos paramètres de badge de catégorie.

Par défaut, cela s’affichera sur les versions bureau et mobile de toutes les pages de catégorie et de sous-catégorie, mais ne s’affichera pas si vous n’avez pas attribué de description à votre catégorie.

Paramètres

Ce composant propose des options pour remplacer les paramètres par défaut :

Nom	Description
show description	Afficher la description du message « À propos de cette catégorie »
show mobile	Afficher les bannières sur mobile
show subcategory	Afficher les bannières pour les sous-catégories
hide if no description	Masquer les bannières si la description de la catégorie n’est pas définie
show category logo	Afficher le logo de la catégorie
align text	Aligner le texte
exceptions	La bannière ne s’affichera pas pour ces NOMS de catégorie
categories	Catégories pour lesquelles afficher une bannière
plugin outlet	Modifie la position de la bannière sur la page
show category icon	Afficher l’icône ou l’émoji de la catégorie définis dans les paramètres de catégorie *
override category icon color	Lorsque les icônes de catégorie sont utilisées, activer cette option fera correspondre l’icône à la couleur du texte de la bannière

• Notez que ce paramètre fait maintenant référence à l’icône ou à l’émoji de catégorie défini dans les paramètres de catégorie, et non au composant de thème Category Icons (qui est obsolète au profit de la fonctionnalité principale).

Notes sur la personnalisation

Si vous souhaitez les personnaliser avec du CSS supplémentaire, vous pouvez cibler des en-têtes de catégorie spécifiques en utilisant cette structure (exemple-category est le nom de votre catégorie) :

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

Ce composant ajoute également la classe category-header à la balise body comme cible CSS supplémentaire.

Hébergé par nous ? Les composants de thème sont disponibles pour une utilisation sur nos plans Standard, Business et Entreprise.

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

Hello, and thank you for this theme component!

I just tried installing it, following this tutorial (did exactly the same steps) to try this Category Banners component, but nothing happens. No banner in any of the categories. Is there anything that I might have done that doesn’t make it work? The only explanation I see is that the “bootstrap” warning blocks it?

[simon]

@Vanecx

No banner in any of the categories. Is there anything that I might have done that doesn’t make it work?

By default, the theme component does not display category banners if you have not set a category description for a category. This can be changed by unchecking the “Hide banners if category description not set” checkbox.

Category descriptions are set by editing the About category topic that Discourse automatically creates for every category. If you have either added category descriptions, or disabled the setting to hide banners for categories without descriptions, and you are still not seeing category banners, let us know. We’ll look into what is going on.

[Vanecx]

Thank you for your answer. I have checked and confirm that each category on the forum has a description. The “Hide banners…” option is now unchecked just to make sure but nothing changes.

As you can see on the images, everything looks normal in the settings :

No idea if it could have anything to do with the issue but just informing you it’s a Discourse installation on a Yunohost instance.

[downey (Michael Downey)]

Is there anyone other than me that thinks it would be nice to enable this same styling on Group listing pages (e.g. /g/foo) as well? The CSS, unfortunately, is not quite the same, and I guess it would require some additional handling of the various buttons to the right side of the group name, i.e., Request Message Delete

It could go a long way for a consistent look and feel, and make groups feel more like a “first class” citizen among the UI. (IMHO)

[jord8on (Jordan)]

I love these category banners! Thank you for making this theme component!

I would love this banner to exist in the main home page of our forums where it shows:

• “Latest” Discussions or
• “Top” Discussions or
• “Categories” or
• “Following” (if you’re using the Follow Plugin )

Would there be an easy (ish) way to have there be a banner if someone selected each of these options, respective to what was selected?

[Rhidian (Rhidian Bramley)]

@awesomerobot , I hope you are okay with me sharing this here…

I’ve created a fork of this discourse-category-banners theme called

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

You can preview it here

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

It pretty much does the same thing but with some modifications:

• The category banner box is displayed in-line above the main heading instead of full width at the top. This allows for display a banner theme at the top, for example the discourse-versatile-banner.

• The category banner box is displayed in the same style as the native discourse subcategory boxes, which are a core component of discourse. These subcategory boxes are a display option in the discourse category settings Show subcategory list above topics in this category . This option displays the subcategory category name and description as a row or box above the topic list, using the category background colour as the left border.

• If the category is a subcategory, the category name is displayed as breadcrumb as follows - Parent category name: Subcategory name

Demo screen shot of theme banner box for the category, above the native subcategory boxes.

Screen shot of the subcategory, showing the breadcrumb reference to the parent category.

This is my first attempt at a theme modification. I hope this is helpful?

Update

I have refactored this adaption as a separate component - with many additional features including using the category logo image and background image in the header. This new component effectively replaces the standard Discourse category header, unlike the category banners, hence making it a new component. Please see:

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

Exceptions : if you don’t want a category to have a banner, add its name here

This isn’t working for us. I’ve tried both the category slug and the category ID, but the banner stays stubbornly there. Is this working for anyone else?

[awesomerobot (Kris)]

I just tried it and it works for me, it’s looking for the case-sensitive category name. In retrospect that was not the best way to implement it… I can probably improve that.

[nathank (Nathan Kershaw)]

Ah - that sort is for me! And you do state ‘name’ in the guide above - I just didn’t read that.

Name isn’t very intuitive as we don’t really use it for anything else. But it is displayed a lot. Just making it more explicit in the settings would be fine I reckon.

[AntiMetaman]

Instead of adding exceptions of what which categories will not show a given uploaded banner, can’t we just specify which category should show which banner?

[awesomerobot (Kris)]

Depends on the specific site and use-case I’m sure. My initial thought was that it would be more likely for a site to want it implemented everywhere, and if there were exceptions it would only be a few.

If you wanted to implement a banner for a small number of categories there might be a better theme component option that’s built to be a less generic cover-all, like Versatile Banner or customizing one of the options found in Banner themes (and instructions for customizing them)

[Idan]

Ce serait super de pouvoir télécharger une image pour remplacer le texte.

[oca]

Merci pour ce composant très utile !

Serait-il possible d’ajouter une petite fonctionnalité ?

• Ajouter la classe restricted à l’élément <span.discourse-category-banners> ou <div.category-title-header> lorsque la catégorie n’est pas publique, de la même manière que le badge de catégorie.

Cela serait utile pour personnaliser la bannière avec un CSS supplémentaire afin d’indiquer à l’utilisateur que cette catégorie est spéciale.

Actuellement, c’est possible mais compliqué de sélectionner l’icône de cadenas avec CSS pour effectuer certaines modifications. Comme CSS ne dispose pas de sélecteur de parent, je ne peux pas utiliser la présence de l’icône de cadenas pour vérifier si la bannière doit être modifiée.

Je ne sais pas encore vraiment comment faire des PR, mais je profiterais de cette occasion pour apprendre si vous êtes ouvert à ma modification.

[Drew-ART (Drew)]

Est-il possible de le faire fonctionner sur les pages de balises ? J’ai trouvé le plugin tag-banners, mais il ne permet pas d’ajouter du texte ou des liens.