111

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?s=128&d=identicon&r=PG

<a href="https://meta.stackoverflow.com/users/44330/jason-s">
   <img src="https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07?s=128&d=identicon&r=PG">
</a>

[<img src="https://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07?s=128&d=identicon&r=PG">][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
    +1 for The Castles of Dr. Creep ;-) – conny Dec 14 '17 at 10:16
150

It is possible to use Markdown for both the image and the link. You'll have to do it manually because the toolbar isn't smart enough to add a custom link for you.

Reference-style:

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

  [hyperlink]: https://meta.stackoverflow.com/users/44330/jason-s
  [image]: https://www.gravatar.com/avatar/…?s=128&d=identicon&r=PG (tooltip)
    or
  [image]: https://www.gravatar.com/avatar/…?s=128&d=identicon&r=PG "tooltip"

alt text

Inline-style:

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

alt text

Note that as of recent changes, any image you add to a post using the image upload UI on the desktop site will be automatically linked to itself, using 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.

  • 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! ;) – Flowpoke 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

You must log in to answer this question.

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