Hugo Custom Shortcodes

Here I am listing some of the Hugo custom shortcodes I have created for my to use in this website. Before going to custom shortcodes, you need to unnderstand what is a shortcode in Hugo.

Shortcodes

Shortcodes are a way to insert templates into your content files, as explained on Hugo website. They allow you to add features that are not supported by Markdown, such as YouTube videos, images, info cards, and more. Instead of using raw HTML, which breaks the simplicity of Markdown syntax, you can use shortcodes to achieve the same results. Shortcodes are also easy to update and modify, as Hugo will apply the changes when building your site.

In addition to cleaner Markdown, we can update the shortcode anytime with new changes and Hugo will reflect the same in the time of building.

Custom Shortcodes

There are few shortcodes is readily available in the Hugo like figure, gist, tweet, vimeo, etc for various purposes. Hugo’s built-in shortcodes cover many common, but not all use cases. Luckily, Hugo provides the ability to easily create custom shortcodes to meet your website’s needs.

To create a custom shortcode, place an HTML template in the layouts/shortcodes directory of your source organization.

Below are some of the custom shortcodes I created for my website. Please feel free to check the below and use the same if you like it.

Image gallery shortcode
Card shortcode
Image shortcode
Alert box shortcode

Lightbi Hugo Theme

This feature is available in the Lightbi theme, and you can explore it further here.

Image gallery shortcode

Hugo shortcode that creates an image gallery in a masonry style using GLightbox. This approach will display images from a specified folder in a masonry layout, and each image will open in a lightbox when clicked.