The last time I was writing a Jekyll blog post I wanted to insert an image as a link. It turns out there are a few ways to do this. I’ll demonstrate 3 ways:

• Standard markdown link syntax
• Reference style markdown syntax
• Using Jekyll’s reusable _includes components

Standard markdown link syntax

The standard way to insert an image into a Jekyll post is to use the following markdown syntax:

![alt_text](path_to_image)

eg.

![my new puppy](assets/images/posts/2020/dexter.png)

If I want a clickable link around it, perhaps so that clicking the image directs you to the puppy’s own instagram account, I can simply wrap the image link in a standard web link:

[![alt_text](path_to_image)](web_page)

eg.

[![my new puppy](assets/images/posts/2020/dexter.png)](https://www.instagram.com/dexter_cockerjack/)

Reference style for clickable images

The reference style may be a little more readable.

[![alt_text][1]][2]

[1]: assets/images/posts/2020/dexter.png
[2]: https://www.instagram.com/dexter_cockerjack/

Note the all important blank line between the markdown link and the references

Clickable Images using Jekyll Includes

This is perhaps the most jekyll-ey way to create a clickable image link.

The _includes folder in the jekyll project folder is way to encourage the use of reusable components. Mine currently contains partials such as header.html and footer.html

I thought I might like an image-link.html to join the crowd.

_includes/image-link.html

<figure>
    <a href="">
        <img src="" alt="" />
        
    </a>
</figure>

Then within the markdown page for your jekyll post you can add:

<figure>
    <a href="https://www.instagram.com/dexter_cockerjack/">
        <img src="assets/images/posts/2020/dexter.png#wide" alt="Dexter" />
        
        <figcaption class="caption-text">Come and see Dexter's Instagram Account</figcaption>
        
    </a>
</figure>

Come and see Dexter's Instagram Account