Make Image act as a hyperlink

1

Hi,
First of all I am not very experienced in markdown and couldn’t find a good answer for what I am looking to do or if this is possible currently.
When I write texts, I would like to be able to put in an image and when clicked let it redirect to te relevant article or website that describes the image.

Is it possible to embed an image (whether inline or referenced) and make that image redirect to a different URL?

So for example:

![homepage][1]


[1]: http://commonmark.org/help/images/favicon.png “Redirect to homepage”

My Goal is that if you click the markdown logo, it redirects to the homepage (commonmark.org)

2 
[![homepage][1]][2]

[1]:  http://commonmark.org/help/images/favicon.png
[2]:  http://commonmark.org "Redirect to homepage"
1 Like
3

Thank you :slight_smile:

That was exactly what I was looking for.

4

I am trying to get my head around what you say: are you referring to something like
[![img alt description](image URI)](URL of the resource)
This will take an image and turn it into a hyperlink. Is it something that you are asking?

5

It’s the equivalent of this Markdown:

[![homepage](http://commonmark.org/help/images/favicon.png)](http://commonmark.org "Redirect to homepage")

Which is doing these steps:

  1. Embedding an image called favicon.png in the document.
  2. Giving the image the alternative text “homepage”.
  3. Putting the complete Markdown image tag inside of a Markdown link (in the part where the link’s visible text normally goes).
  4. Giving the outer link the URL http://commonmark.org, so that when someone clicks on the image, it will take them to that URL.
  5. Giving the outer link the title “Redirect to homepage” (which appears when hovering with your mouse over the link in most desktop operating systems).

If you think this syntax is hard to read, that’s because it is. And to be honest, I think the more explicit HTML rendering of it is clearer.

<p>
  <a href="http://commonmark.org" title="Redirect to homepage">
    <img src="http://commonmark.org/help/images/favicon.png" alt="homepage" />
  </a>
</p>

In my opinion, we should aim to prevent any further syntax (in extensions) from becoming more complicated than this.

1 Like
6

I worded myself badly.
What I wanted to do was to embed a logo (e.g. a company logo) and that logo should act as a hyperlink to the company’s website.

The answer above does exactly that :slight_smile:

It really sounds a bit complitcated.

Thank you for the explanation.
Now it makes a bit more sense on why exactly this syntax works since all this is doing is just embedding an image as the Link text for that link.

7

It could look as simple as

[![homepage]] 

[homepage]:  http://commonmark.org/help/images/favicon.png
[![homepage]]:  http://commonmark.org "Redirect to Homepage"

but unlike some markdown implementations, Commonmark does not support this.

1 Like
8

The Markdown in this case is more complicated than the HTML because Markdown optimizes simplicity for the overwhelmingly common case it targets (articles/content, not wrapping web page chrome). A website logo that links to the homepage is typically done in the wrapping template or even in the CSS, not in each page’s content.

HTML is sometimes more optimal for nested markup. Sometimes nesting makes Markdown hard to parse for humans or for machines, as @jgm has pointed out. But mostly only in corner cases. Mostly.

So I think the Markdown syntax complexity in this case is fine. This is not an example of a Markdown flaw.

9 
[![homepage]] 

[homepage]:  http://commonmark.org/help/images/favicon.png
[![homepage]]:  http://commonmark.org "Redirect to Homepage"

This doesn’t work in Commonmark because we don’t allow unescaped brackets in link labels.
I don’t entirely recall the reasons for this, but it’s something we could reconsider, since I agree that this is a nice syntax for this case, and it works in many other implementations.

4 Likes
10

that was perfect!! it worked straight out of the box!!

tyia