Discourse Popular Tag Sidebar

This theme component displays a category’s most popular tags in a sticky sidebar on screens wider than 767px (most tablets and desktop devices).

:warning: You must enable the show filter by tag setting on your site for this theme component to work.

What can I do with this theme component?

  • Display 3-30 Popular tags in a sidebar for each category

  • Set the sidebar side to left or right

  • Prevent the sidebar from appearing in certain categories

  • Change the “Popular tags” header text

Custom CSS

Each sidebar is wrapped with a class that contains the category name, so for the UX category that would be .ux-sidebar. You can use these classes to style individual sidebars.

The html tag on pages with sidebars also has a class added so you can use html.custom-sidebar to apply styles on all pages that have a sidebar.

Install this theme component

41 Likes

this would make an incredibly powerful navigation tool if it showed the most common in each category and tag-page and it was positioned in a banner, or other item at the top of the page.

3 Likes

Very nice work.

I can see the sidebar only on the page of first category in the list of categories.

How do I enable it for all categories?

1 Like

The tags sidebar that appear on the parent category include both parent category tags and child category tags. To enable it for all categories and subcategories you need to change the code here https://github.com/awesomerobot/discourse-popular-tag-sidebar/blob/master/desktop/header.html.

2 Likes

Right now, it shows only for the first category on categories page

So, which part of code i need to edit and how can i get it for all page.

Please help with details. Sorry and thanks

Can you help with that change? I do not understand the coding that much. Please help

It appears only on first category in category list. Not in any other one. Please help

2 Likes

Is there any way to display it above the topic list instead?

In case you weren’t aware, there is already an optional tag drop-down in vanilla Discourse (shown in the image above) which appears above the topic list.

image

3 Likes

I understand, yet for my purpose I want to display a list or sort of tag cloud instead

3 Likes

Yes, I"m having that problem too. Is there a fix?

I see that it works on Category pages now. But is there away to get it to work on the Latest thread?

Can you describe this problem a little more? The sidebar only appears for one category and no others?

Do all the categories you’re trying have topics with more than 3 tags? the sidebar won’t show if there are less than 3 tags within a specific category.

Yes, I think I can add some support for other pages

1 Like

Just a question… when i click Tags from Tags Sidebar, the URL is https://www.example.id/tags/c/sub-categoriy/Tags-name

There is no problem when i click directly (same page), but when i right click, open in new tab, there is message “Oops! That page doesn’t exist or is private.

Why the URL format not like normal url tags, https://www.example.id/tags/tag-name

Another question, how to add space between text (tag) not 1 or 1,5 (not sure), but 2.

Thanks a lot

1 Like

I’ve added a feature to optionally show the tag sidebar on the top menu pages (latest, top, new, etc). It’s disabled by default, you can enable it in the theme component’s settings.

https://github.com/awesomerobot/discourse-popular-tag-sidebar/commit/75b3eacba7d23d76198f6adf1209f66e1da4e4f2

That was my mistake, I didn’t consider subcategories and restructure the URL to fit. It’s fixed now.

That URL shows all the tags across all categories, when you’re within a category and click a tag in the sidebar I wanted to make it so you’re viewing that tag within the context of the current category.

I’m not entirely sure what you mean, can you give me a specific example?

1 Like

Wow… it works now when i open it in new tab… Thanks a lot…

Sorry for my bad english :grinning:

“Add space” means change line spacing (like in MS Word) to 2, which currently looks like 1 or 1.5, so there is more space between tags

image

Also, can i change the color of tags text ? From blue to gray

Another question, can the popular tags always be seen?

image

When I scroll down, the words Popular tags are not visible, only the list of tags is visible.

image

Once again… Thank you so much for your help

oh ok, you can add some css to your theme (admin > customize > themes) like:

.tag-sidebar a:nth-of-type(2) {
    margin-top: 5px;
}

similar for text color

.tag-sidebar a {
    color: red;
}

This is probably an issue with your current theme, you can adjust the sidebar top position like this:

.topic-list.with-sidebar > .tag-sidebar {
  top: 120px;
}

These are all general CSS changes… if you want to make more style changes like these I suggest following a few CSS tutorials, CSS first steps - Learn web development | MDN is a good free one!

5 Likes

Hi , I have issues on line 31: https://github.com/awesomerobot/discourse-popular-tag-sidebar/blob/master/desktop/header.html

Can you help me check this error?

What is the reason for max 30 tags?

hi Kris !
I wonder if the option number_of_tags wasn’t lost with this commit ? :thinking:
https://github.com/awesomerobot/discourse-popular-tag-sidebar/commit/be3b14e6e7a87daf1449f8f9c381d3cd76ffb297

2 Likes

would be really cool if the max # of tags was increased to 100 and displayed in a responsive-filled height of a bubble text cloud sorted alphabetically. in other words, the more popular a tag the larger its font size. the “top 100” tags.

also, would be good if it was positioned horizontally above category lists for mobile. i really want this for mobile. :star_struck:

Hi,

How can I display the popular tag list below the header? Please give me suggestions.

Thanks

1 Like

Unfortunately, this component conflicts with Discourse Tag Sidebars. When I enable both, I get all of the tags smooshed into one line, like this:

And tag sidebars don’t show up at all.

This is unfortunate, because these should be complimentary: the tag list for “all tags” view (and possibly also “no tags”), and the sidebar for specific tags. In fact, maybe they could be combined into a single component?

1 Like