We are launching some editor improvements today. These improvements are required as a part of our responsive design efforts, but we think they are generally useful in any case. So we are making them available on all sites.

So, what's being improved?

Adding a link and image in your post is no longer done via pop up dialog. Instead the controls show up inline with the editor. This is sleeker and prepares the way for us to make our desktop theme work across all devices (for now most people will still want to use mobile view on mobile devices).

Insert hyperlink experience

You can now paste or drag and drop an image into the editor (a frequent request 1, 2, 3, 4).

animation showing pasting an image into the editor

Check it out and let us know if you encounter any problems (aka bugs).

  • 18
    The modals were getting a little dated, this looks much nicer. – Something Bad Happened Oct 31 at 15:24
  • 19
    Okay as far as it goes, but we really need an elegant way to specify the height or width, since this bug is not being addressed. – Awesome Poodles Oct 31 at 19:43
  • 2
    The only thing I have to say is, you put a lot of efforts and made a new feature, just to replace a ctrl+G – Optimus Prime Nov 1 at 6:09
  • 1
    Coincidentally that is also updated to https:// now! :) – Pandya Nov 1 at 8:54
  • 2
    @JoeFriend In your last gif I don't see how you went from clicking "Add Picture" to one getting uploaded. Where is the step where you choose which picture to add? – TylerH Nov 1 at 14:49
  • 1
    @TylerH I pasted the image from the clipboard. – Joe Friend Nov 1 at 15:01
  • 29
    This is one change that I'm really happy with and pleased to see here. I know you've had a lot of negative feedback on other design changes, so let me just say thank you for this. – Rand al'Thor Nov 1 at 16:34
  • 25
    Now we just need an automatic ghostban for anyone who leaves the alt text as "enter image description here" – Lightness Races in Orbit Nov 1 at 17:43
  • 1
    @JoeFriend I see; I realized after looking at another related thread that you must be pasting in a copied image immediately after pressing the "add image" option. The gif would be much clearer if it showed you selecting an image from somewhere and copying it via the contextual menu; right now it seems like the browser/editor/site already has the image stored somehow. – TylerH Nov 1 at 17:44
  • 8
    I like the new UI, I really do... but it should not have gone live before whatever was preventing upload-by-URL was fixed. As it is, the biggest change you've introduced is to completely remove a crucial feature. – Lightness Races in Orbit Nov 1 at 17:47
  • 1
    @TylerH You're right, was just reading about it in parallel (probably should have done that first). Have commented on meta.stackexchange.com/q/317578/155739 because it turns out this is not a delayed part of the redesign but a deliberate feature hiding! – Lightness Races in Orbit Nov 1 at 17:50
  • 1
    The only thing that works is the drag and drop. Chromium 61; Windows 10x64. If I attempt to select a file and/or paste a url it does nothing – Ramhound Nov 1 at 20:54
  • 2
    I HATE dragon-droppings with a passion (as I suspect many who have passed the 3 score years and ten do) - I just don't have the manual dexterity. The existing method is clumsy and slow, but works. My preferred MOU would be to paste a text link to the file to upload - by all means allow dragon-droppings as an option for the young. – Milliways Nov 3 at 2:56
  • 1
    While you're working on the "insert link" feature, any change you could do something about meta.stackexchange.com/questions/234680/… too? – Ilmari Karonen Nov 3 at 2:58
  • 3
    I upvoted this a long time ago. It was a mistake. It's November 6 when is the defect, bug, broken feature etc. as reported by Shadow Wizard and TheLethalCoder going to work as it did, perfectly I might add, before this new improved and updated programme was launched? – Mari-Lou A Nov 6 at 10:06

15 Answers 15

Might be me missing something but how do I add an image via link to upload to imgur? There used to be an option for that but I can't tell anymore.

