120

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
161

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

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

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

You must log in to answer this question.

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