Portable Partial: Taxonomy Cloud

tips & tricks
1

Partial file:

This is a partial for displaying Taxonomy Terms as cloud. It’s completely portable. That means, you can use this partial in any Hugo templates or layouts you wish.

/layouts/partials/taxonomy_cloud.html

{{- $Scope := .Scope -}}
{{- $Site := $Scope.Site -}}
{{- $Scratch := $Scope.Scratch -}}
{{- $Taxonomy := .Taxonomy -}}
{{- $Data := ( $Site.GetPage "taxonomy" $Taxonomy ).Data -}}

<div class='container list-container'>
  <ul class='list taxonomy-cloud'>
  {{- if gt ( len $Data.Terms ) 0 -}}
    {{- $maxSize := 2.0 -}}
    {{- $minSize := 1.0 -}}
    {{- $sizeSpread := ( sub $maxSize $minSize ) -}}

    {{- $maxCount := ( index $Data.Terms.ByCount 0 ).Count -}}
    {{- $minCount := ( index $Data.Terms.ByCount.Reverse 0 ).Count -}}
    {{- $countSpread := ( sub $maxCount $minCount ) -}}


    {{- $Scratch.Set "sizeStep" 0 -}}
    {{- if gt $countSpread 0 -}}
      {{- $Scratch.Set "sizeStep" ( div $sizeSpread $countSpread ) -}}
    {{- end -}}


    {{- range $Data.Terms.Alphabetical -}}
      {{- $count := .Count -}}
      {{- $sizeStep := ( $Scratch.Get "sizeStep" ) -}}
      {{- $size := ( add $minSize ( mul $sizeStep ( sub $count $minCount ) ) ) -}}
      <li>
        <a href='{{ ( print $Data.Plural "/" ( .Term | urlize ) ) | relLangURL }}' style='font-size:{{ $size }}em'>
          {{- with $Site.GetPage "taxonomyTerm" $Data.Plural .Term -}}
            {{- .Title -}}
          {{- end -}}
        </a>
      </li>
    {{- end -}}
  {{- else -}}
    <span>
      {{- print "No " $Data.Singular -}}
    </span>
  {{- end -}}
  </ul>
</div>

Usage

Now, if you want to display tags cloud, include it like this:

{{- $taxonomy := "tags" -}}
{{ partial "taxonomy_cloud" ( dict "Taxonomy" $taxonomy "Scope" . ) }}

I came up with this as a part of Minimo theme.

3 Likes