Shortcode: Add a Retina Image to Posts

This is part of our Hugo shortcode series.

In this shortcode post, we show you how to conveniently insert a retina screen ready image into your page - while still writing your posts in markdown. This means you won’t have to resort to putting raw html in your posts.

File: /layouts/shortcodes/retinaimg.html

1
2
3
4
5
<p>
    <img src="{{ .Get 0 }}" 
         srcset="{{ .Get 1 }} 2x"
         alt="{{ .Get 2 }}">
</p>

Example Usage

1
{{< retinaimg "/img/logo.png" "/img/logo@2x.png" "My Photo Alt Text" >}}

Output

1
2
3
4
5
<p>
    <img src="/img/logo.png" 
         srcset="/img/logo@2x.png 2x"
         alt="My Photo Alt Text">
</p>

Site illustrations (of Hugo the rabbit) drawn by Carina Roberts.