Filter topic with specific tag inside single category

[erlend_sh (Erlend Sogge Heggen)]

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.

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

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.

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.

[cpradio]

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…

[erlend_sh (Erlend Sogge Heggen)]

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

[Vocino (Travis)]

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

[erlend_sh (Erlend Sogge Heggen)]

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

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

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

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:

https://community.namati.org/tags/c/land/environment

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.

[Sarah_Knapp]

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…

[sam (Sam Saffron)]

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.

[Johani (Joe)]

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.

[kimardenmiller (Kim Miller)]

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?

[Dev_Work (Aleksandr)]

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

[JQ331]

@Johani

newHref = "/" + href[1] + "/c/" + categoryName + "/" + href[2];

Sto cercando di ottenere l’URL corretto per mostrare i topic con un determinato tag solo per una categoria specifica.

Ad esempio, supponiamo che categoryName = ‘great-category’ e tagName = ‘amazing-tag’.

Usando il tuo codice qui, l’href che ottengo è:
forumdomain.com/tag/c/great-category/amazing-tag

Tuttavia, andando su questa pagina, sul mio forum viene visualizzato un errore “no route”. Se provo diverse combinazioni di “tag/nome-tag/c/nome-cat” o “c/nome-cat/tag/nome-tag”, ottengo o l’errore “no route” o l’errore “page doesn’t exist”.

Potresti specificare l’URL corretto per ottenere tutti i topic all’interno della categoria great-category che hanno il tag amazing-tag? Grazie!

EDIT: Penso di aver risolto. Credo che l’URL corretto (guardando l’esempio del componente del tema che hai fornito) sia:
/tags/c/nome-categoria/nome-tag

quindi, nella pratica, sarebbe:

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

La differenza è che per farlo funzionare il riferimento “tags” nell’URL deve essere al plurale.

Sto ancora cercando di capire perché il codice jQuery non ha funzionato nel mio caso.

[mcwumbly (Dave McClure)]

Vedi anche:

Intersection tag + category

Here’s an example: https://meta.discourse.org/tags/c/howto/devs/56/ember You can (re-)discover this by going to the topic list for the category, and then using the tags dropdown to select a tag.