What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 150 Stack Exchange communities.

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="http://meta.stackoverflow.com/users/44330/jason-s">![alt text][1]</a>
[1]: http://www.gravatar.com/avatar/dd5a7ef1476fb01998a215b1642dfd07?s=128&d=identicon&r=PG

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

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

This does not:

<a href='http://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

share|improve this question

3 Answers 3

up vote 91 down vote accepted

It is possible to use Markdown for both the image and the link. You'll have to do it manually because, as you said, the toolbar isn't smart enough to do it for you:

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

  [1]: http://meta.stackoverflow.com/users/44330/jason-s
  [2]: http://www.gravatar.com/avatar/dd57e..dfd07?s=128&d=identicon&r=PG (hover text)

alt text

share|improve this answer
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
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 at 13:14

Not sure if this is what you are asking but you can nest the image inside the link markup like so.

[ ![Image](/images/image.jpg "Image title") ](http://google.com "Google")

share|improve this answer
Yes, this is Kyle Cronin's answer. (Posted a year before yours!) – ShreevatsaR Feb 1 '11 at 5:28
This answer uses the inline style, which I prefer. – JDB Sep 3 '13 at 17:47
This is exactly what I was looking for. Thanks. – chicks Nov 12 '14 at 17:55

this is also a way to do it

[ ![your alt][1]](http://meta.stackexchange.com/users/214576/nickleefly)

[1]: http://www.gravatar.com/avatar/904b50a077af81db10ea520be1127968?s=128&d=identicon&r=PG

your alt

share|improve this answer
So what does that markup end up showing? An example would be great. – Lance Roberts Mar 7 '13 at 14:48
@LanceRoberts I updated the markup, it was a wrong format, sorry for any inconvenience. – nickleefly Mar 17 '13 at 15:19

You must log in to answer this question.

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