Using an Image as a Link in AsciiDoc
Asked Answered
S

1

14

I'm trying to create a "clickable" image in AsciiDoc lightweight markup language with Asciidoctor.

I tried the following (not working): image::<url1>[<url2>[]]

For example:

image::https://img.shields.io/badge/License-Apache%202.0-blue.svg[http://www.apache.org/licenses/LICENSE-2.0[]]

It should become roughly the following html:

<a href="http://www.apache.org/licenses/LICENSE-2.0"><img src="https://img.shields.io/badge/License-Apache%202.0-blue.svg"></a> 

How can I accomplish this in AsciiDoc without passing through raw HTML?

Substructure answered 15/12, 2015 at 21:11 Comment(0)
S
35

block:

image::https://img.shields.io/badge/License-Apache%202.0-blue.svg[link="http://www.apache.org/licenses/LICENSE-2.0"]

inline:

image:https://img.shields.io/badge/License-Apache%202.0-blue.svg[link="http://www.apache.org/licenses/LICENSE-2.0"]

Notice the link attribute on the image.

Staurolite answered 16/12, 2015 at 17:1 Comment(3)
This also works for relative links as well image:static/researchtab.png[link="static/researchtab.png"]Principle
And it's a good idea to include an alt attribute for images image:foo.jpg[link="bar.html" alt="Picture of a Foo"].Highroad
@DaveGauer, this can also be rewritten as image:foo.jpg[Picture of a Foo,link="bar.html"]Lamellar

© 2022 - 2024 — McMap. All rights reserved.