Add Image tab

  • 12
    Related: Can't upload image from URL anymore – and myself Oct 31 at 16:21
  • 1
    We no longer have an explicit entry point for this, but you can paste an image link when the uploader UX is showing. Currently there is a focus bug that we are working on fixing that makes it fail. If you click somewhere on the dialog, then it will work. – Joe Friend Oct 31 at 16:40
  • 85
    @JoeFriend This doesn't seem very intuitive to the point of I reckon that most people won't even know you can paste a link. This may either need a label that you can copy/paste a link or a text box. – TheLethalCoder Oct 31 at 16:41
  • 6
    @JoeFriend I agree with TheLethalCoder here, better make it explicit. – EKons Oct 31 at 17:00
  • 8
    @JoeFriend If you haven't already, you may want to look at Imgur's image uploader. It feels intuitive to me, and has 4 different ways to upload: drag&drop, click to open file selector, paste URL, paste raw image. Personally I find paste raw image to be very useful, since I quite often use Win+Shift+S to put part of my screen into my clipboard. – The Guy with The Hat Oct 31 at 17:20
  • 5
    This has bitten me already. – Organic Marble Oct 31 at 20:19
  • 5
    Pasting an image URL shouldn't need a modal/tab/etc at all. The default behavior for pasting http://www.example.com/what/ever/image.png into the editor should be to create the appropriate markdown needed to embed the image. Leave reverting to the raw URL available via a floating X button or the equivalent next to the insertion point. – Dan Neely Oct 31 at 23:57
  • 12
    That was my first thought as well, @Dan... But, after thinking about it a bit... I realized just how frustrating this would be for sites like SO, SU, Web Devs, etc., where pasting URLs (to images, even) is a common activity in situations where said URL isn't supposed to actually be an embedded image (or even a link). A sufficiently context-aware editor might be able to handle this gracefully, but I suspect it would end up being more of an annoyance than an aid for a lot of folks. – Shog9 Nov 1 at 16:47
  • @Shog9 I think that'd be the minority case overall, and that a 1 click or keystroke (backspace or ctrl-z) undo would be less disruptive to the paste a link to an image than having to click an icon and then switching to a new view before being able to embed an image on the insert an image workflow. And with the current focus on reducing friction for newer users, an automatic image url to embedded image transform would be in line with the trend I've seen more often as other sites update their editors. – Dan Neely Nov 2 at 15:12
  • @JoeFriend What am I supposed to do if the link I copied has errors? How can I edit it? Or am I forced to paste the like elsewhere, edit it and then co and past it back again? That seems like a lot of work just to fix a small typo. – TheLethalCoder Nov 6 at 8:15
  • @TheLethalCoder after pasting the URL it is pasted into ordinary textbox, you can edit it just fine. – Shadow Wizard Nov 8 at 8:06
  • @ShadowWizard I haven’t tried for a while has this changed again? – TheLethalCoder Nov 8 at 8:20
  • @TheLethalCoder there was focus bug that caused pasting to not work, they fixed it. If you now click the image icon in editor then paste a URL (without clicking, just CTRL+V) see what happens. It's still in "planned" status as they don't say anywhere it's possible, and it's not possible at all with touch screens which have no option to paste. – Shadow Wizard Nov 8 at 8:26
  • 1
    An explicit text box for URLs of images is definitely better. I don't know of any place that allows URLs for images that doesn't have one. And a lot of design is about expectation. – trlkly Nov 8 at 22:16

When on the insert hyperlink/image tab you should be able to swap to a different tab if wanted, currently you have to cancel and then select another tab.

Add Image tab

  • 16
    +1, they definitely feel like tabs now – Clonkex Nov 1 at 22:19
  • On the other hand, the other buttons up there don't work as tabs either - most of them leave some markup and/or placeholer texts behind when clicking them. – Hulk Nov 5 at 11:23
  • 1
    @Hulk Not all are like tabs no but some are – TheLethalCoder Nov 5 at 11:47

The orange highlight colour looks out of place on all sites which use another primary colour. This should adapt to the individual sites.

For example on TeX.SE the terrible colour clash could be avoided by using rgb(191, 76, 81) to highlight the icons.

