Filter topic with specific tag inside single category

feature
1

Running with the ideas discussed in Category Conundrums Two Deep, I’d like to take another stab at filters, but mainly to do with the Tagger plugin this time. In short, I want users to have the ability to use Tags for topic-sorting in combination with Categories, not as an alternative to it.

How it currently works:

Here I am already in the CSS category, browsing available tags.

discourse-tags1.png1028×1042 27.3 KB

But what happens when I try to drill further down by clicking the “css3” tag? The Category tab is reset to “all categories”.

discourse-tags2.png2281×836 59.4 KB

This is not what I want!

How it should work

My assumption is that the all categories and all tags buttons work the same, and that changing the condition of one will not affect the condition of the other. Therefore, if you already have the category CSS selected, clicking the CSS3 tag should specify your query even further, showing only topics within the CSS category, containing the CSS3 tag.

discourse-tags3.png2307×1214 83.8 KB

The obvious problem here is that the Categories column overshadows the tags. Looking at this screen, it’s easy to forget that you’re not in fact looking at all available CSS topics – the ones without the CSS3 tags are not present! I believe suppressing the categories column (or replacing it, with tags in such instances) is a discussion well worth revisiting.

4 Likes
2

Yep, this is a known limitation in tagging so far. That tags are globally searched and can’t be pinned to a category yet. Not sure if it is on any priority list to fix though…

3

I’m hoping they can look at it from both sides (Tagger-plugin and Core) when it’s time to focus on improved extensibility in v1.2 (the development of which should be starting any day now!)

1 Like
4

This is looking really good. Tagging like this is a huge feature asked for by my members.

5

It seems this is possible now, to a certain extent. Example on meta:

https://meta.discourse.org/tags/c/feature/docker

Screen Shot 2015-12-05 at 22.04.21.png2332×760 124 KB

https://meta.discourse.org/tags/c/dev/docker

Screen Shot 2015-12-05 at 22.04.44.png2292×866 141 KB

Here on Meta we’ve got Show a dropdown to filter a topic list by tag. turned off, which makes sense for the site in general but results in a somewhat awkward display for a (not-meant-to-be-used-here) URL like this, since you’ll have to look at the recurring category to realise that you’re filtered to not just a specific tag, but a specific category as well.

Here’s an example with that setting turned on:

Screen Shot 2015-12-05 at 22.05.15.png2318×972 176 KB

Also, not that many people would notice, but the URL structure is a bit weird.

Current structure: /tags/c/{categoryName}/{tagName}

Expected structure: /c/{categoryName/tags/{tagName}
(especially makes sense when the view is as on namati.org)

So I’m just here to say it’s cool to see this apparently made it in at some point!

What would be really cool though (because I can never get enough feature love) is if tags could be multi-selected. E.g. I could opt to display all /c/feature topics with the tags planned and v1.5 in them.

5 Likes
6

Did this ever get resolved? The tags stay in the current category when using the “filter by tag” list but when I click on the tag below the topic title it reverts back to “all categories”. I’m interested in it staying in the current category…

7

I am on the fence on whether this should be default behavior, you are asking for a site setting of:

scope_tag_links_by_current_category

I think we can start with an experiment here, @Johani is easy to create a theme component that would override this?

@codinghorror should this be default when show filter by tag is enabled? Should there be another setting? I think it is reasonable in some cases cause it tags become more “powerful” and a better substitute for sub categories.

4 Likes
9

Hello @Sarah_Knapp

You can use this to achieve the desired result.

<script type="text/discourse-plugin" version="0.8">
api.modifyClass("component:topic-list-item", {
  didInsertElement: function() {
    category = this.parentView.get("category");

    if (category) {
      categoryName = category.slug;
      tags = this.get("topic.tags");

      if (tags.length != 0) {
        categoryTags = function() {
          tag = $(".discourse-tag:not(.new-href)");
          $.each(tag, function() {
            href = $(this)
              .attr("href")
              .split("/");
            newHref = "/" + href[1] + "/c/" + categoryName + "/" + href[2];
            $(this)
              .addClass("new-href")
              .attr("href", newHref);
          });
        };
        api.addTagsHtmlCallback(categoryTags);
      }
    }
  }
});
</script>

You only need to add it to the common header section of a theme component.

If you’re not sure, have a look at our guide for using Discourse themes.

Here’s a small demo on theme creator where you can see it live. You need to navigate to the junk category and click on one of the tags there.

5 Likes
10

Is this code to get three levels (Category, sub category, and tags) as we see here?:
https://meta.discourse.org/c/howto/devs

Or is that a different setting?

11

Hello.
How do I show all my tag groups in NavItem?
develop (php, laravel, bug)
company (director, manager)

13

I’m trying to get the correct URL to show the topics with a given tag only for a specific category.

For example, assume categoryName = ‘great-category’, and tagName = ‘amazing-tag’

Using your code here, the href I am getting is:
forumdomain.com/tag/c/great-category/amazing-tag

However, going to this page shows a “no route” error on my forum. If I try different combos of “tag/tag-name/c/cat-name” or “c/cat-name/tag/tag-name” I get either the no route error or “page doesn’t exist error”.

Can you specify the correct url to get all topics within the category great-category that have the tag amazing-tag? Thanks!

EDIT: I think I’ve gotten it to work. I believe the correct URL (looking at the theme component example you provided) is:
/tags/c/category-name/tag-name

so, in practice, that would be:

/tags/c/great-category/amazing-tag

The difference was that to get it to work the “tags” reference in the url must be plural.

Still looking into why the jquery code did not work in my case.

1 Like
14

See also:

2 Likes