Discourse Tag Cloud

theme-component
1

Adds a traditional(ish), responsive tag “cloud” to the Tag page and optionally to the top of the Discovery List for ease of navigation. The tags are automatically arranged in a cloud, whilst their relative size represents the frequency of their use.

image
image1920×420 66.6 KB

Don’t know about Discourse Tags yet? Head here first: Discourse Tags

NB It is deliberately Desktop (& tablet) only at present due to the potentially small touch targets.

Settings

image
image1252×1190 71.5 KB

The homepage Cloud is OFF by default.

You can mess with the word scale and height of canvas to make things more compact. I may eventually make things collapsible in a future release.

You can mess with the colour settings to go monochrome.

NB If tags listed by group setting is ON, the component should trawl through the groups and add on the embedded tags.

See it in action

Live demo here: StarZen: The Unofficial Star Citizen Community

Known issues

  • If you don’t make the cloud large enough, or the tags scale small enough, it will arbitrarily miss out some tags. Experiment.

  • Due to the potentially small touch targets it’s not enabled on mobile. Consider your settings carefully when using on Tablet. I may provide a way to disable on tablets in future.

  • No automated dark mode support. The default colour scheme is chosen to be neutral and work on both light and dark themes. It is possible to make it all white or all black-ish by messing with the colour settings. Potentially you could install two and set them up differently for dark mode. I’ll have to think about adding some automation here.

  • If you have animation enabled and flick quickly between the words they will shrink. That’s unavoidable, I believe as you don’t give enough time for the mouse out animation. Hence I provide a way to disable the animation in settings.

Credits

Similar projects

If you like this you might also like my:
:hammer_and_wrench: Repository Discourse Tag Cloud
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

NB You must include your uploads folder in your content security policy script src setting.

19 Likes
2

Does the size of a word depend on how many times its been used as a tag?

3

Correct. I should add that to OP

4

I got an error message saying Refused to load the script 'https://{{some url}}.js' because it violates the following Content Security Policy directive: "script-src" and Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

5

Looks like you haven’t permitted your site to use scripts from your uploads folder?

You need an entry like so:

image

(with your own domain).

1 Like
6

Thanks, and I found it only queries tags from “Other Tags” if there are tag groups that existed.

7

Ah, interesting. Thanks for the feedback. Its only been tested without tag groups. I’ll take a look sometime…

8

I’ve just taken a look at this, I:

  • Created a new Tag Group
  • added an existing Tag to the Group.
  • refreshed front page
  • Tag still showed in the Cloud.

So cannot reproduce your issue? Please provide complete steps to reproduce.

9

Would this Tag Cloud be the most spoken words in the forum? Like a twitter trending topic?

10

No, it’s literally a cloud of Discourse Tags. However, I also made: Word Cloud plugin (which is linked in the OP btw), which sounds more like what you are describing?

1 Like
11

Is there something similar to Twitter’s Trending Topics? Like, the most popular topics of the day (typed in topics)

12

Core Discourse has that already, it’s called the Top list:

image

13

I think the translation came out wrong, I meant the most cited words of the day, example: Queijo, Carne, The Weeknd, Xtina, American Idol

[image]

1 Like
14

The Word Cloud plugin is probably closest but that doesn’t have a time dimension (yet), it takes aggregate statistics from the entire forum (or select Categories).

15

Awesome! I’ve always wanted to have a tag cloud in Discourse, so am glad to see this theme component is available. Nice work!

The CSP thing is weird - I ran into the same error, and it ultimately only worked for me when I added the path specified in the error which was:

https://SITEURL/uploads/default/original/1X/
1 Like
16

I check the source code and find the computed tags property only returned tags group in tags.json, the others are in extras.tag_groups. However, I couldn’t figure out how to fix the issue.

1 Like
17

Well done for having a go, but if you want me to fix anything it would be most useful to have functional steps to reproduce, please, from the front end, as if just a user, because right now I can’t see the problem.

18

I just installed the component and go to /tags page and only find tags without a group assigned show up in the cloud.

Update: sorry I forgot to mention the list tags by group option is enabled, it had been a while since I enable it, i forgot it was off by default

1 Like
19

I am able to reproduce this. If you enable the tags listed by group setting, you will only see the ungrouped tags in the tag cloud.

Screen Shot 2022-02-15 at 1.03.58 PM

In the process, I also am getting this error.

Slow down, too many requests from this IP address.
Please retry again in 3 seconds.
Error code: ip_10_secs_limit.
3 Likes
20

thanks, that would have saved a lot of time.

I’ll add it as a known issue until I get time to look at this (done).