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?
-
3"in a graphical editor", I'm afraid, is the correct answer– John DvorakCommented Oct 23, 2013 at 13:48
-
4there is a trick with blockquotes: Do images need a border around them?– Kate GregoryCommented Oct 23, 2013 at 13:50
-
@KateGregory I'm not clear with the link, Can you please tell me how should I define blockquotes– BalaCommented Oct 23, 2013 at 13:55
-
Go to that question and click edit so you can see the markdown source. The > character defines a blockquote.– Kate GregoryCommented Oct 23, 2013 at 13:57
-
1@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 StaffCommented Oct 23, 2013 at 14:00
-
@AaronBertrand you're right. Upvoting.– John DvorakCommented Oct 23, 2013 at 14:03
-
3Might 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 StaffCommented Oct 23, 2013 at 14:03
Add a comment
|
3 Answers
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:
Border:
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...
...or after the fact, using markdown/WYSIWYG toolbar. For something so trivial, this should be more seamless than requiring Photoshop or another image editor.
answered Oct 23, 2013 at 13:58
-
1I'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.– BalaCommented Oct 23, 2013 at 14:05
-
5While 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.– JonWCommented Oct 23, 2013 at 14:06 -
1@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 StaffCommented Oct 23, 2013 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.– JonWCommented Oct 23, 2013 at 14:08
-
"you can hack a workaround using a blockquote" Blockquotes used to have a yellowish background, but now they just have a grey accent on the right so it doesn't quite give the same emphasis as before.– LaurelCommented Oct 22, 2022 at 19:32
-
1@Laurel fair, the CSS has changed in the 9 years since I posted this answer.– Aaron Bertrand StaffCommented Oct 24, 2022 at 0:13
I use the horizontal rule:
Source for above:
----------
![test-image][1]
----------
-
1
More variants:
One-cell table:
Source:
|![test-image][1]| |---| [1]: https://i.sstatic.net/JFrky.png<kbd>tag:Source:
<kbd>![test-image][1]</kbd> [1]: https://i.sstatic.net/JFrky.png
P.S. But I agree with JonW's comment that such markup confuses the semantics and accessibility; and it would be nice to have a border setting directly for the image.
