144

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).

Improve this question
23
  • 18
    The modals were getting a little dated, this looks much nicer.
    – Jeremy
    Commented Oct 31, 2018 at 15:24
  • 20
    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
    Commented Oct 31, 2018 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
    Commented Nov 1, 2018 at 6:09
  • 1
    Coincidentally that is also updated to https:// now! :)
    – Pandya
    Commented Nov 1, 2018 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
    Commented Nov 1, 2018 at 14:49
  • 1
    @TylerH I pasted the image from the clipboard.
    – Joe Friend StaffMod
    Commented Nov 1, 2018 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
    Commented Nov 1, 2018 at 16:34
  • 26
    Now we just need an automatic ghostban for anyone who leaves the alt text as "enter image description here"
    – Lightness Races in Orbit
    Commented Nov 1, 2018 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
    Commented Nov 1, 2018 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
    Commented Nov 1, 2018 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
    Commented Nov 1, 2018 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
    Commented Nov 1, 2018 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
    Commented Nov 3, 2018 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
    Commented Nov 3, 2018 at 2:58
  • 2
    @fedorqui Thanks so much for your kind words. Working at Stack Overflow was one of the highlights of my career so far. It was a hard decision to leave.
    – Joe Friend
    Commented Feb 12, 2019 at 18:25

16 Answers 16

Reset to default
83

This has been fixed.

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

Improve this answer
14
  • 12
    Related: Can't upload image from URL anymore
    – Meta Andrew T.
    Commented Oct 31, 2018 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 StaffMod
    Commented Oct 31, 2018 at 16:40
  • 86
    @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.
    – TheLethalCarrot
    Commented Oct 31, 2018 at 16:41
  • 6
    @JoeFriend I agree with TheLethalCoder here, better make it explicit.
    – EKons
    Commented Oct 31, 2018 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
    Commented Oct 31, 2018 at 17:20
  • 5
    This has bitten me already.
    – Organic Marble
    Commented Oct 31, 2018 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 Is Fiddling By Firelight
    Commented Oct 31, 2018 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
    Commented Nov 1, 2018 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 Is Fiddling By Firelight
    Commented Nov 2, 2018 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.
    – TheLethalCarrot
    Commented Nov 6, 2018 at 8:15
  • @TheLethalCoder after pasting the URL it is pasted into ordinary textbox, you can edit it just fine.
    – Shadow Wizard
    Commented Nov 8, 2018 at 8:06
  • @ShadowWizard I haven’t tried for a while has this changed again?
    – TheLethalCarrot
    Commented Nov 8, 2018 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
    Commented Nov 8, 2018 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
    Commented Nov 8, 2018 at 22:16
64

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

Improve this answer
3
  • 17
    +1, they definitely feel like tabs now
    – Clonkex
    Commented Nov 1, 2018 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
    Commented Nov 5, 2018 at 11:23
  • 1
    @Hulk Not all are like tabs no but some are
    – TheLethalCarrot
    Commented Nov 5, 2018 at 11:47
58

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

For all who are also tired of waiting for this bug to be fixed, a userscript for self-help is available from https://stackoverflow.com/a/53400946/2777074 (big thanks to @BrockAdams!). The colours used there are for TeX.SE, but if anybody would like to use it on another site, I can also adjust the image for other colours.

Improve this answer
6
  • 33
    Orange is the new rgb(191, 76, 81).
    – Awesome Poodles
    Commented Oct 31, 2018 at 19:43
  • 15
    @AwesomePoodles :) I'd prefer if rgb(191, 76, 81) would be the new orange
    – samcarter_is_at_topanswers.xyz
    Commented Oct 31, 2018 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
    Commented Nov 1, 2018 at 17:43
  • 2
    @LightnessRacesinOrbit I added an alt text to the image. Please let me apologise for not adding it right away!
    – samcarter_is_at_topanswers.xyz
    Commented Nov 1, 2018 at 18:59
  • 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
    Commented Nov 1, 2018 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 Is Fiddling By Firelight
    Commented Nov 2, 2018 at 15:06
33

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?

Improve this answer
0
32

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).

Improve this answer
3
  • 7
    Escape key also works to dismiss
    – Shog9
    Commented Oct 31, 2018 at 17:06
  • 1
    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
    Commented Nov 8, 2018 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
    Commented Nov 8, 2018 at 22:18
28

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.

Improve this answer
2
  • 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
    Commented Nov 1, 2018 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
    Commented Nov 2, 2018 at 12:58
25

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.

Improve this answer
1
  • 5
    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.
    – user50049
    Commented Nov 2, 2018 at 13:56
19

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.)

Improve this answer
2
  • 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 StaffMod
    Commented Oct 31, 2018 at 15:09
  • 1
    No problem; at least you're aware that this part doesn't work out of the box :)
    – Glorfindel Mod
    Commented Oct 31, 2018 at 15:24
19

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.

Your image is too large to upload (over 2 MB).

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.

Improve this answer
5
  • 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
    Commented Nov 1, 2018 at 22:28
  • 2
    @Clonkex good idea, not a warning, just a statement "SE magic is resizing your picture for you"
    – kevinskio
    Commented Nov 1, 2018 at 23:25
  • 7
    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 StaffMod
    Commented Nov 2, 2018 at 19:51
  • I hope they're not pictures of problem statement, code or error message....
    – user202729
    Commented Nov 3, 2018 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
    Commented Nov 5, 2018 at 8:29
16

Note that this issue has been duplicated in a more traditional bug report and the process is being discussed in this question.

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

Improve this answer
2
15

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
Improve this answer
6
  • 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
    Commented Nov 1, 2018 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
    Commented Nov 1, 2018 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
    Commented Nov 1, 2018 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".
    – user399040
    Commented Nov 2, 2018 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
    Commented Nov 2, 2018 at 0:11
  • This happened to me as well. I was unable to add a 2nd image to a post.
    – Organic Marble
    Commented Nov 3, 2018 at 1:38
13

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.

Improve this answer
0
7

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.

Improve this answer
0
4

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.

Improve this answer
9
  • 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 A
    Commented Oct 31, 2018 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 StaffMod
    Commented Oct 31, 2018 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
    Commented Nov 1, 2018 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
    Commented Nov 1, 2018 at 1:02
  • 4
    It works if you paste it as 'plain text' (ctrl+shift+v on Windows).
    – The Destroyer
    Commented Nov 1, 2018 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
    Commented Nov 1, 2018 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.
    – NoDataDumpNoContribution
    Commented Nov 1, 2018 at 9:27
  • You can put more than one thing on the clipboard at a time?? How does that even work?
    – Clonkex
    Commented Nov 1, 2018 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
    Commented Nov 2, 2018 at 5:07
4

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.

Improve this answer
4
  • I never tried so don't know, how it worked before? The text was just copied into the editor?
    – Shadow Wizard
    Commented Nov 5, 2018 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
    Commented Nov 5, 2018 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
    Commented Nov 6, 2018 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
    Commented Nov 6, 2018 at 17:34
3

When you edit an (old) post with an inlined HTTP image (which doesn't work anymore), the red banner "All images URLs must start with https://" contains a link to upload the HTTP image to imgur. However, that link still leads to the old uploader:

enter image description here

enter image description here

Improve this answer

You must log in to answer this question.

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