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:
![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:
[![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]] : assets/images/posts/2020/dexter.png : 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
I thought I might like an
image-link.html to join the crowd.
<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>