Add a way to browse and include uploaded images

phae commented 9 years ago

I think @migurski already added a magic short-code thing for images, but I can't remember what it is, so no way anyone else ever will. Need to show it in the UI somewhere and probably let someone see what's in an image dir.

migurski commented 9 years ago

There’s a working upload button for any file type, but a media concept would be a better way to do this.

phae commented 9 years ago

Yeah, right - isn't there also like a short code thing? {{ something.jpg }} style I'm talking about that as well and making that more discoverable.

On 6 February 2015 at 10:21, migurski notifications@github.com wrote:

There’s a working upload button for any file type, but a media concept would be a better way to do this.

— Reply to this email directly or view it on GitHub https://github.com/codeforamerica/ceviche-cms/issues/76#issuecomment-73286347 .

phae commented 9 years ago

Also, might be good to have an image uploader actually available on the edit page, rather than just in the file explorer.

phae commented 9 years ago

...and PDFs D:

phae commented 9 years ago

Making this an umbrella ticket. We'll scope this to actual work and such on Monday and focus just on images for now.

phae commented 9 years ago

To do list:

[ ] #448 Merge client and server side markdown renderer

norrishung commented 9 years ago

Including my notes and thoughts in here:

Prerequisites

Merging client side and server side markdown renderer

Potential Requirements

[1] Image Upload Form Image Drag and Drop [1] Caption/Alt Text for Image [3] Image Browser Image upload progress Preview of what was uploaded Image sizing guidelines [2] Server-side or compile-time resizing Representation in markdown

Custom HTML for image? (<figure><img src="image.jpg"><figcaption>image caption</figcaption></figure>)
This will be important if we want to be able give them float and sizing classes.

Abstraction of image path Delete images from library

Implementation

Build our own
Using an existing image uploading service
- https://uploadcare.com: IE10 plus and partial support for IE 8 and IE 9
- Upload widget, storage, CDN, image resizing API
- https://www.filepicker.com: IE8 up
- Uploader, CDN
- dropzone.js: IE10 plus and partial support for IE 8 and IE 9
- drag and drop widget, no server side implementation
- https://blueimp.github.io/jQuery-File-Upload/

Questions

Is free form images a necessary feature for any content types? Could this just be part of a template (i.e., only allow one header image for press releases) Should PDF and image upload be combined? What other 'things' might need to be uploaded?

data, video, audio, pdf, images

Notes

Will be very hard to do this with a good UX without any form of javascript

preview of image
modal that doesn't yank you from the page
placement of image in the right part of the document
drop and drop
progress of uploadl

norrishung commented 9 years ago

Basic Image Upload Mockup.

image_step_1 image_step_2 image_step_3

norrishung commented 9 years ago

View needed for no-js image upload and markdown snippet copy and paste. Would probably be something we want in the interface anyway as a dedicated media browser.

image_library

codeforamerica / chime