Info card shortcode for Hugo

If you are using Hugo as your static site generator, you might want to create a card shortcode that can display different types of information on your blog posts. A card is a small rectangular element that can show an image, a title, a subtitle, and some text.

In this post, I will show you how to create a card shortcode that can accept both predefined data and custom data that you can pass from your Markdown file.

Please note that, this post is assuming that you know how to make a blog in Hugo and what is shortcodes in Hugo.

Custom Info card shortcode

The data depends on the header parameter that you specify in the Shortcode. For example, if you use the Shortcode below, it will check if the header value matches any of the cases in the if statement. If it does, it will display the corresponding data. If not, it will display the content value that you provide in the Markdown. You can also add a title to the card by using the title parameter

Card with predifned data

{{/* < info_cards header="lorem-ipsum" title="What is Lorem Ipsum?"  > */}}

Output

What is Lorem Ipsum?

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Card with custom data

{{/* < info_cards header="custom" title="What a shortcode is" 
content="A shortcode is a simple snippet inside a content file that Hugo will render using a predefined template. Note that shortcodes will not work in template files." > */}}

Output

What a shortcode is

A shortcode is a simple snippet inside a content file that Hugo will render using a predefined template. Note that shortcodes will not work in template files.

Below is the code for above custom shortcode.

info_cards.html

{{ $header := .Get "header" }}

<div class="card mb-3 bg-light">
    <div class="card-body">
        {{ with .Get "title" }} 
        <h5 class="card-title">
            {{ . }}
        </h5>
        {{ end }}

        <p class="card-text text-muted fs-6">
            {{ if eq $header "lorem-ipsum"}}
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

            {{ else if eq  $header "another-info" }}
            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.

            {{ else }}
            {{ with .Get "content" }} 
            {{ . }}
            {{ end }}
            {{ end }}
        </p>
    </div>
</div>

You can put the above HTML file in the shortcodes folder under the layouts folder and please note it will replace the built-in figure shortcode in the Hugo.

If you want, you can modify the shortcode as per your requirments to add more details. The style classes in the components are from Bootstrap, but you can use as per you preferences.

For exploring more, you can checkout the Card shortcode here.


Read More