Get "PHP 8 in a Nuthshell" (Now with PHP 8.4)
Amit Merchant

Amit Merchant

A blog on PHP, JavaScript, and more

Make images clickable in Jekyll

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

Like this article?

Buy me a coffee

👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

Comments?