Work faster and get better results by blocking distracting websites while you work »

How to turn all text into uppercase with Hugo’s upper function?

Situation: You want to know how to capitalise each character in a string with Hugo’s upper function.

Discussion: make text uppercase with upper

The upper function turns all characters in a given string into uppercase. This function has the following default pattern (Hugo Docs, 2017):

upper "sourceString"
"sourceString" | upper

upper has just one parameter: the string of text we want to uppercase. That string can be a literal string (like upper "Welcome!") or a string variable like upper .Title. The function can also deal with literal numerical values (upper 23.34) but triggers an error when we use an unquoted string: lower Hello there! is not allowed.

To execute upper we place the function before its string parameter (upper "Hello"). Or we use the pipe symbol (|) and put it after a string expression ("Hello" | upper). With this latter approach we can chain Hugo operations. That works because the output of the operation to the left of | becomes the input for the action on its right. That way we can process a value multiple times before we finally output it to the static page. But which of these two ways we use to execute upper doesn’t matter: its behaviour and outcome remains the same.

The upper function has the following characteristics:

At this time it’s not possible to determine whether a string is in uppercase, lowercase, or mixed-case. And so processing a string the upper function is the only way to know for sure that all characters are uppercase.

Turn Hugo text into uppercase: upper examples

A basic example of the upper function is:

<h2>{{ upper .Title }}</h2>

Here we make a <h2> heading. Between its tags we output the page’s title (.Title) in all uppercase characters. When our page’s title is ”(Hu)Go Template Primer”, this upper code generates:

<h2>(HU)GO TEMPLATE PRIMER</h2>

Another use of the upper function is to make sure that text shows with consistent formatting. Say we always want categories to show in uppercase. We could remind everyone on our team to always use capitals when they type in category names. Or we simply use upper like this:

{{ if isset .Params "categories" }}
    <p>{{ delimit .Params.categories " · " | upper }}</p>
{{ end }}

With this if statement we first have isset check whether the ‘categories’ front matter variable is set. This way we don’t get an error trying to access something that isn’t there. When isset returns true (and with that says categories are present), this if statement’s code runs.

That template code creates a paragraph to show all categories. To show them in a nice manner we use the delimit function. This function takes a collection (in this case, our list of categories) and turns it into a string delimited with certain separators. Here we use a dot (" · ") between categories for that.

To uppercase those categories we then send the output of delimit to the upper function. For that we use the pipe symbol (|). With |, the output of the operation to its left becomes the input for the action to the right of |. For the template code here that means the output of delimit is fed into the upper function. Since we don’t take more actions after that, Hugo outputs the uppercased category names to our static page.

This example creates an output like:

<p>MOVIE · ADWARDS · ACTION/THRILLER</p>

Learn more

References

GoDoc.org (2017, December 21). Hugo package strings. Retrieved on January 17, 2018, from https://godoc.org/github.com/gohugoio/hugo/tpl/strings

Hugo Docs (2017, September 13). upper. Retrieved on February 2, 2018, from https://gohugo.io/functions/upper/

Wikipedia (2018, January 18). Unicode. Retrieved on January 16, 2018, from https://en.wikipedia.org/wiki/Unicode