Tag Banners

Really excellent theme component! Is there any way to display banners for lists that are using both a category and tag simultaneously?

1 Like

Not at the moment… at some point it probably does make sense to combine this tag component with the category banner component… then where the banners are shown can probably be handled in the theme settings if someone wants it one way or another.

3 Likes

I think I found a way. I will post a PR tonight probably if I manage to get it work.

Edit: Alright PR is ready
https://github.com/discourse/discourse-tag-banners/pull/1

5 Likes

Fantastic! :smiley: Thanks @radek3911!

3 Likes

This component is working really well with categories banners now :slight_smile: Category (or subcategory) + tag will display both the category and tag banner. Really awesome, thanks @awesomerobot! :100: :partying_face:

Have a suggestion for the tag banner. There is an Discourse option ‘force lowercase tags’ which is enabled by default. If it is disabled, then tags can have upper and lowercase characters. I’ve used custom CSS as a work around (text-transform: capitalize) for capitalising first characters in the tag banner where needed, but would be nice if this component supported uppercase as well (like the Discourse tag drop down filter does currently). E.g. ‘Mytag’ and ‘MyTag’ will both be displayed as ‘mytag’ in the banner currently (without custom CSS).

Edit: Just noticed I think there is an issue with the tag banner on mobile. The tag text gets pushed up to the top of the banner. I’ve attached a screenshot from the theme creator preview. The same thing happens on Discourse instances I’ve tested.

3 Likes

@awesomerobot

To fix the issue above with the tag getting pushed up to the top of the banner on slim screens, I recommend adding this CSS class by default:

.tag-title-header {
    align-items: center;
}

If anyone wants to fix this immediately, you can add this to your custom CSS.

2 Likes

Now that tag descriptions are officially a thing, it would be nice to have the header show both the name and the description rather than just the name.

8 Likes

Yes, that would be really great!

3 Likes

Hmm. @sam do we have time to get this in? I agree the description should show for the tag… but I’m thinking of core, so maybe doesn’t apply to this theme component.

3 Likes

I think this is actually not caused by the component, but by the way tags are resolved from other ux elements in Discourse. I have upper-case tags on a site:

Screenshot from 2022-01-19 20-41-34

When I select the tag from the topic list item above, it directs me to /tag/tips. And then the banner shows “tips”.

But when I navigate to to /tag/Tips, the banner shows “Tips”.

2 Likes

Hmm yeah, it’s been a while, but if I recall correctly the issue was that the tag banner wouldn’t capitalise the tag like the rest of the UI. The tag url would stay lowercase, but that is expected and ideal imo.

I’ve just made an update that adds tag descriptions here. Let me know if you encounter any issues with the new feature!

I also fixed some misalignment on mobile.

8 Likes

Saw this on two instances: the banner doesn’t show when a tag uses hyphens and remove tag hyphen is enabled.

2 Likes

The remove tag hyphen is nice, but can you also add an option for underscores?

This probably does the trick:

But can’t test it out yet, because the same bug is present as with the hyphen option. When enabled, the tag banner disappears.

1 Like

Is anyone else having an issue with remove tag hyphen? For me the tag banner disappears when I turn this option on.

2 Likes

Once the plugin works again, I’ll submit a PR for the underscore replacement. But I’m also considering to add an option to capitalize the first letter of a tag. So e.g. #open_source would become “Open source” in the banner. I could also add another option to capitalize every word, e.g. “Open Source”. But before doing that I need a working base to be able to test these changes. Hopefully it can be fixed soon.

1 Like

Hello, is it possible to modify this theme so that it also shows the banner once you enter a topic that has the tag? Would it be an easy addition?

I am trying to modify this theme to include a featured topic in the banner. I need to obtain the topic_id to generate the necessary url, but I only have access to the external_id of the topic (external_id is derived from a value in the description so I already have access to the external_id).

Is there way to obtain the topic url? I am quite new with discourse plugins and couldn’t figure how to fetch such an information via the javascript library.

The ideal output is as follows and it essentially let’s us pin a topic to a tag page.:

Thanks for your patience everyone! I’ve fixed the issue with hyphen removal, and also added the option to remove underscores.

3 Likes

Thanks for fixing the plugin @awesomerobot, and including the option to remove underscores :tada: I just tested a commit in my fork to capitalize tags, it works with formattedTagName. Although I’m not sure how this would work with formattedAdditionalTagNames. But in any case I already notice an issue. Some tags are acronyms, such as PDF. Just capitalizing the first letter doesn’t look right. Of course a list of tags could be inserted to include words like PDF and others and then treat those differently and do toUpperCase() them fully. But for instances that allow community members to create tags, that becomes difficult to keep consistent. So I guess I’ll just leave tags as they are, lowercase. Unless there are smarter solutions?