Versatile Banner

First of all, many thanks for this amazing theme component. It really is versatile and does its name honor.
In our use case I see two features which would bring it up to the next level, and was just wondering what the chances are for the following to materialize:

  • Show only or don’t show for certain groups (similar to " show for members" or “show for anon”, but for groups)
  • Be able to show separate content for anon vs. members

For us, the first suggestion is by far the most important one.

Thoughts?

2 Likes

This part should be easy – just add a second copy of the component, then configure one for logged-in users and the second for anonymous users. Voilà!

1 Like

Hi All,

Looking at this thread I’m a bit lost on the option to have unique banners on different pages.

Initially it’s possible to hide the banner with CSS Versatile Banner
Then I read that installing twice won’t work Versatile Banner

So I’m wondering if there is any way (right now) to still work with CSS or so to get multiple versions of the component working.

Looking forward to suggestions.

1 Like

Hi Jeffrey,

Currently, there is no way to use multiple versions of the component at the same time since they would be competing for the same plugin outlet. This component is definitely due for a revisit, so I’ll try to see what I can come up with as far as allowing different banners for different pages in the next couple weeks.

8 Likes

Ah, that’s a shame but thank you for clearing up the confusion :slight_smile:

Would be great if there is an option, so will keep an eye on this thread then.

2 Likes

hi, I wanted to use this feature to show different banners to logged-in and anonymous users. to do so, I have installed the theme twice with different names: banner-1, banner-2. one is visible to anon and the other visible to logged-in.

then activated both banners!

but the anon banner, is not shown. and I guess it’s because of similar class names of both banners.

is it so?

is there any way to fix this problem?

1 Like

Not at the moment, unfortunately. As mentioned:

I haven’t had a chance to dive back into this component yet, but it is very prominent on my to-do list. I’ll post an update to this topic as soon as I have news :slight_smile:

9 Likes

thanks @tshenry :heart: , I’d be looking to see this great change.

2 Likes

@tshenry I made a custom banner by myself, but I’m trying to show it only in the “categories” page. How can I exclude from another tabs with css/html? Can you point out in the code?

And just another question. It’s possible to show a custom banner just in a specific/url topic?

2 Likes

Hi @tshenry,

We are using the versatile banner on our forum (www.fellowshipforums.com), and the link text colour doesn’t seem to be responding (see third column). Here are the details:

Link text colour: #75effa
Third Column Content:

<h3>Getting Started</h3><p>  

Read our 
<a href="https://www.fellowshipforums.com/t/welcome-to-the-fellowship-forums-click-here-to-start/396">Welcome Post </a>
to learn how you can get started using FF!<p> 

Does anyone have any thoughts as to why this is happening? Note: I put a few space in the above code so that the code shows here.

Thanks!

3 Likes

@tshenry when I activate the theme-component, my menu-panel’s class changes from “menu-panel drop-down” to “menu-panel slide-in”. I am not using any other components. The change only happens when I activate the plugin. Any idea for how to make it go back to being a dropdown rather than a slidein?

Also looking froward to the different banners on different pages update! :grinning:

2 Likes

I had trouble getting this to work in a way that didn’t feel “jumpy” when moving between pages that had a banner and those that didn’t. CSS wasn’t cutting it, so I made use of widgets to determine whether the banner contents should even be rendered. I imagine you are just using basic HTML and CSS, so the solution I came up with is not going to work. Your best bet is to use this component and make the end result look like the one you created yourself. If that’s not an option, you can try CSS, but you will likely find that it doesn’t transition between hiding and showing very smoothly:

// Only show banner on the categories page
body:not(.categories-list) .merlls-banner {
    display: none;
}

It is with this component :wink: I handle this with widgets once again. You won’t be able to use CSS to control this at an individual topic level.

This was my fault! I forgot to add the link text color rule to the CSS. It should be fixed when you update. Thanks for brining this up :slightly_smiling_face:

The menu panel changes from dropdown to slide-in depending on if you are viewing the site in desktop mode or mobile mode. When I add the component to my site, nothing changes with the menu panel. If for some reason you are in mobile mode when you are supposed to be in desktop, open the hamburger menu and click on the “Desktop View” link at the very bottom.