Screenshot of the image uploading dialogue as shown on TeX.SE

  • 31
    Orange is the new rgb(191, 76, 81). – Awesome Poodles Oct 31 at 19:43
  • 14
    @AwesomePoodles :) I'd prefer if rgb(191, 76, 81) would be the new orange – samcarter Oct 31 at 19:46
  • 1
    Please change the alt text of this image from "enter image description here" to something meaningful so that everybody can understand. The clue was the clear instruction given as placeholder text to be honest. – Lightness Races in Orbit Nov 1 at 17:43
  • 2
    @LightnessRacesinOrbit I added an alt text to the image. Please let me apologise for not adding it right away! – samcarter Nov 1 at 18:59
  • Thanks @samcarter – Lightness Races in Orbit Nov 1 at 19:03
  • 14
    The irony is that they've been doing all this site code base "unification" and can't even get stuff like this right now that they've done it. Clearly, the color should be pulled from one of the site's existing theme colors (or a new theme color needs to be added and set for all sites). Knowing to watch for color clashes isn't rocket science. – jpmc26 Nov 1 at 19:48
  • 1
    @jpmc26 it takes longer to change entrenched mindsets than the original reality that caused them. The entrenched mindset is that all sorts of details are hardcoded and can/will be changed as needed for each additional site theme. Give them a year or two to get used to everything belonging a in a config file of some sort so that it can be adapted without making any code changes. – Dan Neely Nov 2 at 15:06

Could you adjust this so that clicking the body of your post makes the recently opened menu close? Currently, it's just disabled.

