Tag Cloud, PDF Viewer, Photo List


Some New Short Codes

Tag Cloud

I thought some "tag clouds" a nice addition to the site. I did a search for some tag cloud examples. I found Bep had a good example of a simple text "tag cloud." You can find Bep's code here. Thanks for sharing Bep! I converted his partial into the shortcode tagcloud. Since I wanted to include all tags, I changed the "Count" ">=" 3 to "Count" ">=" 1. I have not (yet) created any styles to match the code.

 2    Retrieved from: https://discourse.gohugo.io/t/tag-cloud/6335
 3    Original Code Author: bep
 5<div id="theme-tagcloud" class="col-sm-12" style="margin-bottom: 15px;">
 6    {{ $tags := $.Site.Taxonomies.tags.ByCount }}
 7    {{ $v1 := where $tags "Count" ">=" 1 }}
 8    {{ $v2 := where $v1 "Term" "not in" (slice "hugo" "tags" "rss") }}
 9    {{ range $v2 }}
10    {{ if .Term }}
11    {{ $tagURL := printf "tags/%s" .Term | relURL }}
12    <a href="{{ $tagURL }}" class="btn btn-default" role="button" style="text-transform: uppercase; font-size: 12px; padding-right: 5px; padding-left: 5px;" >{{ .Term }} <span class="badge">({{ .Count }})</span></a>
13    {{ end }}
14    {{ end }}

I use the Compose theme. It has a layout for a single blog folder and multiple documentation folders. The blog's top-level list page uses image links for each blog article. I wanted my review (documentation) list pages to behave similarly. So, I tried to figure it out.

Please note, all the CSS "stuff" comes from the Compose theme. You will most likely need to modify it if you use another theme.

If I understand the Hugo documentation correctly, I could not use .Pages in a shortcode--I had to use .Site.Pages instead. The $pathDepth variable tells the shortcode how many levels of the path have to match before it includes the page. Here's the shortcode I came up with:

 1<!-- determine how many levels of the path must match -->
 2<!-- It really causes *a lot* of blank spaces without the "-" (dashes) -->
 3{{- $pathDepth := .Get 0 | default 1 -}}
 4<section class="grid-3">
 5<!-- save the current page and split the path into an array -->
 6{{- $thisPg := .Page -}}
 7{{- $thisPgArr := split $thisPg "/" -}}
 8<!-- I couldn't get any of the other Pages to work in a shortcode -->
 9{{- range .Site.Pages -}}
10<!-- Only include pages that have an image -->
11  {{- if isset .Params "image" -}}
12    {{- $curPg := . -}}
13    {{- $curTitle := .Title -}}
14    {{- $curPgArr := split $curPg "/" -}}
15    <!-- Collect the common pieces of the two arrays (in order) into a new array -->
16    {{- $both := intersect $thisPgArr $curPgArr -}}
17    <!-- Compare the length of the two arrays to see if they are equal -->
18    {{- if eq ($both | len) ($pathDepth) -}}
19      {{- with .Params.image -}}
21I snagged this section and div code by looking at the html source generated
22by the "block" shortcode of the compose template.
24      <div>
25        <h3 id="{{ $curPg.Title | urlize }}">{{ $curPg.Title }}</h3>
26        {{- $imgURL := printf "images/%s" . | relURL -}}
27        <a href="{{ $curPg.RelPermalink }}"><img alt="{{ $curPg.Title}}" title="{{ $curPg.Title}}" src="{{ $imgURL }}" /></a>
28      </div>
29      {{- end -}}
30    {{- end -}}
31  {{- end -}}
32{{- end -}}

The markdown looks like this:

2title: "Reviews"
3weight: 1
6I hope you find my reviews helpful.
8{{< photolinks 2 >}}

You can see an example of the output here

Embedded PDF File

I thought it might be nice to include embedded PDF files in my documents. I poked around and found a Hugo theme I could install as a submodule. It's called hugo-embed-pdf-shortcode. Just follow the instructions in the included README.md to install and use it. As I mentioned, I used the submodule method of installation. It does add about 15MB of files to your site. I included a user's manual for my new grill on this page. I do find the smaller text and images difficult to make out with this viewer. Thankfully, it does provide a way to download the PDF and to view it full-size in your browser.