Topic Banners component

theme
#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

11 Likes
Show component only to a specific group via script?
#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)

2 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.

2 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)
1 Like
#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?

1 Like
#6

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

1 Like