I have been actively thinking about and trying ideas for different banners on different pages, but haven’t found a solution I like at this point. As mentioned before, I will update when I have news.

9 Likes

Thanks for the quick fix!

2 Likes

How would I customize the buttons?

Can you clarify which buttons you are referring to, and what you are looking to customize about them?

3 Likes

Hey @tshenry,

We just need this functionality, I thought this was already implement reading this comment. What’s preventing the plugin to work with multiple with many instances? or is a limitation of how Discourse theme components work?

I’m taking a look at the code to see if I can add this but still without luck.

Thanks for the plugin, is exactly what we were looking for

2 Likes

I found a way to make it work, but it is a hack. There are some limitations on themes that I couldn’t find a way to workaround.

The reason you can’t have multiple instances of this theme component is that components and templates get overwritten by other instances when loaded. Theme components don’t have a mechanism to isolate them from other instances of the same theme components, or other theme components.

This is what I did to make it work. You can see the code here in our fork https://github.com/debtcollective/discourse-versatile-banner/commit/8186c270791b3ca9efe12a03a13df8650fde6f1d#diff-205b3664fad9eeffe9cbaf774705b106)

1. Namespace components

We have a function called themePrefix and a helper in Handlebars called theme-prefix that Discourse provides. These two are used for I18n but I’m using them to include the theme component id in names, so don’t get overwritten when loading multiple instances of the same component.

api.createWidget(themePrefix("banner-box-widget"), {
  ...
});

We mount the component using the Handlerbar helper

<script type="text/x-handlebars" data-template-name="/connectors/custom-banner/banner">
  {{mount-widget widget=(theme-prefix "banner-box-widget")}}
</script>

2. Namespace plugin outlets

To prevent instances render more than once, we have to namespace the plugin outlets too.

3. Namespace Handlebars template

We cannot set the name of templates dynamically, to solve this I just edited the name of the templates after installing the plugin so they don’t get overwritten.

I think we can add namespacing templates to Discourse by adding the @theme_id to the Ember template name by modifying these two methods.

https://github.com/discourse/discourse/blob/master/lib/theme_javascript_compiler.rb#L177
https://github.com/discourse/discourse/blob/master/lib/theme_javascript_compiler.rb#L191

Adding this will prevent theme components to overwrite each other accidentally.

Conclusion

This workaround is far from ideal for multiple reasons, one of them is you are still loading CSS and JavaScript for each instance of the theme every time. This can be a problem if you have a lot of banners installed. I think a way to make it better is if this plugins allows to create multiple banners with just one instance, but I don’t have idea how to make that work.

We have this live in our Discourse instance https://community.debtcollective.org/. There’s a banner for the homepage and a banner for a specific category https://community.debtcollective.org/c/student-debt-collective.

We will continue using this banner, I was about to start writing our own before I found it and this one uses a better approach. I was thinking of displaying images instead of HTML/CSS. If there’s a way we can help to make it better just let me know :slight_smile:

Thanks!

8 Likes

Hi all,

how do i make my banner buttons:

look like these banner buttons:

2 Likes

@eatcodetravel, that’s super cool! Thanks for sharing all of that. It looks like you ran into all of the pain points I did :smile:

I haven’t 100% given up on an ideal theme component solution for multiple banners. I have some ideas I’ve written down that I will look into at some point. In the mean time, hopefully users can take inspiration from your solution if they are in a bind.

It’s possible the multi-banner feature is best suited as a plugin. If you look at how the House Ads work in the Advertising plugin, that seems like a perfect system to manage multiple banners. I may look into that as an option long term, but we’ll see.


@Joshua_Kogan, that can be accomplished by adding some custom CSS to a new theme component. You can use your browser inspector to find the CSS rules of the buttons on that site to get an better idea of what you will need to do to accomplish that kind of style.

7 Likes

Hello Tylor,

the Verstile banner is turning the sidebar into fixed.
the sidebar is sticky but when activating the component is turning into fixed, disabling the component making the sidebar sticky again can move with scrolling.

2 Likes