New "Banner Topic" pin type

One thing we’ve noticed is Discourse sites putting welcome banners up, like this:

Technically this site welcome function is covered by the pinned welcome topic

But clearly we need something a bit more… obvious… for new users, as this is a recurring user-created design element on multiple Discourse sites. We also noted in a random usability test that a new arriving user indeed never found or read the pinned topic, at all. :warning:

We proposing adding a new type of topic “pin” called banner, like so:

This does the following

  • in general this is similar to “pinned topic” but even more prominent. There can only ever be one banner topic at any given time. If you make one topic a banner, the previous banner is un-bannered automatically.

  • when a topic is bannered, we insert the standard “this topic is now a banner…” staff message in the stream. (and when removed) very similar to the way pinned topics behave.

  • the current banner topic inserts the latest revision of the first post content into a dismissable banner at the top of all pages, with some exceptions (user pages? 404 page? but definitely topics and topic lists)

  • anonymous users can dismiss the banner by clicking the traditional big :negative_squared_cross_mark: in the right hand corner. This will be saved in local storage.

  • logged in users can dismiss the banner in the same way, except their preference is stored permanently in their user profile.

  • the banner key should be unique so dismissing the current banner does not necessarily dismiss a future banner. This should be held by topic id – edits to the topic first post will not make the banner re-appear.

  • we provide a “read more” link at the bottom of the banner topic that drives users to the banner topic if they want to discuss it further.

You can see the key elements here in an example from superuser.com as an anonymous user:

  • banner content (from first post)
  • dismiss button at upper right
  • “read more” button at bottom left
30 Likes

Should styling be a part of the spec?

Will the sexy banner styling come out of the box? Where would that be overridden?

Do images get automatically sucked out of the topic?

2 Likes

Styling beyond what we support in a post will have to be supported later.

Ideally an admin could edit the raw HTML of a post if needed, though that should be a rare need.

Just a thought for v2 then:

Taking direct inspiration from what you’ve shown from SmartThings: Have out-of-the-box styling along those lines, with these site settings:

  • banner_background_image
    (big banner image)
  • banner_background_color
    (gradient over image to make text readable)
  • banner_foreground_color
1 Like

If the structure is good we can just use standard CSS to style it.

3 Likes

We could take any image in the post and justify it right, that seems to be a common pattern and simple enough.

4 Likes

Interesting. We were thinking of building such a thing on a category basis (because it would be different per category) using the new custom_fields as a plugin. But I’d also love to see a general banner-topic in core. I might get around working on it over the weekend. Unless anyone else picks it up before.

How do we want to deal with responsiveness of the banner-topic though? Should it always be 100% width and do we want to add support for responsive images or something?

2 Likes

If you are still interested in the IP information lookup panel, I’d prefer that working first – @zogstrip has this feature on his plate since it is on our list for V1.0.

1 Like

It’s now in :tada:

https://github.com/discourse/discourse/commit/00117c18c3c7838d89be8e0cf18da1bb2f01bd17

8 Likes

Oh, you are using a new archetype for this. Interesting approach! Which also means … I can hack this to support category-based-banners :smiley: .

2 Likes

Figured we might need a different UI to handle these topics.

OK this is now deployed!

Use the admin wrench on a topic to make a topic a banner topic.

3 Likes

We put this up on https://talk.openmrs.org/ earlier when it came out, but what’s the best way to do that colored background and rounded corners? CSS customization in the admin settings?

Get latest code is the easiest way… it has default styling now.

1 Like

Cool, much nicer now.

@codinghorror does this also include images in the topic? Do they automatically get added to the banner?

@ampburner yes you can use images, they will appear.

One thing I missed @zogstrip, right now the banner only shows up at the top of the page. We also need to overlay the banner in the case that users deep link to a post inside a topic, like so:

Because when you arrive through a deep link URL, that’s when you need a “what the hell is this place” introduction the most!

4 Likes

This is now implemented :dolphin:

https://github.com/discourse/discourse/commit/4878d88cbd9f31d059242028a583e44aa1075534

2 Likes

This looks pretty good, but was the intention to have a margin above like this? :fishing_pole_and_fish: :dolphin:

Nope. That’s due to your custom header.

1 Like