Oddly, I find myself dismissing an insert link or insert image prompt quite often (just how I work, I often think I should add a link or image, click add link, go to lookup a link, find it doesn't fit well, dismiss the popup), and I'm used to just clicking somewhere to dismiss it.

With these new popups, the only way to dismiss it seems to be pressing the cancel button, which isn't small but the body text is a lot larger and allows me to continue editing the post right away. The previous ones were dismissed whenever someone clicked outside of the popup area.

(Yes, this may be trivial, but I hope it's also trivial to implement and it does increase UX for me, at least).

  • 6
    Escape key also works to dismiss – Shog9 Oct 31 at 17:06
  • If this is implemented, it should really not be implemented for touchscreens. It's super irritating for blank parts of pages to have “active” behaviours, especially ones that cancel what you're doing when you accidentally fatfinger outside a modal. – SevenSidedDie Nov 8 at 5:14
  • Agree with @SevenSidedDie. Treat a click and a tap differently in that situation. Click out is usually someone trying to get out, but tap out is usually just an attempt to scroll. – trlkly Nov 8 at 22:18

How about converting arrow pointer to hand pointer in the drag and drop area in new design also?

  • In the old design, when pointer hover around the area of drag and drop, pointer arrow used to get converted into hand:

    old image upload UI showing a hand pointer

  • In new design pointer arrow remains as it is. Besides due to dim/grey color of drag and drop area and smaller font, one may miss click here indication:

    new image upload UI showing a standard arrow pointer

So, how about having hand pointer instead of arrow pointer in the drag and drop area in new design like olden one?

  • 15
    Mm. Declined without comment. Joy. – Draco18s Nov 3 at 2:07
  • 7
    Really bizarre that this was declined – andrewtweber Nov 5 at 19:41
  • 1
    @JoeFriend A short comment why this was declined? – fontgeologist Nov 6 at 10:35
  • Even if not that particular icon, it does look weird without anything, making it seem cheap. – trlkly Nov 8 at 22:16
  • 1
    @fontgeologist Simply put this is a nice to have, but we have bigger issues that need our attention. – Joe Friend Nov 9 at 4:26
  • @JoeFriend Thanks for the explanation! – fontgeologist Nov 9 at 20:05

Possible

Normally, when you "Discard" a saved draft, it clears the answer text. However, when you "Discard" a saved draft when the inline image uploader (or hyperlink box) is open and then "Cancel" the image uploader, the discarded answer text reappears.

The "draft" is still discarded in both cases, except that closing the image uploader repopulates the answer text.

For example...

Discard draft (normal behaviour):

Discard saved draft clears answer text

Discard draft with image uploader open:

Discarded answer text reappears when image uploader closed

Possible UX fix suggestion...

At the time the "Discard" link is clicked, close any open image uploader (or hyperlink box) prior to discarding the draft.

  • 7
    Wow. Did you just stumble across this or were you actively testing the new UI? Also, what tool did you use to make those animations? That's the clearest UI bug report I've ever seen. – Wildcard Nov 1 at 20:13
  • 1
    @Wildcard I just stumbled across this trying out the new UI. Since I was just "trying it out", I went to "Discard" my non-answer and noticed the anomaly. I used FastStone Capture (Windows only) - this initially saves as a .wmv file but includes a (rudimentary) to-GIF converter. To be honest, I struggled to get the file sizes down to be able post. I think some of the other dedicated GIF screen recorders (and/or GIF converters) are more efficient. – MrWhite Nov 2 at 12:58

The clickable area is smaller than the grey box:

Screen capture image of image uploader

Bit of a small issue, but in my first try in using it I clicked too far to the edge, and nothing happened.

  • 4
    Alt text is handy for people that use screen readers. At the least, they know what an element is. Let's not get into an edit war over this, and remember that our sites are collaboratively edited. – Tim Post Nov 2 at 13:56

On my iPhone, when I click the 'Insert hyperlink' button, I see the screen scrolling a bit, but in the end, the place where I want to type something is not visible (see below). Sometimes it's worse, and the entire Body text area is hidden behind the keyboard. I'd expect the 'https://' textbox and the buttons to scroll into view immediately.

Here is a video demonstrating the problem (I did the scrolling at the end manually.)

  • 9
    Sorry for the confusion. The current design doesn't fully support mobile YET. That is our goal and this was a required change to get there. But today we still recommend the mobile theme for most people using mobile devices. I updated the post to make this clear. – Joe Friend Oct 31 at 15:09
  • 1
    No problem; at least you're aware that this part doesn't work out of the box :) – Glorfindel Oct 31 at 15:24

I think there is a bug for uploading images when editing existing answers.

It's not possible to add an image by clicking on the image background area. When I do this, a file open dialog opens. I can select an image. But then nothing happens.

It works fine for new answers, but not for editing existing ones.

I can upload new images to existing answers by drag and drop. But I don't use a user interface that supports this.

Tested with following browsers so far:

  • Chromium (70)
  • Firefox 63
  • Chrome 69
  • Opera 46
  • I wonder if this is just a caching issue? This happened to me as well initially (Chrome 70 Windows), but after refreshing the page a couple of times it's now working OK!? I also noticed that the image uploader didn't display properly at first, the background wasn't white and the "imgur" logo was missing (suggesting perhaps that the CSS/JS was out of date). – MrWhite Nov 1 at 21:56
  • @MrWhite, I don't think so. I tried many times on a variety of answers. And if it were caching then it should have worked when I switched browsers to Firefox which I rarely use. – David Purton Nov 1 at 22:03
  • 1
    @MrWhite, either way, it does seem to be working for me now. I didn't do a full page refresh or anything. Who knows. – David Purton Nov 1 at 23:11
  • On my machine this happens if the file has not been "long enough" in its folder. That is, I can reproduce the issue by copying some file to folder that is in a cloud (or something that is not instantaneously synced). And yes, I am also not too excited about this new "feature". – marmot Nov 2 at 0:09
  • 3
    @marmot, that seems very unusual... And certain doesn't apply in my case. I tried some very old images. And I don't use any fancy cloud sync either. – David Purton Nov 2 at 0:11
  • This happened to me as well. I was unable to add a 2nd image to a post. – Organic Marble Nov 3 at 1:38


The editor in the

are still using the old UI for the "Image" and "Hyperlink" controls.

Can be the recent UI changes are applied in those editors too?

Edit Profile & Settings

  • We might consider this when we rework the profiles area (currently in early planning). Until then, this is status-deferred – Joe Friend Nov 2 at 19:47

How about fixing the real issue with image uploading that I see all the time on SE sites where users are not technically savvy? The size limit of 2 MB is a barrier to asking questions. Most people use cell phones to take pictures and many cannot figure out how to reduce the resolution so the picture will not exceed the size limit.

Instead of showing a message that your picture could not be uploaded just show a message that your picture is being resized and automatically resize it.

  • 5
    Honestly if it were up to me I'd leave it as-is to force people to learn more about images (it's really not difficult), but obviously that's not helpful :P If it automatically resized images it should at least warn first that it's going to do it, not just resize silently. – Clonkex Nov 1 at 22:28
  • 2
    @Clonkex good idea, not a warning, just a statement "SE magic is resizing your picture for you" – kevinsky Nov 1 at 23:25
  • 5
    Not a bad idea, but unrelated to these change. As such I'm deferring it. You might want to post this as an independent feature request. Thanks. – Joe Friend Nov 2 at 19:51
  • I hope they're not pictures of problem statement, code or error message.... – user202729 Nov 3 at 11:29
  • Hmm, yes, one of those snazzy in-browser editors for cropping, rotating, scaling may be useful. It shouldn't be necessary but folks are lazy (and, on many sites, not necessarily tech-savvy). – Raphael Nov 5 at 8:29

