Kategorie-Banner

[Discourse]

	Zusammenfassung	Category Banners verwendet vorhandene Kategoriedetails, um Banner für Ihre Kategorie-Seiten zu erstellen (für Tags siehe Discourse Tag Banners).
	Vorschau	Vorschau im Discourse Theme Creator
	Repository-Link	https://github.com/discourse/discourse-category-banners
	Neu bei Discourse Themes?	Anfängerleitfaden zur Verwendung von Discourse Themes

Dieses Theme-Komponente installieren

Da dies eine official Theme-Komponente ist, die vom Discourse-Team gepflegt wird, können Support, bug, ux und #feature-Anfragen in den jeweiligen Kategorien hier auf Meta gestellt und mit dem entsprechenden Theme-Komponenten-Tag versehen werden. Klicken Sie auf einen der folgenden Links, um einen zu erstellen.

 Support  Bug  UX  Feature

Funktionen

Category Banners verwendet vorhandene Kategoriedetails, um Banner für Ihre Kategorie-Seiten zu erstellen. Es nutzt den Kategoriennamen, die Beschreibung und die Farbe, um ein Banner oben auf den relevanten Kategorie-Seiten zu generieren (für Tags siehe Discourse Tag Banners).

Die Kategorienbeschreibung wird durch den ersten Absatz im Thema „Kategoriedefinition für …" jeder Kategorie definiert. Die Banner-Hintergrund-/Textfarben werden durch Ihre Kategorie-Abzeichen-Einstellungen festgelegt.

Standardmäßig wird dies auf Desktop und Mobile auf allen Kategorie- und Unterkategorie-Seiten angezeigt, erscheint jedoch nicht, wenn Sie Ihrer Kategorie keine Beschreibung gegeben haben.

Einstellungen

Diese Komponente bietet Optionen, um die Standardwerte zu überschreiben:

Name	Beschreibung
show description	Beschreibung aus dem Beitrag „Über diese Kategorie" anzeigen
show mobile	Banner auf Mobile anzeigen
show subcategory	Banner für Unterkategorien anzeigen
hide if no description	Banner ausblenden, wenn keine Kategorienbeschreibung festgelegt ist
show category logo	Kategorie-Logo anzeigen
align text
exceptions	Banner wird nicht für diese Kategorie-NAMEN angezeigt
categories	Kategorien, für die ein Banner angezeigt werden soll
plugin outlet	Ändert die Position des Banners auf der Seite
show category icon	Kategorie-Symbol oder Emoji aus den Kategorie-Einstellungen anzeigen *
override category icon color	Wenn Kategorie-Symbole verwendet werden, sorgt die Aktivierung dieser Option dafür, dass das Symbol der Banner-Textfarbe entspricht

• Hinweis: Diese Einstellung bezieht sich nun auf das Kategorie-Symbol oder Emoji, das in den Kategorie-Einstellungen festgelegt ist, nicht auf die Theme-Komponente Category Icons (die zugunsten der Kernfunktion veraltet ist).

Hinweise zur Anpassung

Wenn Sie diese mit etwas zusätzlichem CSS anpassen möchten, können Sie spezifische Kategorie-Header mit dieser Struktur ansprechen (example-category ist Ihr Kategorie-Name):

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

Diese Komponente fügt dem Body-Tag zusätzlich die Klasse category-header als CSS-Ziel hinzu.

Von uns gehostet? Theme-Komponenten können in unseren Standard-, Business- und Enterprise-Plänen verwendet werden.

