# 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:** 1\
**Showing post:** 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.

---

_[View the full topic](https://meta.discourse.org/t/discourse-tag-cloud/218014)._