The link popup input needs to auto-focus when opening! Take the typical workflow:

  1. type some text
  2. highlight the text
  3. hit Ctrl + L
  4. type or paste a link
  5. hit Enter

This used to work previously. It does not anymore, since the link input field is not focused after step 3. It requires an additional step to click the box to focus it.

At least this is the case on macOS Safari 12. This is what it looks like after step 3:

not fully focussed

Looks focussed, but has no cursor.

This is what it looks like after clicking into it:

focussed with cursor

Notice the cursor has now appeared.

  • 1
    It autofocuses for me on macOS Chrome. – Laurel Nov 2 at 0:44
  • It autofocuses for me on Windows Chrome 70. – MrWhite Nov 2 at 10:53
  • 4
    it does not autofocus to me on Safari 11 and it is something I enjoyed having. – fedorqui Nov 2 at 15:36
  • 2
    Reproduces for me on Microsoft Edge 44.17763.1.0 on Windows 10 Pro 1809 build 17763.107 – Paul White Nov 3 at 16:40
  • 2
    This is fixed in the next build (both in Edge and Safari). I'll update the tag when it's deployed. – balpha Nov 8 at 13:21
  • @balpha it is working well now! – fedorqui 2 days ago
  • 1
    @fedorqui Ah thanks for the ping -- forgot to update. – balpha 2 days ago

When the dust has settled on this change it would be really helpful if the documentation about images was expanded. As far as I am concerned the animation in the question leaves more issues unresolved than it clearly does for other more tech savvy users. It would be helpful to know what typed of image file are acceptable and just what dragging and dropping them implies. Do they have to be open in the browser, in some other software, just a file somewhere on the user machine? It is helpful to know that a file on an external site can be pointed too (I know that is currently documented) but are there issues to do with its likely permanence or copyright which we should take into account?

This is not just idle questioning for the sake of it and I do know that writing documentation is not the most interesting task but I would have improved some of my answers on CrossValidated had I known how to upload images without having to go through a lot of trial and error first.

  • 3
    Drag and drop works the same way it does for every other program or webpage. Why does SE specifically need more documentation? – Clonkex Nov 1 at 22:26

Whole image is copied instead of text when OCR is used.

This occurred to me when I copied text from an image and use it in an answer. When we copy text from an image using some OCR software (I used Microsoft Onenote) and paste it, the text from the image should be pasted in the editor. but this doesn't happen. Whole image is posted instead. In this example, I am trying to copy the text "Presenting with Text www.tudorgirba.com" from the image and not the complete image.

Gif showing bug in conversion of text from image

