# Discourse Tag Cloud

**URL:** https://meta.discourse.org/t/discourse-tag-cloud/218014
**Category:** Theme component
**Created:** [February 13, 2022, 4:03am UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014 "2022-02-13T04:03:36Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 13, 2022, 4:03am UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/1 "2022-02-13T04:03:36Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/2/a/2a6c8d5ffdf2a517150843db463c5ab2152b75d5.jpeg)

Don’t know about Discourse Tags yet? Head here first: [Discourse Tags](https://meta.discourse.org/t/a-comprehensive-guide-to-discourse-tags/121041)

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

## Settings

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/f/1fa3155e490e87e3e0163d7277ff34283317db49.png)

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: [https://starzen.space/tags](https://starzen.space/tags)

## 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

- Uses [the awesome D3 javascript library](https://d3js.org/)
- Leverages the Word cloud layout by Jason Davies, [Word Cloud Generator](https://www.jasondavies.com/wordcloud/), thank you Jason!

## Similar projects

If you like this you might also like my:

- [Community Network Visualisation](https://meta.discourse.org/t/community-network-visualisation/184189) plugin
- [Word Cloud plugin](https://meta.discourse.org/t/word-cloud-plugin/210169)

| | | |
| --- | --- | --- |
| 🛠 | **Repository** | [Discourse Tag Cloud](https://github.com/merefield/discourse-tc-tag-cloud) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

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

---

<div class="post-metadata">

### Author: ![Decorbuz](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/decorbuz/32/235124_2.png) [@Decorbuz](https://meta.discourse.org/u/Decorbuz)
#### Post date: [February 13, 2022, 5:20pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/2 "2022-02-13T17:20:07Z")

</div>

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

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 13, 2022, 6:04pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/3 "2022-02-13T18:04:16Z")

</div>

Correct. I should add that to OP

---

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [February 13, 2022, 6:47pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/4 "2022-02-13T18:47:37Z")

</div>

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.`

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 13, 2022, 6:56pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/5 "2022-02-13T18:56:41Z")

</div>

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

You need an entry like so:

![image](https://global.discourse-cdn.com/meta/original/3X/5/6/5637d2659b5ab81bc4cc185efe44e7a9b89bd10f.png)

(with your own domain).

---

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [February 13, 2022, 7:15pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/6 "2022-02-13T19:15:11Z")

</div>

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

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 13, 2022, 7:21pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/7 "2022-02-13T19:21:29Z")

</div>

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

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 14, 2022, 10:56am UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/8 "2022-02-14T10:56:24Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [February 14, 2022, 2:50pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/9 "2022-02-14T14:50:54Z")

</div>

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

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 14, 2022, 2:55pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/10 "2022-02-14T14:55:02Z")

</div>

No, it’s literally a cloud of [Discourse Tags](https://meta.discourse.org/t/a-comprehensive-guide-to-discourse-tags/121041). However, I also made: [Word Cloud plugin](https://meta.discourse.org/t/word-cloud-plugin/210169) (which is linked in the OP btw), which sounds more like what you are describing?

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [February 14, 2022, 3:11pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/11 "2022-02-14T15:11:44Z")

</div>

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

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 14, 2022, 3:13pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/12 "2022-02-14T15:13:26Z")

</div>

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

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/d/0dd09017f71c9dcd66a8b4a51f3a4ebfaecc9f30.png)

---

<div class="post-metadata">

### Author: ![danielabc](https://avatars.discourse-cdn.com/v4/letter/d/b9e5f3/32.png) [@danielabc](https://meta.discourse.org/u/danielabc)
#### Post date: [February 14, 2022, 3:18pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/13 "2022-02-14T15:18:16Z")

</div>

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]

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 14, 2022, 3:19pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/14 "2022-02-14T15:19:32Z")

</div>

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

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [February 14, 2022, 4:36pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/15 "2022-02-14T16:36:25Z")

</div>

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/

```

---

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [February 15, 2022, 8:51pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/16 "2022-02-15T20:51:19Z")

</div>

I check the source code and find the [computed tags property](https://github.com/merefield/discourse-tc-tag-cloud/blob/c085564fefa5105ac316401db13f52f0dd7edaaf/javascripts/discourse/components/tagcloudvis.js.es6#L8) only returned tags group in [tags.json](https://meta.discourse.org/tags.json), the others are in extras.tag\_groups. However, I couldn’t figure out how to fix the issue.

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 15, 2022, 8:52pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/17 "2022-02-15T20:52:42Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![th21](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/th21/32/211915_2.png) [@th21](https://meta.discourse.org/u/th21)
#### Post date: [February 15, 2022, 9:00pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/18 "2022-02-15T21:00:08Z")

</div>

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

---

<div class="post-metadata">

### Author: ![tobiaseigen](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tobiaseigen/32/539204_2.png) [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [February 15, 2022, 9:04pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/19 "2022-02-15T21:04:26Z")

</div>

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](https://global.discourse-cdn.com/meta/original/3X/3/a/3a9194d20663e56fe4ba8be5e1489fbcf0697c6c.png)

In the process, I also am getting this error.

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

```

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 15, 2022, 9:07pm UTC](https://meta.discourse.org/t/discourse-tag-cloud/218014/20 "2022-02-15T21:07:15Z")

</div>

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

[Next page](https://meta.discourse.org/t/discourse-tag-cloud/218014.md?page=2)
