How to hide tags after N and show “+X more” like categories

Support
1

Hi all,

I’m working with topics that sometimes get a lot of tags (many of them are machine-generated from an ICS feed). In the Discourse UI, tags just keep wrapping, which makes topic lists really tall and harder to skim.

I’d like to do something similar to how categories are displayed in topic lists:
• Show the first few (say 5)
• Then collapse the rest behind a “+X more” indicator

What I’ve tried:
• CSS can hide tags after a certain number, and even add a static “…” marker, e.g.

/* Hide all tags after the 5th */
.topic-list .discourse-tags a:nth-of-type(n+6) {
  display: none;
}

/* Add … after the 5th */
.topic-list .discourse-tags a:nth-of-type(5)::after {
  content: " …";
}

That works for hiding, but CSS can’t dynamically count how many were hidden, so I can’t get “+3 more”.

My question:
• Is there a built-in way to limit tags per topic display?
• If not, is there an example snippet (maybe from category rendering) that I could adapt into a theme component to add the “+X more” logic for tags?

Thanks in advance!

1 Like
2

Were you able to figure this out? It’s not supported in core Discourse though you can probably do it with a theme component.

There is a default max tags per topic setting which defaults to 20, which I think is a sane default and does not lead to too much wrapping. I assume it is rare to want that many tags any way.

3

:eyes:
20?

4

Yes, you are right! I had upped it to 20 on my site. The default is 5 which is perfectly sane.

Your eagle eye never ceases to amaze me.

1 Like
5

yeh, my importer script actually has shortend UID tag creation disabled, since it creates the hidden HTML UID marker

6

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.