# Make Image act as a hyperlink **URL:** \ **Category:** Uncategorized\ **Created:** [May 4, 2018, 12:34pm UTC](https://talk.commonmark.org/t/make-image-act-as-a-hyperlink/2805 "2018-05-04T12:34:23Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![Fyrenic](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/fyrenic/32/1384_2.png) [@Fyrenic](https://talk.commonmark.org/u/Fyrenic)\ **Post date:** [May 4, 2018, 12:34pm UTC](https://talk.commonmark.org/t/make-image-act-as-a-hyperlink/2805/1 "2018-05-04T12:34:23Z")
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](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](http://commonmark.org)) ---
**Author:** ![jgm](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/jgm/32/1360_2.png) [@jgm](https://talk.commonmark.org/u/jgm)\ **Post date:** [May 4, 2018, 4:57pm UTC](https://talk.commonmark.org/t/make-image-act-as-a-hyperlink/2805/2 "2018-05-04T16:57:18Z")
```auto [![homepage][1]][2] [1]: http://commonmark.org/help/images/favicon.png [2]: http://commonmark.org "Redirect to homepage" ``` ---
**Author:** ![Fyrenic](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/fyrenic/32/1384_2.png) [@Fyrenic](https://talk.commonmark.org/u/Fyrenic)\ **Post date:** [May 4, 2018, 5:01pm UTC](https://talk.commonmark.org/t/make-image-act-as-a-hyperlink/2805/3 "2018-05-04T17:01:40Z")
Thank you 🙂 That was exactly what I was looking for. ---
**Author:** ![arinbasu](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/arinbasu/32/1084_2.png) [@arinbasu](https://talk.commonmark.org/u/arinbasu)\ **Post date:** [May 6, 2018, 1:01am UTC](https://talk.commonmark.org/t/make-image-act-as-a-hyperlink/2805/4 "2018-05-06T01:01:20Z")
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? ---
**Author:** ![chrisalley](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/chrisalley/32/906_2.png) [@chrisalley](https://talk.commonmark.org/u/chrisalley)\ **Post date:** [May 6, 2018, 10:48am UTC](https://talk.commonmark.org/t/make-image-act-as-a-hyperlink/2805/5 "2018-05-06T10:48:38Z")
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. ```auto

homepage

``` In my opinion, we should aim to prevent any further syntax (in extensions) from becoming more complicated than this. ---
**Author:** ![Fyrenic](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/fyrenic/32/1384_2.png) [@Fyrenic](https://talk.commonmark.org/u/Fyrenic)\ **Post date:** [May 6, 2018, 11:27am UTC](https://talk.commonmark.org/t/make-image-act-as-a-hyperlink/2805/6 "2018-05-06T11:27:20Z")
> [@arinbasu](#): > > 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? 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 🙂 > [@chrisalley](#): > > 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. 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. ---
**Author:** ![Crissov](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/crissov/32/1455_2.png) [@Crissov](https://talk.commonmark.org/u/Crissov)\ **Post date:** [May 7, 2018, 8:42am UTC](https://talk.commonmark.org/t/make-image-act-as-a-hyperlink/2805/7 "2018-05-07T08:42:42Z")
It could look as simple as ```markdown [![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. > [@Thumbnail image linking to full version](https://talk.commonmark.org/t/thumbnail-image-linking-to-full-version/2629): > > 1. [![alt1](thumb1.img)](full1.img) 2. - [![alt2](thumb2.img)] - [![alt2](thumb2.img)][] 3. - [![alt3]](full3.img) - [![alt3][]](full3.img) 4. - [![alt4]] - [![alt4][]][] 5. [![alt5][thumb]][full] \_\_\_\_ [alt2]: full2.img [![alt2](thumb2.img)]: alternate2.img [alt3]: thumb3.img [alt4]: picture4.img [thumb]: thumb5.img [full]: full5.img [Babelmark](https://babelmark.github.io/?text=1.+%5B!%5Balt1%5D(thumb1.img)%5D(full1.img)%0A2.+%0A+++-+%5B!%5Balt2%5D(thumb2.img)%5D%0A+++-+%5B!%5Balt2%5D(thumb2.img)%5D%5B%5D%0A3.+%0A+++-+%5B!%5Balt3%5D%5D(full3.img)%0A+++-+%5B!%5Balt3%5D%5B%5D%5D(full3.img)%0A4.+%0A+++-+%5B!%5Balt4%5D%5D%0A+++-+%5B!%5Balt4%5D%5B%5D%5D%5B%5D%0A5.+%5B!%5Balt5%5D%5Bthumb%5D%5D%5Bfull%5D%0A%0A ____ %0A++%5Balt2%5D%3A+full2.img%0A++%5B!%5Balt2%5D(thumb2.img)%5D%3A+alternate2.img%0A++%5Balt3%5D%3A+thumb3.img%0A++%5Balt4%5D%3A+picture4.img%0A++%5Bthumb%5D%3A+thumb5.img%0A++%5Bfull%5D%3A+full5.img) All implementations get #1 right and most also #5. Many can do something useful with #3, some also with #2, few with #… ---
**Author:** ![vas](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/vas/32/1267_2.png) [@vas](https://talk.commonmark.org/u/vas)\ **Post date:** [May 7, 2018, 1:39pm UTC](https://talk.commonmark.org/t/make-image-act-as-a-hyperlink/2805/8 "2018-05-07T13:39:36Z")
> [@chrisalley](#): > > 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. > > ```auto >

> > “homepage” > >

> > ``` > > In my opinion, we should aim to prevent any further syntax (in extensions) from becoming more complicated than this. 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](https://talk.commonmark.org/t/beyond-markdown/2787). 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. ---
**Author:** ![jgm](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/jgm/32/1360_2.png) [@jgm](https://talk.commonmark.org/u/jgm)\ **Post date:** [May 7, 2018, 4:58pm UTC](https://talk.commonmark.org/t/make-image-act-as-a-hyperlink/2805/9 "2018-05-07T16:58:07Z")
```auto [![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. ---
**Author:** ![KaiBuskirk](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/kaibuskirk/32/2605_2.png) [@KaiBuskirk](https://talk.commonmark.org/u/KaiBuskirk)\ **Post date:** [August 24, 2022, 4:46pm UTC](https://talk.commonmark.org/t/make-image-act-as-a-hyperlink/2805/10 "2022-08-24T16:46:24Z")
> [@jgm](#): > > ```auto > [![homepage][1]][2] > > [1]: http://commonmark.org/help/images/favicon.png > [2]: http://commonmark.org "Redirect to homepage" > > ``` that was perfect!! it worked straight out of the box!! tyia