Pack of Shortcodes for Hugo
Today I’m releasing a pack of custom shortcodes for Hugo. A shortcode is a special tag added to a post that will embedded content or add HTML to a post instead of having to manually add the HTML. A few examples of shortcodes include YouTube, Vimeo, and GitHub Gists. The pack I created adds the ability to embed Google Maps, Box Document Preview, Pastebin, Twitch videos, Twitch livestreams, and JSFiddle. I’m going to keep adding new shortcodes in the future as I come across new sites that will work well with shortcodes.
Installing Shortcodes
Installing new shortcodes to Hugo is very simple. Depending on where
you want the shortcode stored, you will have to adjust the directory
you add the shortcodes to. Generally I recommend installing shortcodes
into the layouts directory instead of adding them to themes. The
downside of adding the shortcode to a theme is that in the future when
you change themes, those previously used shortcodes will no longer work
unless you copy them to the new theme.
To install shortcodes to the layouts directory, follow the steps
below. If you decide that you want to install the shortcodes to a theme
instead (for instance if you are releasing a theme to the public)
replace the layouts directory with the layouts directory located
inside of you theme’s directory.
- Download and extract the Hugo Shortcode Pack at the bottom of this page. Depending on your operating system, you can usually right click on the file and click on “Extract.”
- Copy the shortcodes from inside of the
layouts/shortcodesdirectory into your Hugo directory that goes by the same name. Create any of the directories don’t exist. - The shortcodes are now installed. You can test them by adding our
sample post that is located in the folder
content/postto your blog. Once you are done testing the shortcodes, it’s safe to delete this file as it’s not needed.
For additional information about Hugo shortcodes, you can read Hugo’s Shortcode Documentation to learn more about shortcodes and learn how to create you own.
Included Shortcodes
Below is a list of the shortcodes that are included in this pack. In the future I’m going to add even more shortcodes when I come across an interesting site that can be embedded or when I create a shortcode for my other sites that use Hugo.
- Twitch Embedded Video
- Embeds a past broadcast from Twitch to your website.
- Maintains a 16:9 aspect ratio.
- Twitch Live Stream
- Embeds a live stream player from Twitch to your website.
- Maintains a 16:9 aspect ratio.
- Pastebin
- Displays a paste that was added to Pastebin directly on your site.
- Includes an option to set a max-height of the paste.
- JSFiddle
- Displays a JSFiddle that was created. Can be customized to show different tabs such as JavaScript, HTML, CSS, and the final result.
- Customize viewable tabs.
- Customize appearance to be light or dark mode.
- Google Maps
- Displays an embedded Google Map of any location that you can search for. Works for display a city, address, business, or a street.
- Box Document Preview
- Displays an embedded document preview of any file shared on Box. Works with PDF, DOC, Spreadsheets and many other formats.
Each shortcode has multiple options that makes them easy to customize.
Included in the downloadable archive is a sample post that shows the
various options available for each shortcode. For designers and
developers out there, each shortcode has a div element as a container
with class attribute set to .shortcode along with each shortcode
having a unique class name. This should make formatting the position of
the shortcodes easier. Each shortcode is also designed to fill the
width of the container.
Show Your Support
If you enjoy these shortcodes and are using them on your site, please link back to geekthis.net. I would really appreciate being part of your blogroll or being mentioned in a blog post or on social media. Mentioning this site helps out a lot and allows me to keep creating and updating these free resources along with writing blog posts.