Weighted tag cloud

support
4

I know this is an old topic, but I ended up here myself by searching. I see that waddles is trying to avoid inline styles, but if you don’t mind that, you might find this useful. At least it works for me:

{{ if not (eq (len $.Site.Taxonomies.tags) 0) }}
    {{ $fontUnit := "rem" }}
    {{ $largestFontSize := 2.0 }}
    {{ $smallestFontSize := 1.0 }}
    {{ $fontSpread := sub $largestFontSize $smallestFontSize }}
    <!--<div>Font size unit: {{ $fontUnit }}</div>
    <div>Font min size: {{ $smallestFontSize }}</div>
    <div>Font max size: {{ $largestFontSize }}</div>
    <div>Font size spread: {{ $fontSpread }}</div>-->

    {{ $max := len (index $.Site.Taxonomies.tags.ByCount 0).Pages }}
    <!--<div>Max tag count: {{ $max }}</div>-->

    {{ $min := len (index $.Site.Taxonomies.tags.ByCount.Reverse 0).Pages }}
    <!--<div>Min tag count: {{ $min }}</div>-->

    {{ $spread := sub $max $min }}
    <!--<div>Tag count spread: {{ $spread }}</div>-->

    {{ $fontStep := div $fontSpread $spread }}    
    <!--<div>Font step: {{ $fontStep }}</div>-->

    <ol id="tag-cloud">
        {{ range $name, $taxonomy := $.Site.Taxonomies.tags }} 
            {{ $currentTagCount := len $taxonomy.Pages }}
            {{ $currentFontSize := (add $smallestFontSize (mul (sub $currentTagCount $min) $fontStep) ) }}
            <!--Current font size: {{$currentFontSize}}-->
            <li><a href="{{ "/tags/" | relLangURL }}{{ $name | urlize }}" style="font-size:{{$currentFontSize}}{{$fontUnit}}">{{ $name }} ({{$currentTagCount}})</a></li>
        {{ end }}
    </ol>
{{ end }}

Described in a bit more detail at: http://henrik.sommerfeld.nu/hugo-tag-could/

3 Likes