Comments (15)
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
- Fade out elements within dropzone
- Fade in progress bar
- Hide progress bar
- Fade out dropzone
- Resize dropzone
- 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)
- Fade it out visually - it's still there
- Resize it - it's invisible, but still takes up space in the document flow
- 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.
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.
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!
- 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.
- Can the image fade/transition in? I think it's just appearing at the moment
- 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.
from ghost.
Related Issues (20)
- Integrations - FirstPromoter always showing as "active" HOT 2
- Admin API - Create Paid Members support HOT 1
- Node Version Requirement Not Declared Fine Enough HOT 4
- Wrong DNS records shown HOT 1
- Error updating to Ghost 5.80 from 5.23, blog down, please help HOT 1
- Comments broken in latest release HOT 5
- Internal tags not all displayed in admin panel
- Korean Romanization is Wrong HOT 3
- Ghost cannot connect to Mysql AWS RDS instance with latest CA from AWS HOT 2
- Handlebars special partial "@partial-block" gets reported as unknown global HOT 1
- Vulnerability Report: Regular Expression Denial of Service (ReDoS) in moment.js HOT 1
- Plain text view HOT 3
- Installation on Windows Fails with "A SystemError occurred." (nodejs version mismatch) HOT 1
- Newlines not correctly handled in product card titles
- Support Bluesky oEmbed auto-discovery HOT 4
- Editor tooltip for text styling is not visible when using android mobile
- Outdated version of string-width is causing the Docker image entrypoint loading to fail. HOT 2
- Site version in API not showing patch HOT 2
- glibc-vulnerability cve-2024-2961 [BUG] HOT 2
- Visitors on iOS prompted to download empty "auth-frame" file HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ghost.