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 click the image. 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, in order to make it “clikable” 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">

This will ultimately renders to the following image which is now comfortably clickable!

Ancient Bristlecone Pine Forest, USA

Twitter, Facebook

Hi there! I'm Amit. I write articles about all things web development. If you like what I write, buy me a coffee. I'd highly appreciate that. Cheers!


Follow me on Twitter as @amit_merchant