[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 the content in HTML

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

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 - Cannabisanbauen.net Forum

[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, ich hoffe, es ist in Ordnung, wenn ich das hier teile…

Ich habe eine Fork dieses Themas „discourse-category-banners“ erstellt, die

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

heißt. Du kannst sie hier in der Vorschau ansehen:

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

Sie macht im Großen und Ganzen das Gleiche, jedoch mit einigen Anpassungen:

• Das Kategorie-Banner-Box wird inline über der Hauptüberschrift angezeigt, anstatt in voller Breite oben. Dies ermöglicht die Anzeige eines Banner-Themas oben, beispielsweise des „discourse-versatile-banner“.

• Das Kategorie-Banner-Box wird im gleichen Stil wie die nativen Discourse-Unterordner-Boxen dargestellt, die ein Kernbestandteil von Discourse sind. Diese Unterordner-Boxen sind eine Anzeigeoption in den Discourse-Kategorieeinstellungen Unterordnerliste über den Themen in dieser Kategorie anzeigen. Diese Option zeigt den Namen und die Beschreibung der Unterordnerkategorie als Zeile oder Box über der Themenliste an, wobei die Hintergrundfarbe der Kategorie als linker Rand verwendet wird.

• Wenn die Kategorie eine Unterordnerkategorie ist, wird der Kategoriename als Breadcrumb wie folgt angezeigt – Name der übergeordneten Kategorie: Name der Unterordnerkategorie.

Demo-Screenshot des Themen-Banner-Box für die Kategorie, über den nativen Unterordner-Boxen.

Screenshot der Unterordnerkategorie, der die Breadcrumb-Referenz zur übergeordneten Kategorie zeigt.

Dies ist mein erster Versuch einer Themenanpassung. Ich hoffe, das ist hilfreich!

Update

Ich habe diese Anpassung als separate Komponente refaktoriert – mit vielen zusätzlichen Funktionen, darunter die Verwendung des Kategorie-Logo-Bilds und des Hintergrundbilds in der Kopfzeile. Diese neue Komponente ersetzt effektiv den Standard-Header der Discourse-Kategorie, im Gegensatz zu den Kategorie-Bannern, und ist somit eine neue Komponente. Bitte siehe:

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

Ausnahmen: Wenn eine Kategorie kein Banner haben soll, fügen Sie ihren Namen hier hinzu.

Bei uns funktioniert das nicht. Ich habe sowohl den Kategorie-Slug als auch die Kategorie-ID ausprobiert, aber das Banner bleibt hartnäckig bestehen. Funktioniert das bei jemand anderem?

[awesomerobot (Kris)]

Ich habe es gerade ausprobiert, und es funktioniert bei mir. Es sucht nach der groß-/kleinschreibungsabhängigen Kategorie name. Im Nachhinein war das nicht die beste Implementierung… Ich kann das wahrscheinlich verbessern.

[nathank (Nathan Kershaw)]

Ah – diese Art ist genau das Richtige für mich! Und du erwähnst „Name

[AntiMetaman]

Statt Ausnahmen hinzuzufügen, welche Kategorien ein hochgeladenes Banner nicht anzeigen sollen, können wir nicht einfach festlegen, welche Kategorie welches Banner anzeigen soll?

[awesomerobot (Kris)]

Das hängt sicher von der jeweiligen Seite und dem Anwendungsfall ab. Mein erster Gedanke war, dass es wahrscheinlicher ist, dass eine Seite eine flächendeckende Implementierung wünscht und Ausnahmen nur in wenigen Fällen auftreten würden.

Wenn Sie ein Banner nur für eine geringe Anzahl von Kategorien implementieren möchten, gibt es möglicherweise eine bessere Theme-Komponente, die weniger allgemein gehalten ist, wie z. B. Versatile Banner, oder Sie können eine der Optionen anpassen, die unter https://meta.discourse.org/t/banner-themes-and-instructions-for-customizing-them/82368 zu finden sind.

[Idan]

Es wäre toll, ein Bild hochladen zu können, um den Text zu ersetzen.

[oca]

Danke für diese sehr nützliche Komponente!

Wäre es möglich, eine kleine Erweiterung hinzuzufügen?

• Füge der restricted-Klasse das Element <span.discourse-category-banners> oder <div.category-title-header> hinzu, wenn die Kategorie nicht öffentlich ist, genauso wie beim Kategorie-Abzeichen.

Das wäre nützlich, um das Banner mit zusätzlichem CSS anzupassen und dem Benutzer zu zeigen, dass diese Kategorie besonders ist.

Derzeit ist das zwar machbar, aber kompliziert, das Schloss-Symbol mit CSS auszuwählen und etwas damit zu machen. Da CSS keinen Eltern-Selektor hat, kann ich das Vorhandensein des Schloss-Symbols nicht nutzen, um zu prüfen, ob das Banner angepasst werden soll.

Ich weiß noch nicht genau, wie man Pull Requests erstellt, aber ich würde dies gerne als guten Anlass nutzen, es zu lernen, wenn du meine Änderung unterstützen würdest.

[Drew-ART (Drew)]

Lässt sich das auf Tag-Seiten funktionsfähig machen? Ich habe das Plugin tag-banners gefunden, aber es bietet keine Möglichkeit, Text oder Links hinzuzufügen.