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:
|
|
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
Contact me today to find out how I can help you.