# Portable Partial: Taxonomy Cloud

**URL:** <https://discourse.gohugo.io/t/portable-partial-taxonomy-cloud/10616>\
**Category:** tips & tricks\
**Created:** [February 18, 2018, 5:53pm UTC](https://discourse.gohugo.io/t/portable-partial-taxonomy-cloud/10616 "2018-02-18T17:53:08Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![MunifTanjim](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/muniftanjim/32/17521_2.png) [@MunifTanjim](https://discourse.gohugo.io/u/MunifTanjim)\
**Post date:** [February 18, 2018, 5:53pm UTC](https://discourse.gohugo.io/t/portable-partial-taxonomy-cloud/10616/1 "2018-02-18T17:53:08Z")

</div>

### 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**

```auto
{{- $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:

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

```

I came up with this as a part of [Minimo](https://github.com/MunifTanjim/minimo/blob/093833fa2b2474df2b32b08c0d79e6022429add1/layouts/partials/extras/taxonomy_cloud.html) theme.