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>

Edd is a PHP and Go developer, specialising in building scalable web applications. He enjoys blogging about his experiences, mostly about creating and coding new things he's working on and is a big beliver in open-source and Linux.

Follow on Twitter Donate with Paypal

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