I tried to copy paste on other platforms besides image editor, they work fine. Text is copied from the image successfully. I can say this is bug with new image editor because I have used OCR and copied text several times in questions and answers of mine in the old editor.

  • 8
    I think this might be a design challenge: you've got both an image and the OCR text on the clipboard. What you expect to happen is that when you paste it, you'll paste the text, but for other situations you might have an image and the alt-text of this image on the clipboard, and then you'd expect the image to appear, and the editor can't look into your mind. If you have an image and text on the clipboard and you paste to a field that only accepts text, of course the text appears, but I'd expect the image to appear when you paste to a word document, for example. – Erik von Asmuth Oct 31 at 20:18
  • 10
    Yep, OneNote (really all Office apps) put multiple things on the clipboard. So we have to decide what to use. I think that image is the correct choice here. – Joe Friend Oct 31 at 20:47
  • 1
    @ErikvonAsmuth When I tested where both the image and image are accepted. For example, word document. It only pasted text and not the image. This used to work fine with the old editor. – Nog Shine Nov 1 at 0:19
  • 3
    The darker side of this are apps / websites that jam custom text or even HTML markup into the clipboard along with images (sometimes benign attribution, sometimes less benign advertising or other nonsense). Most desktop apps have free rein to decide which clipboard formats to accept (and can even negotiate); browsers are generally more limited: text, html fragment, image are commonly supported, with images perhaps the least well-supported of the three. We could get fancy here & try to accept multiple formats, but probably not without lots of test-cases; maybe "paste as plain text" instead? – Shog9 Nov 1 at 1:02
  • 4
    It works if you paste it as 'plain text' (ctrl+shift+v on Windows). – The Destroyer Nov 1 at 6:26
  • 1
    I agree with @Joe here. If you want only the text, copy it first to text editor (e.g. Notepad), copy from there to have only this in clipboard, and paste in SE editor. That's how I copy&paste in WYSIWYG editors e.g. gmail when I copy from web and want only the plain text without all the format. – Shadow Wizard Nov 1 at 8:22
  • @JoeFriend "Yep, OneNote (really all Office apps) put multiple things on the clipboard. So we have to decide what to use. I think that image is the correct choice here" That might be the wrong approach. I don't really see why one has to decide (could copy multiple things out of the clipboard) and I think the user should ultimately decide what is the correct choice. That is unless people want the image in like at least 95% of the time. – Trilarion Nov 1 at 9:27
  • You can put more than one thing on the clipboard at a time?? How does that even work? – Clonkex Nov 1 at 22:30
  • @Clonkex Clipboards have become super complex. An application can "copy" the same content in several different MIME types to the clipboard, e.g. as richtext and plaintext, and the receiving application can choose which to use. – deceze Nov 2 at 5:07
  • @deceze Wow I had no idea. – Clonkex Nov 2 at 5:13

Drag-and-drop of text within the editor no longer works in IE 11 (supported), Edge 42.17134.1.0 (supported), Chrome 70.0.3538.77 (supported), or Pale Moon 28.1.0 (Firefox fork; presumably not officially supported). Instead in Chrome and Pale Moon it shows a drag-forbidden cursor, while in IE and Edge it just tries to treat it as dropping an image, notices it won't work, and ignores the attempt.

Since I routinely drag text around for efficiency, I find this to be a deal-breaker several times over. I like the idea of the new image uploader, but if it needs this crippleware drag-and-drop hijacker to work, I'm going to have to write a userscript to disable the feature.

  • I never tried so don't know, how it worked before? The text was just copied into the editor? – Shadow Wizard Nov 5 at 6:55
  • @ShadowWizard: If you dragged the text, it would just move it around. If you held down Control, it would copy it. (The cursor changes if you hold down Control to show what it will do.) It still works in comment boxes, although of course it's not as important there. – Nathan Tuggy Nov 5 at 6:59
  • @ShadowWizard You can try it in a plain ol' HTML <textarea> element - it's standard behaviour in all mainstream browsers (as well as most text editors). – MrWhite Nov 6 at 17:01
  • @MrWhite agree, noticed this weird behaviour of SE editor and agree it should support drag and drop as any textarea. – Shadow Wizard Nov 6 at 17:34

You must log in to answer this question.

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