Discourse Category Banners

We are looking to add HTML codes and customize a banner specifically to one category and let the others stay as they are. Can someone please guide us on best practice on doing this?

Thank you.

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?

2 Likes

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.

3 Likes

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.

1 Like

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?

2 Likes

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)

4 Likes

Before the refactor, I used to be able to change the position of the banner via JS, is this still possible in the new version as well? I want to mount it above-main-container instead of below-site-header.

You used two times the same container

1 Like

Hah, thanks. I meant below-site-header.

1 Like

I think I can make it a site setting, makes sense to me. Will be above-main-container by default

1 Like

That would be wonderful, thank you!

1 Like

Ok it’s done in:

https://github.com/discourse/discourse-category-banners/commit/9be0d88905735ed519c0df01195cd145e4b71fc1

Default is actually below_site_header as it was the case before.

4 Likes

Hrm, somehow that did not have the effect I had hoped it would.

I you check out News & Events - Core Creator Forums, my goal is to have the banner below that grey menu line. I had this working before using:

<script
  type="text/x-handlebars"
  data-template-name="/connectors/above-main-container/category-header-widget"
>
  {{mount-widget widget="category-header-widget"}}
</script>

Also one thing I noticed is that on every plugin update, my uploaded background gets cleared, is there a way to let it persist through updates?

1 Like

Did you check the theme setting to have it above ?
It seems like you didnt:

2 Likes

Check now, I was testing the options.

1 Like

This is working as expected:

1 Like

So looks like on my site, I have two elements using below-site-header, how does Discourse decide which one it renders first?

My structure was:

  • Header
  • Extra Header/Menu Bar
  • Category Banner

Now it is:

  • Header
  • Category Banner
  • Extra Header/Menu Bar
1 Like

You can user order of css to change the order of children in a node: order - CSS : Feuilles de style en cascade | MDN

1 Like

Hrm yeah. Could you add above-main-container as an option as well?

1 Like

I can’t update this component anymore. It says ‘Internal Server Error’ with no other details.
Other components upgrade fine. This one is 3 commits behind now.

Any ideas?

4 Likes