Hyperlink on an image to open webpage in new tab

Viewed 85

How do I attach a hyperlink to an image to open in a new window in Jekyll.

In HTML it would read something like

<a href="https://www.google.com/">
  <img alt="Google Logo" src="https://www.google.com/images/logo.png" width=150" height="70" target="_blank">
</a>

What code would I use in Jekyll to achieve this?

1 Answers

Since Jekyll is using Kramdown as Markdown renderer, you can use the span IAL to add any attribute to a link.

Additional link attributes can be added by using a span IAL after the inline link, for example:

This is a [link](http://example.com){:hreflang="de"}

Source: https://kramdown.gettalong.org/syntax.html#inline-links

So in your case you can go with

[![Google Logo](https://www.google.com/images/logo.png)](https://www.google.com/){:target="_blank"}

Which indeed renders as

<a href="https://www.google.com/" target="_blank">
  <img src="https://www.google.com/images/logo.png" alt="Google Logo">
</a>
Related