New "Banner Topic" pin type

spec
rfc

(Jeff Atwood) #1

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

Discourse is intimidating to begin using?
Dismissable banner like on discourse.soylent.me
Top of the pages
Hiding Sub-Category Pin Topics
Any mass email functionality?
Dismissable text / image banner (new customer "experience")
Hero Image feature?
How to enable a banner topic?
Do we still need the blurb for pinned topics?
Custom html on home page
Custom Layouts Plugin
Global Banner Topic Phun
Idea: Welcome message area on the home page for anonymous users
Banner Topic on home page and only for anonymous users
How do I change this welcome message?
Display presentation in Categorie Home page
Adding designs to pages
How to change FAQ, Privacy Policy, and Terms of Service
(Dave McClure) #2

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?


(Jeff Atwood) #3

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.


(Dave McClure) #4

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

(Sam Saffron) #5

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


(Jeff Atwood) #6

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


(Benjamin Kampmann) #7

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?


(Jeff Atwood) #8

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.


(Régis Hanol) #9

It’s now in :tada:

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


Text info box in category header
(Benjamin Kampmann) #10

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


(Régis Hanol) #11

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


(Jeff Atwood) #12

OK this is now deployed and you can see it live on http://discourse.soylent.me

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


Help with custom javascript for manual banner ads
Dismissable text / image banner (new customer "experience")
Dismissable text / image banner (new customer "experience")
(Michael Downey) #13

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?


(Jeff Atwood) #14

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


(Michael Downey) #15

Cool, much nicer now.


(ampburner) #16

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


(Jeff Atwood) #17

@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!


Banner Topic - controlling how much or what text is shown?
(Régis Hanol) #18

This is now implemented :dolphin:

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


(Michael Downey) #19

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


(Régis Hanol) #20

Nope. That’s due to your custom header.