Make images clickable in Jekyll

Amit Merchant · April 22, 2020 ·

The blog that you’re on right now is built using Jekyll. So, the other day, I was looking for a way to make images clickable. If you’ve worked with Jekyll previously, you might be knowing that the classic way to insert an image in Jekyll is to use the following Markdown markup like so.

![Ancient Bristlecone Pine Forest, USA](/images/john-towner-unsplash.jpg)

This will render the following image.

Notice, If you try to click/tap the above image, you won’t be able to as this is simply an <img> tag. So, to make it “clickable” all you will need to do is wrap the <img> using an anchor <a> tag. And to do this, you just need to change the above markup to the following.

[![Ancient Bristlecone Pine Forest, USA](/images/john-towner-unsplash.jpg)](/images/john-towner-unsplash.jpg)

It will basically use the <img> tag as <a> tag’s content and image URL as its href. So,this will render the following html,

<a href="/images/john-towner-unsplash.jpg">
    <img 
        src="/images/john-towner-unsplash.jpg" 
        alt="Ancient Bristlecone Pine Forest, USA"
    >
</a>

This will ultimately render the following image which is now comfortably clickable and tappable!

Ancient Bristlecone Pine Forest, USA

Hi there! I'm Amit. I write articles about all things web development. If you like what I write and want me to continue doing the same, I would like you buy me some coffees. I'd highly appreciate that. Cheers!