Tag Cloud for Hugo

[Hash_Borgir]

Hugo Tag Cloud

{{ if isset .Site.Taxonomies "tags" }}
	{{ if not (eq (len .Site.Taxonomies.tags) 0) }}
	<div data-pagefind-ignore class="panel sidebar-menu">
		<div class="panel-heading">
			<h1 class="panel-title">Tags
			</h1>
		</div>
		<div class="panel-body">
			<ul class="tag-cloud center">
				{{ range $name, $items := .Site.Taxonomies.tags }}
					{{ if and (ne $name "radio") (ne $name "about") (ne $name "")}}
						{{ $len := len $items }}
						{{ if lt $len 2 }}
							<li><a style="font-size: 10px" class="btn btn-transparent" href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower }}"> {{ $name | title }} <span class="" style="color: #AAA; font-size: 12px; text-decoration: none;">({{ len $items }})</span></a></li>
						{{ else if le $len 3}}
							<li><a style="font-size: 12px" class="btn btn-transparent" href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower }}"> {{ $name | title }} <span class="" style="color: #AAA; font-size: 12px; text-decoration: none;">({{ len $items }})</span></a></li>
						{{ else if le $len 5}}
							<li><a style="font-size: 14px" class="btn btn-transparent" href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower }}"> {{ $name | title }} <span class="" style="color: #AAA; font-size: 12px; text-decoration: none;">({{ len $items }})</span></a></li>
						{{ else if le $len 7}}
							<li><a style="font-size: 16px" class="btn btn-transparent" href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower }}"> {{ $name | title }} <span class="" style="color: #AAA; font-size: 12px; text-decoration: none;">({{ len $items }})</span></a></li>
						{{ else if le $len 9}}
							<li><a style="font-size: 17px" class="btn btn-transparent" href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower }}"> {{ $name | title }} <span class="" style="color: #AAA; font-size: 12px; text-decoration: none;">({{ len $items }})</span></a></li>
						{{ else if le $len 11}}
							<li><a style="font-size: 18px" class="btn btn-transparent" href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower }}"> {{ $name | title }} <span class="" style="color: #AAA; font-size: 12px; text-decoration: none;">({{ len $items }})</span></a></li>
						{{ else if le $len 15}}
							<li><a style="font-size: 19px" class="btn btn-transparent" href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower }}"> {{ $name | title }} <span class="" style="color: #AAA; font-size: 12px; text-decoration: none;">({{ len $items }})</span></a></li>
						{{ else if le $len 30}}
							<li><a style="font-size: 20px" class="btn btn-transparent" href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower }}"> {{ $name | title }} <span class="" style="color: #AAA; font-size: 12px; text-decoration: none;">({{ len $items }})</span></a></li>
						{{ else if le $len 60}}
							<li><a style="font-size: 21px" class="btn btn-transparent" href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower }}"> {{ $name | title }} <span class="" style="color: #AAA; font-size: 12px; text-decoration: none;">({{ len $items }})</span></a></li>
						{{ else if le $len 120}}
							<li><a style="font-size: 22px" class="btn btn-transparent" href="{{ $.Site.BaseURL }}tags/{{ $name | urlize | lower }}"> {{ $name | title }} <span class="" style="color: #AAA; font-size: 12px; text-decoration: none;">({{ len $items }})</span></a></li>
						{{end}}
					{{ end }}
				{{ end }}
			</ul>
		</div>
	</div>
	{{ end }}
{{ end }}

I quickly coded this last night. I’m sure someone can improve it, take out the inline CSS, and maybe reduce the number of if conditions or size it as you see fit. Very crude version. Enjoy.

Technique: first we find out how many articles this tag has, then using that we give different size to the tag. If this tag has 10 items, it gets font-size 18, etc. etc. If it has 1 it gets size 10, etc.

[jmooring]

You can optimize this, and reduce your code, with;

{{ with index site.Taxonomies "tags" }}
  <div data-pagefind-ignore class="panel sidebar-menu">
    <div class="panel-heading">
      <h1 class="panel-title">Tags
      </h1>
    </div>
    <div class="panel-body">
      <ul class="tag-cloud center">
        {{ $m := dict
          "steps" (slice 1 3 5 7 9 11 15 30 60 120)
          "sizes" (slice "10px" "12px" "14px" "16px" "17px" "19px" "20px" "21px" "22px")
        }}
        {{ range $name, $items := . }}
          {{ if not (in (slice "radio" "about") $name) }}
            {{ range $k, $_ := $m.steps }}
              {{ if le $items.Count . }}
                <li><a style="font-size: {{ index $m.sizes $k }}" class="btn btn-transparent" href="{{ $items.Page.RelPermalink }}"> {{ $name | title }} <span class="" style="color: #AAA; font-size: 12px; text-decoration: none;">({{ $items.Count }})</span></a></li>
                {{ break }}
              {{ end }}
            {{ end }}
          {{ end }}
        {{ end }}
      </ul>
    </div>
  </div>
{{ end }}

[Hash_Borgir]

Thank you very much. I tried hard to figure out Hugo syntax and it still eludes me to this day. I use PHP and other languages primarily and one can just map over a defined array and apply a function to each element. I wish Hugo syntax was a bit easier

1. Create sizes/steps array (steps can even be specified using seq, if one doesn’t want to type them out ) using dict, key val pair, key = sizes, value = slice (an array)
2. Map over steps, and if current item count is less than step (or greater than etc.) append the sizing html.

In my mind, it’s trivial to do. In Hugo… \o/ I don’t even know these mysteries of the Universe. A lot of times I end up doing things the long way around because I can’t figure out the Hugo sytnax.