124

What's the recommended syntax for an image with a hyperlink? I tried doing it with the markdown toolbar buttons and the image and link buttons conflict with each other, so I had to resort to HTML.

For example, to do this:

alt text

These work properly:

<a href="https://meta.stackoverflow.com/users/44330/jason-s">![alt text][1]</a>
[1]: https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07

<a href="https://meta.stackoverflow.com/users/44330/jason-s">
   <img src="https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07">
</a>

[<img src="https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07">][2]
[2]: https://meta.stackoverflow.com/users/44330/jason-s

This does not:

<a href='https://meta.stackoverflow.com/users/44330/jason-s'>![alt text][1]</a>

(single quotes not allowed?)

Is there a way to do the same thing in Markdown without having to resort to HTML?

Return to FAQ index

1
  • 3
    +1 for The Castles of Dr. Creep ;-) – conny Dec 14 '17 at 10:16
164

It is possible to use Markdown for both the image and the link. You have to do it manually because the the toolbar's default behavior is to make the clickable image point to the URL of the image itself.


Reference-style:

[![alt text][image]][hyperlink]

  [hyperlink]: https://meta.stackoverflow.com/users/44330/jason-s
  [image]: https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07 (tooltip)
    or
  [image]: https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07 "tooltip"

alt text


Inline-style:

[![alt text](image "tooltip")](hyperlink)
  for example:
[![alt text
](https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07
"Let's check Jason S' profile page")
](https://meta.stackoverflow.com/users/44330/jason-s)

alt text


Since July 2015 the insert image feature (Ctrl + G) of the toolbar of the Stack Exchange Markdown editor by default adds a clickable link to the image itself.1

It uses the following syntax:

[![enter image description here][number]][number]

where number is an automatically generated number.

To change the link to something else, simply change the second [number] with (*your URL here*) (in parentheses) or use the reference style syntax above.


You can get the default behavior without using the [number] construct.

Inline-style, default behavior:

[![A click on the image links to its own URL.
](https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07
"A click on the image links to its own URL.")
](https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07)

A click on the image links to its own URL.

The observant reader will notice that to achieve the inline-style default behavior, the URL to the image must be supplied twice. The first link is there to display the image, the second link makes the image clickable.


References:
https://meta.stackexchange.com/a/261182
FAQ for Stack Exchange sites | Editing and Formatting
Extra square brackets and numbers when using automated link or add picture feature in questions and answers
Why does the images index on Stack Overflow appear twice?


1 The previous default behavior was to just display the image - without any link at all.

7
  • 26
    In other words, whatever the syntax for the image, treat that whole syntax as the text to link. So the ugly syntax also works: [![alt text](image link)](web link) – ShreevatsaR Jan 9 '11 at 5:55
  • 1
    Excellent! It makes sense but I never got that far in because once I start typing it I think to myself, this can't possibly be right, it's too ugly. but it aint... you ugly! ;) – Ben Keating Mar 21 '11 at 17:00
  • This works in general for Markdown, not only for StackOverflow, it seems! – fatuhoku Aug 19 '13 at 23:52
  • +1 for the (hover text) tip. – Mogsdad Jun 27 '15 at 13:14
  • @ShreevatsaR This doesn't work for chat. Is there a way to do this in chat? – mbomb007 Oct 4 '16 at 19:15
  • @mbomb007 I don't know, sorry. – ShreevatsaR Oct 4 '16 at 19:23
  • 1
    @ShreevatsaR this should be another answer since it's a simpler different form – danfromisrael Nov 9 '16 at 13:54
1

For numerically indexed URLs, just make a new numbered URL.

For example, when you insert an image with the fancy editor, it starts off linking to itself. In HTML terms, the a.href link URL is the same as img.src image URL.

[![alt text][1]][1]

[1]: https://i.stack.imgur.com/wPW28.png

Just add a new URL for the link:

[![alt text][1]][2]

[1]: https://i.stack.imgur.com/wPW28.png
[2]: https://www.timeanddate.com/astronomy/moon/light.html?month=3&day=20&year=2040&hour=19&min=00&sec=0&n=64&ntxt=Chicago&earth=0

The result:

alt text

So (http://example.com) can be replaced with [42] ... [42]: http://example.com

1
  • it is better to edit the original answer, which is Community Wiki, then to append one. For clarity. – Luuklag Aug 21 '20 at 14:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .