Written by Edd Turtle on makewithhugo.com
on

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>
#shortcode #retina #image #highdef #srcset
Author Edd Turtle

Edd is a PHP and Go developer who 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.

Tweet me! Buy me a Coffee (Paypal)

Related Posts

  • Shortcode to Add a Strikethrough –
    There are times that your imagination streches beyond markdown’s capabilities. When this happens it can be easiest to use HTML with your post, but Hugo doesn’t always like this. If we create a shortcode though we can switch between markdown and html easily.
  • Shortcode: Add Raw HTML to Your Posts –
    There are times that your imagination streches beyond markdown’s capabilities. When this happens it can be easiest to use HTML with your post, but Hugo doesn’t always like this. If we create a shortcode though we can switch between markdown and html easily.