Image upload interaction design about ghost HOT 15 CLOSED

The user enters !image[alt](src) and is presented with an uploader in the preview pane

all content within the image uploader fades out, and progress bar appears

when complete, the progress bar fades out...

the upload container resizes to match the height of the uploaded image and simultaneously fades out...

and the uploaded image fades in.

If there is any error with uploading, an error dialogue appears. Clicking on Try Again restores the uploader to step 1.

If the user clicks on the URL icon in the bottom left corner, the image icon is replaced with a url field, where an image can be embedded from.

from ghost.

Okay so at the moment any image uploaded will automatically fill the showdown window according to width and rescale image which causes problems in itself, I assume we want images displayed at their natural dimensions, is that right or do you want it to fill the window regardless

from ghost.

So it should be:

width = 100%
max-width = [image-width]
height = auto
margin = 0 auto

Which basically means it will always be the correct width, height will be automatically determined, and if the image is too small then it will be centered.

from ghost.

WIP - vid update
http://www.screenr.com/3m8H

from ghost.

Steps upon dropping an image should be

1. Fade out elements within dropzone
2. Fade in progress bar
3. Hide progress bar
4. Fade out dropzone
5. Resize dropzone
6. Fade in image

Notes:

• There should be no resizing at all before step 5
• All animations should be 0.25s (250ms)

from ghost.

clarify: if you fade out dropzone (4), what are you resizing (5) after ?
@JohnONolan

from ghost.

(Don't have to tag me - I'm already tagged in this thread now)

1. Fade it out visually - it's still there
2. Resize it - it's invisible, but still takes up space in the document flow
3. The image replaces it

from ghost.

okay that is different to your pics though, the pics show it resizing then fading out, if you want it to fade out visually but still take up space in document flow then it'll have to be css as fade out in jquery will effectively remove it from document flow, i'll post up another video tomorrow though and you can decide on that. The other problem is that for a large file upload, the download is then required so when delaying with effects and resizing etc you have to be careful on timings or you may get some fun asynchronous stuff happening

from ghost.

http://www.screenr.com/it8H

from ghost.

Progress! Notes:

• Dropzone should not resize when loading bar appears
• Dropzone should have already become invisible before resizing to make room for the image

from ghost.

http://www.screenr.com/zv8H

from ghost.

Ghost could take a page from Svbtle's playbook and do uploads asynchronously.

It should also automatically insert an ![alt](img) upon dropping a file directly into the editor (maybe in the preview too?).

http://blog.alexmaccaw.com/svbtle-image-uploading

from ghost.

Wow, this is infinitely better - almost perfect!

1. There's a slight delay between the upload bar fading out, and the loading spinner appearing. Can we eliminate that? So as soon as the progress bar goes, the spinner replaces it.
2. Can the image fade/transition in? I think it's just appearing at the moment
3. The loading gif is ugly like satan - @ErisDS have you done anything with loading gifs before that's a little more snazzy? Yes. Snazzy.

@ricardobeat For sure - that's totally phase2 😄

from ghost.

yeah agreed the spinner is ugly, it's the one that came with blueimp and was fully expecting you to want a different one. the delay between the loading bar and spinner is tricky, on a small file you can see them almost overlapping but i'll have a tweak with that and the image can definitely fade in, i think the time is .25 ms which is okay for the other animations but maybe needs to be longer for the final image load, i can also look at the animation easing there's various tricks there

from ghost.

this vid shows there is a certain drawtime for images in browser regardless of load times resulting in an ugly sliding down fill appearance of the image
http://www.screenr.com/cj8H

this vid is with a small delay in before animating the image into browser.
note there is now an animation when the dropzone resizes even though you cannot see the zone as it seems a bit ugly to see text in document flow just jump down. All animations and delays are set to .25s apart from the image fad-in which is currently 1 second to allow a nicer effect.

http://www.screenr.com/fj8H

from ghost.