Display dynamic images in Hugo [shortcode]

Since I started using Hugo, I’ve written on serving dynamic / responsive images from the cloud. Using a Hugo shortcode, Cloudinary [referral] will dynamically create images. You can easily add images, set title / alt tags and do other image transformations - without writing any code. This means no need to have multiple copies of the same image saved locally as part of a image srcset or writing raw html in your markdown files.

Shortcodes are saved to either the root of your Hugo site under Layouts or in your theme folder under layouts. I prefer the first - in case you change the theme, you still have the shortcode.

Install the Cloudinary Response Shortcode

First we download the shortcode … this will install it in my preferred location:

1
2
3

cd <your Hugo project>
git clone https://gist.github.com/573a4621f5e1e0436e5157a17731b5ed.git 
mv 573a4621f5e1e0436e5157a17731b5ed/cld-response.html layouts/shortcodes

Note: If you don’t have git / don’t want to use it - then go download this Gist and unzip / save it to your preferred location

How to Use

The shortcode looks like

{{< cld-response "/path_to/image.png "Your Alt and Title" w_auto style >%}}

Use this and replace the standard markdown for image ![](path_to/image.png]

Options

• filename - enclose in quotes
• width default to w_auto
• Style - maybe add a border? Or default to width:90% - so that the image is constrained by the width of your content div.

Note: The assumes you have a bootstrap theme - and I include a .border class so images have the narrowest of borders.

Example This is a cld-responsive image with default options. Shortcode started out as

{{< cld-response "/blog/Ella_2014.jpg" >%}}

This is the result

Next Steps

I think I’ll play with this and allow image transformations so you can do this

If you liked this please STAR it on my Gist.

Cloudinary is a great place to store your images and serve them - have you read my other articles?

What have I said about Cloudinary?

• Display dynamic images in Hugo [shortcode]
• Master Hugo - serve dynamic and responsive images from the cloud
• Master Hugo - move images to cloud for a performance boost

Meet the author

Damien Saunders
An experienced management consultant and business leader interested in digital transformation, product centred design and scaled agile. If I'm not writing about living with UCTD (an autoimmune disease), I'm probably listening to music, reading a book or learning more about wine.
Find our more about me.