12

When I see this question with image, looks horrible and not able to understand properly. So I tried to add border for the image, but I'm stuck, I don't know how to add border for the image to make it clear view of the question. How to add border around the image?

  • 2
    "in a graphical editor", I'm afraid, is the correct answer – John Dvorak Oct 23 '13 at 13:48
  • 3
    there is a trick with blockquotes: meta.stackexchange.com/questions/138594/… – Kate Gregory Oct 23 '13 at 13:50
  • See my suggested edit. It's anonymous because I'm not on that site, but @Kate is right about the blockquotes. – Aaron Bertrand Oct 23 '13 at 13:55
  • @KateGregory I'm not clear with the link, Can you please tell me how should I define blockquotes – Bala Oct 23 '13 at 13:55
  • 2
    @Bala seriously? Did you even read any of it in the 20 seconds it took you to respond??? – Aaron Bertrand Oct 23 '13 at 13:57
  • Go to that question and click edit so you can see the markdown source. The > character defines a blockquote. – Kate Gregory Oct 23 '13 at 13:57
  • @KateGregory thanks, done – Aaron Bertrand Oct 23 '13 at 13:59
  • @JanDvorak to be fair, this is a pretty simple CSS thing that should be made easy and accessible through the WYSIWYG editor. I have no problem creating images with borders in the first place, but I shouldn't have to download someone else's image, mark it up in Photoshop, and re-upload it for something that could easily be handled in markup. – Aaron Bertrand Oct 23 '13 at 14:00
  • @AaronBertrand you're right. Upvoting. – John Dvorak Oct 23 '13 at 14:03
  • 2
    Might be a duplicate of this one - doesn't ask for a border but a border or drop shadow could be implemented in the same way. – Aaron Bertrand Oct 23 '13 at 14:03
10

While I feel there should be an easy way to apply this via CSS using the WYSIWYG editor/markdown, there isn't. Perhaps this feature request should be expanded to include an option of a drop shadow or a border. The alternative is to download the image, mark it up in Photoshop, and re-upload. For my own images I usually know enough to just do that in the first place, but most people don't, and that's not how we should be spending our time on other people's posts when there is such an easier way to accomplish the same effect. I do agree that visual separation of images in a post can often be very important.

In the meantime, you can hack a workaround using a blockquote by prefixing the image with >.

No border:

enter image description here

Border:

enter image description here

See the difference? Click edit to view the source!

What I would like to see (and see my answer here) is the ability to add a border via CSS when I upload an image...

enter image description here

...or after the fact, using markdown/WYSIWYG toolbar. For something so trivial, this should be more seamless than requiring Photoshop or another image editor.

  • 1
    I'm stuck because, when I try it by clicking the blockquotes icon, its not rendering. but anyway it works like you suggested I added the > in front. – Bala Oct 23 '13 at 14:05
  • 4
    While I agree that this works visually (and use this technique myself) it's not really the correct way to add a border. Syntactically adding it into a quote should mean that it actually is a quote. Using such <blockquote> for styling harks back to the old days of using <table> for styling things (or even using the codeblock in answers for styling stuff that isn't code). Just because visually it gives the desired effect doesn't mean it is the correct method to do it. I think there should be a better option that this for images. – JonW Oct 23 '13 at 14:06
  • @JonW I never suggested that it was the correct way to do it, at all. Semantics and hard-core W3C standards compliance aside, sometimes on this network we need to use workarounds because the correct way to do something isn't possible. – Aaron Bertrand Oct 23 '13 at 14:07
  • @AaronBertrand: Sorry, didn't mean to direct this at you personally (as I said I do exactly the same thing), it's more of a point about the CK editor itself only offering this as an option. It should be an actual feature of the editor to add a border. – JonW Oct 23 '13 at 14:08
  • also, this does not work with mobile – John Dvorak Oct 23 '13 at 15:25
  • @JanDvorak Add it to the list. :-) Honestly, I wouldn't expect mobile to ever have full parity and cosmetic equivalence with desktop, and I don't think that it's a requirement or even a goal. – Aaron Bertrand Oct 23 '13 at 15:30
5

I use the horizontal rule:


test-image


Source for above:

----------

![test-image][1]

----------
  • nice idea!!!!!!! – Bala Oct 24 '13 at 1:29

You must log in to answer this question.

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