Topic Banners component

Theme component
1

This component lets you render any topic as a banner on custom url paths.

The default look is pretty basic. The screenshot shows the default Welcome topic as a banner on the Latest list:

Screenshot from 2022-01-27 14-42-15
Screenshot from 2022-01-27 14-42-15892×882 70.2 KB

But banners will render various content that is supported on topics, e.g. emojis, animations, video links… So you could use (and abuse) this in many ways :see_no_evil:

In Settings, you select views by their relative url and topics by their id. You can also position the banners on one of three different plugin-outlets and only show them to a specific group:

Screenshot from 2022-01-27 15-41-37
Screenshot from 2022-01-27 15-41-37715×702 49.1 KB

:+1: Credits: The widget code for this component is essentially a copy of the Category Sidebars component by @awesomerobot and, as I take it, @xrav3nz
:hammer_and_wrench: Repository GitHub - nolosb/discourse-topic-banners: A Discourse theme component. Renders any topic as a banner on custom url paths.
:question: Install Guide How to install a theme or theme component

Install Theme Component

16 Likes
2

Does this include polls (which you can interact with)? (it’s been something we miss a lot, to put a poll visible to everyone instead of hidden somewhere in a post)

3 Likes
3

Good question! But no, just tried it out:

Screenshot from 2022-01-27 19-20-24
Screenshot from 2022-01-27 19-20-24828×308 7.4 KB

The poll would show as on the composer preview. You can’t interact and it also doesn’t show results.

3 Likes
4

I found a bug in this component, when it is enabled and configured to show the topic of only a specific group.

If the guest or users attend the forum not from this group, the pages update works incorrect, the other topics are not load after page refresh in browser.

Console:

Uncaught TypeError: Cannot read properties of null (reading 'groups')
    at n.html (68eb2e30e7629f8db22df6fed8efb777b0183d8d.js?__ws=mydomain.com:114:36)
    at n.value (application-8b970b30b88888346a1f4d53543a21332202376215babe59aa315ac2054a2627.js:sourcemap:1:3239172)
    at n.value (application-8b970b30b88888346a1f4d53543a21332202376215babe59aa315ac2054a2627.js:sourcemap:1:3235241)
    at s (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:90601:45)
    at t.exports (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:90584:21)
    at m (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:90988:17)
    at h (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:90856:9)
    at d (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:90843:5)
    at n.rerenderWidget (application-8b970b30b88888346a1f4d53543a21332202376215babe59aa315ac2054a2627.js:sourcemap:1:1455271)
    at t.invoke (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:66550:16)
    at e.t.flush (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:66442:13)
    at e.t.flush (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:66646:21)
    at e.n._end (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:67222:34)
    at e.n.end (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:66908:12)
    at e.n._run (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:67277:16)
    at e.n._join (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:67251:21)
    at e.n.join (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:66968:19)
    at h (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:53760:28)
    at HTMLDocument.<anonymous> (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:53864:19)
    at l (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:3776:29)
    at c (_vendor-0cf07f050f530b08ccc553a048b7cccd4edb486adc39b865c07d6c6c1cc57fbf.js:3844:12)
2 Likes
5

Thanks for posting this! I could only replicate an error when no user is logged in and I added a fix for that. Could you update the component and try again?

3 Likes
6

Yes, now it’s work! Thank you! :heart:

2 Likes
7

ohh, this is awesome! great theme-component as it allows a nice individualisation of each category which seems far superior to the category banner theme component of official - but i might be mistaken

in that sense it might be good to add category banner to the title of the post.

on top this component even can serve the homepage

2 Likes
8

Hi there, thanks for sharing!

There is no plans to add close button over the banners?

1 Like
9

I’m not sure the component is a good replacement for category banners. Some caveats:

  • it will load much slower
  • it will not hold dynamic content. E.g. when you change the category name, it won’t update on the component
  • it’s also more complicated to set up

That being said, I’d be curious to see how you use it that way :slight_smile:

I only have on use case for this component myself right now, that is serving an expanded intro topic in one community. No plans to add to the component right now.

10

@nolo Digging out this one, testing on 3.1.4 currently.
But the " show to group" setting is not working when I add a specific group. Tried case sensitive, but the banner topic is not displayed. When the setting is empty, then it works. Any idea?

1 Like
11

Oh yeah, the component will need some re-factoring… There’s quite some code and I don’t even have a use case myself any longer. Could we tag this as un-maintained?

@jrgong don’t know what you are trying to set up, but you could probably try this Announcement Bar component? It’s styled for a bar layout by default, but with a bit of css and putting it on the above-main-container outlet it can be very similar. Needs html instead of markdown. No group features either, but big advantage is it’s disposable.

3 Likes
12

@nolo thx for the tip. We will check it out once stable 3.2 is out. the Announcement bar tc is not compatible with 3.1

1 Like
13

I’ve applied the tag :+1:

3 Likes