Tag Cloud | Brain Phrye

In the new site design I wanted a subtle and simple tag cloud. I initially did it by ordering tags in the footer by how common they were. However alphabetical order exists for a reason, so it was clear that wasn’t the best choice.

Tag clouds normally show popularity with font size. Not being a huge CSS person, I hadn’t realized font size was another thing you could specify relative to everything else - but you can!

The slight difficuty here is that Go templates don’t have math functions built in but it turns out hugo has added them. It would be nice to programattically determine the min count (currently 3), the median count (currently 8) and the multiple (currently 5), but getting that info from hugo is kinda fiddly. This is a good start.

Note that this template generates a lot of whitespace. I run minify to reduce the size of the served html in deployment, but obviously one might add some {{- and -}} bits to this if you don’t.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
  <div class="footer-tags">
    {{ $tags := $.Site.Taxonomies.tags.Alphabetical }}
    {{ $tags := where $tags "Count" ">=" 3 }}
    {{ $tags := where $tags "Term" "not in" (slice "hugo" "tags" "rss" "old") }}
    {{ $count := 0 }}
    {{ range $key, $tag := $tags }}
      {{ if $tag.Term }}
        {{ $tagURL := printf "tags/%s" $tag.Term | relURL }}
        {{ if ne $key 0}}&middot;{{ end }}
        <a style="font-size: {{ add 100 (mul (sub $tag.Count 8) 5) }}%;"
          href="{{ $tagURL }}">{{ $tag.Term }}</a>
      {{ end }}
    {{ end }}
  </div>