Do more in less time. Block distracting websites with Cold Turkey Pro (Windows, Mac) »

How to change text in Hugo to upper- or lowercase?

Situation: You work with a string of text in your Hugo theme file and wonder how to turn all string characters into upper- or lowercase.

Solution: change text casing with upper and lower

To have Hugo turn a string of text into upper- or lowercase we use the upper or lower functions. That gives us two options:

Uppercase text. The upper function turns all characters in a string to uppercase. For instance:

<!-- Show the page's section in all uppercase characters. -->
{{ upper .CurrentSection }}

<!-- Process the page's 'introduction' front matter variable
    as Markdown text, but first uppercase all its characters. -->
{{ .Params.introduction | upper | markdownify }}

Lowercase text. Similarly, the lower function turns all characters in a string to lowercase. For example:

<!-- Turn the page's title into lowercase text. -->
{{ lower .Title }}

<!-- Process the page's description as Markdown text,
    after we turn it into lowercase text. -->  
{{ .Description | lower | markdownify }}

Discussion: alter text casing with template functions

With the upper function we turn all characters into uppercase, and lower takes care of making each letter lowercase. Let’s take a closer look at these functions.

Turn text into uppercase with Hugo’s upper function

Hugo’s upper function has one parameter: a string whose characters we want to turn into uppercase text (Hugo Docs, 2017a). upper performs that operation on every character in the source string. Afterwards it gives us an uppercased copy of the original string.

We can execute the upper function in two ways. The first is to place upper before the string we want to capitalise. And the other option places upper behind a string expression with the pipe symbol (|). (Regardless of how we execute upper, its behaviour and outcome remains the same.) An example of both approaches is:

<!-- Show the page's section in all uppercase characters. -->
{{ upper .CurrentSection }}

<!-- Process the page's 'introduction' front matter variable
    as Markdown text, but first uppercase all its characters. -->
{{ .Params.introduction | upper | markdownify }}

Here the first line of Hugo template code turns the page’s current section (.CurrentSection) into all uppercase characters. We don’t do anything else with the capitalised string that upper returns. And so Hugo simply prints the outcome to the static page it renders with this template code.

The second example uses the pipe symbol (|) to chain multiple operations together. With this, the outcome of each operation to the left of | is passed to the operation on its right. This way a string expression ‘flows’ from the left to right, with each step performing some kind of operation.

In this case we first get the ‘introduction’ front matter variable (.Params.introduction). Then we pass that string through upper to make all its characters uppercase. In case that front matter variable had some Markdown formatting, we run the now uppercased string through Hugo’s Markdown processor with the markdownify function.

Doing that translates all Markdown formatting to its HTML counterpart. Since we don’t take further actions, Hugo’s implicit behaviour is to print the outcome of this template code onto our static page.

Make text lowercase with Hugo’s lower function

With the lower function we turn all characters in a string to lowercase (Hugo Docs, 2017b). The function has one parameter: a source string we want to lowercase. lower performs its work on each character in that string. After that it returns a lowercased copy of the original string.

There are two ways to run lower. The first is to place this function before the text we want to lowercase. The other way is to place lower behind a string expression with the pipe symbol (|). (The behaviour and outcome of lower doesn’t depend on how we execute it.) Both approaches look like:

<!-- Turn the page's title into lowercase text. -->
{{ lower .Title }}

<!-- Process the page's description as Markdown text,
    after we turn it into lowercase text. -->  
{{ .Description | lower | markdownify }}

The first line here turns the page’s title (.Title) into lowercase text. Since we don’t take further actions, Hugo’s default behaviour is to print the outcome of this line onto the static page it renders.

The second example chains multiple operations together with the pipe symbol (|). This makes the outcome of each operation to the left of | the input for its action on the right. This chains together multiple operations, each performing a specific task.

We start here with the page’s description front matter variable (.Description). Then we make all characters in that text lowercase with lower. After that we pass that lowercased text through the markdownify function. This latter function runs the string through Hugo’s Markdown processor, which turns any Markdown formatting to its HTML version.

Tips and insights for Hugo’s upper and lower

When we change a string of text to upper- or lowercase in Hugo, there are a few things to consider:

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 (2017a, September 13). upper. Retrieved on February 2, 2018, from https://gohugo.io/functions/upper/

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

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