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

Right now as far as I can tell all images have to appear as inline paragraphs, left-aligned with other paragraphs.

For sites like Stack Overflow, it makes sense... images are only used when you want to illustrate something, so the image is sort of like something that they have to stop and "read".

a decorative image

On some of our newer sites, like Travel, images can serve a more decorative function, making questions and answers look awesome and interesting. For example, when somebody asks about trains in Mongolia, an answerer might write an extensive answer and then attach a picture showing them standing in front of a train in Ulan Bator.

For these "decorative" pictures, it makes a lot more sense if they are floated to the right and text wraps around them. Otherwise they interrupt the text and, frankly, look kinda ugly.

I suggest something simple like $[...] instead of ![...].

share|improve this question
8  
I'd much rather have markdown support for centering images. That seems like something that could be used far more widely across the network than text wrapping. (And no, manually centering an image with   characters is not "support".) –  Cody Gray Jul 23 '11 at 15:50
1  
This would also be great in user profiles like mine stackoverflow.com/users/114029/leniel-macaferi where that last big image "works on my machine" could be moved up to have a nice flow... –  Leniel Macaferi Jun 1 '12 at 7:49
    
One option that I tried to make text flow around images is using raw HTML as the editing help suggests. Unfortunately, the align attribute is not supported. Until this logjam is broken up, it will be impossible to embed images in a non-embarrassing way. –  Jon Ericson Oct 3 '12 at 19:50
    
you can place small images inline, see the example in: meta.stackexchange.com/questions/194418/… (although it might not work in some browsers) –  rubo77 Aug 23 '13 at 8:40
    
Did anything ever happen with this? I have a few posts that would strongly benefit from being able to float images. –  Oli Jun 30 at 7:55

3 Answers 3

up vote 5 down vote accepted
+50

I think this feature would be really helpful. Treating images like paragraphs introduces a break in the flow of reading and only makes sense if you want the person to actively look at the image and then return to the text. When you're just casually referring to something in the image or if it's a small image, it is nicer to have text wrapped around it, giving it a more blog like feel.

This can perhaps be accomplished with minimal changes to the markup. Something like

![...][1][l|r|c]

to align left, right or center (only one of the three can be used). If l or r is used, then the text continues and flows around the image on the opposite side and with c, the image is simply centered. If none of these options are given, it works just as it does now. This way, none of the existing images get broken.

If this is going to be implemented, it'd be nice if the text were also justified, as it is more pleasing to the eye. The use of unjustified text simply cannot be justified!

Extension to Joel's request:

I'd also like to extend this request to include image blocks (or whatever is the right word for it) for sequential images which need not be placed one below the other. For e.g., for a list of all Star Wars movies ever made, compare this display:

enter image description here

to the same 3 images, but stacked one below the other. To me, the above seems neater and takes up less space, which means less scrolling to the next part of the answer, which in turn leads to a better user experience.

In some ways, it gives users a better control of the layout of their answer without having to force them to combine their images in some image editing software. However, I can also see why this might get shot down, because even after all these years, MS Word still cannot figure out how to wrap text around an image neatly without breaking it when I insert a new image/paragraph.

share|improve this answer
4  
Your three-image example is very well supported nowadays: just remove the blank lines between subsequent images. –  Arjan Jul 23 '11 at 17:18
    
That's true, I had forgotten that and in fact, I even used it in a question of mine. I guess what I was trying to get at is that currently, if you add multiple images without a blank line as you said, it will overflow to the next row once it exceeds the width. What I'm proposing is that if I opened an image block and added 5 images, all 5 would be placed next to each other and the entire block resized to the size of the text container, just like how single images wider than the text area are automatically resized. –  Lorem Ipsum Jul 23 '11 at 17:26
    
Currently I think that the overflow is nice for mobile devices. That aside, I wonder if it could be done using plain CSS hacks (without, for example, actually knowing the image widths on the server side). –  Arjan Jul 23 '11 at 17:31

I'd rather not see a new Markdown-like tag (remember the datadumps). Also, if wrapping/floating is added, I think folks should be warned about other usages, like displaying on mobile devices.

share|improve this answer
1  
It's up to the mobile-specific style sheets to adapt. They could either not honor the request to float, or they could resize the image to 30% width so that it looks OK on mobile... either way, it's not the poster's problem to decide how to format for small screen, it's our job. All I'm suggesting is some minor syntax that indicates a hint by the poster that a particular image is a decoration, not a part of the narrative, which we choose to interpret using float:right in the normal web view. –  Joel Spolsky Jul 23 '11 at 19:36
    
As far as markdown is concerned, that is a smart thing to think about now, and it's good that you brought it up. Maybe we can come up with a syntactic notation that, if ignored, does no damage. For example we could use >![alt text](img url) - any markdown processor that didn't understand the special rule for >! would just show the image indented, which is relatively harmless. –  Joel Spolsky Jul 23 '11 at 19:40
    
Actually, @Joel, on a small screen the image should kind of be made taller to fit the same amount of text next to the image ;-) (A paragraph of text often takes more lines on smaller screens.) A syntax with fallback, just like spoiler text, would indeed be nice. –  Arjan Jul 23 '11 at 20:24

I'm not convinced that this would reliably produce results that are any less ugly than leaving the images as they are now. For example, check out how your post might look. The text to the left of the image appears a bit cramped to me, and my eyes are distracted from the text by the deeply contrasted blue of the image (although this happens to some degree in both cases, and is somewhat specific to this case).

Granted, the poster has the ability to determine if this display format is appropriate on a post-by-post basis, but that doesn't mean they'll always make a good choice. Also, there are a few implementation complications involved worth considering.

First, the upload dialog would have to be updated to reflect the two options, since I imagine the image Markdown is a syntax very few people actually type themselves. Following that comes the issue of where to insert the image.

As far as I can tell, to make this work properly, the image must come before the text that it's meant to float next to it. Since the image floats to the right, people might not understand this process, and may be inclined to place the image after what they've written. It would also mean that the clear:both would have to be removed from the paragraph style, otherwise there are a number of ways this would display incorrectly. That might not be a problem, but until I know otherwise I assume it's in the CSS for a reason.

I don't necessarily think this is a terrible idea, but I'm not seeing a strong reason why it's worth the effort of implementing it, and I'm not sure how effectively this would be used by the casual poster.

share|improve this answer
6  
Arguing that we shouldn't allow floating images because people will mess it up is like arguing that we shouldn't allow code because people won't properly indent the code, and their code will be badly formatted. It's true, people don't format their code properly, and they won't format their images properly, and other people will come along and fix it, as has always been the case, and in the end, we all have a nicer looking site. –  Joel Spolsky Jul 23 '11 at 19:33
4  
I'm more concerned about the technical approach, really, but that's fair, people will edit. That being said, I think that the comparison with code formatting is a bit off. Badly formatted code typically has a very clear fix, and I'm not sure that that's the case with images. If an image isn't floated, for example, is that the user's mistake, or their intention? I don't think anyone prefers to read poorly formatted code, but differences in opinion might arise over image positioning. –  Tim Stone Jul 23 '11 at 19:43
    
@JoelSpolsky I think that's a poor comparison because formatting code is an absolute necessity on Stack Overflow and aligning images is not. There are hundreds of additional features we could give to users. But to keep the sites simple to use, a good balance is needed. People make a lot of mistakes now when formatting, if we give them a difficult tool to use it should have a high enough value to warrant that. Also, the argument "other people will come along and fix it" sounds like you're just offloading more work on the editors... –  The Unhandled Exception Jan 22 '12 at 14:29

You must log in to answer this question.

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