WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#5609 closed enhancement (fixed)

New image uploader

Reported by: tellyworth Owned by:
Milestone: 2.5 Priority: normal
Severity: normal Version:
Component: General Keywords: has-patch
Focuses: Cc:

Description

Here's a patch for a new image uploader. The visual design is to spec for the new UI. It's one portion of the new media library popup for the post edit page.

Uploading and sending to the editor happens in a single step: clicking the Add Image button does the upload, inserts the attachment post, sends the img src html to the editor, and closes the popup.

The popup is handled by Thickbox, with the contents in an iframe. I made some wp-specific changes to the Thickbox js: $() changed to jQuery(); addLoadEvent() instead of read() (thanks mdawaffe); and the close link changed to a [x] png as per the design spec.

I've attempted to split the code into functions that are specific to the image uploader (functions named image_*()) and functions that will be useful for other media uploaders (video, audio) - though they'll probably need some tweaking. There's a trivial hook for other media uploaders in the form of the media_upload_{$type} action in wp-admin/media-upload.php.

Also yet to be implemented are the other tabs on the image uploader ("Media Library" and "Flickr"). They're just hard-coded for now. I considered a flexible tab system like the old $wp_upload_tabs thing, but I think it'd be better to go with something simpler instead, like a simple action.

All the old uploader code is still in place for now, but should be removed once this is solid enough.

It would be possible to do this using Ajax instead of an iframe but the iframe approach seems to offer a better fallback and more reusable code.

Attachments (7)

loadingAnimation.gif (5.7 KB) - added by tellyworth 6 years ago.
wp-includes/js/thickbox/loadingAnimation.gif
tb-close.png (506 bytes) - added by tellyworth 6 years ago.
wp-includes/js/thickbox/tb-close.png
align-center.png (571 bytes) - added by tellyworth 6 years ago.
wp-admin/images/align-center.png
align-left.png (587 bytes) - added by tellyworth 6 years ago.
wp-admin/images/align-left.png
align-none.png (453 bytes) - added by tellyworth 6 years ago.
wp-admin/images/align-none.png
align-right.png (556 bytes) - added by tellyworth 6 years ago.
wp-admin/images/align-right.png
media-upload-r6577.patch (34.2 KB) - added by tellyworth 6 years ago.
correct patch file this time

Download all attachments as: .zip

Change History (14)

tellyworth6 years ago

wp-includes/js/thickbox/loadingAnimation.gif

tellyworth6 years ago

wp-includes/js/thickbox/tb-close.png

tellyworth6 years ago

wp-admin/images/align-center.png

tellyworth6 years ago

wp-admin/images/align-left.png

tellyworth6 years ago

wp-admin/images/align-none.png

tellyworth6 years ago

wp-admin/images/align-right.png

comment:1 tellyworth6 years ago

Images attached separately as the patch file doesn't include them dammit.

tellyworth6 years ago

correct patch file this time

comment:2 ryan6 years ago

(In [6579]) New image uploader from tellyworth. see #5609

comment:3 nbachiyski6 years ago

If the user has disabled the visual editor from her profile, the Add media: bar isn't shown.

comment:4 lloydbudd6 years ago

  • Milestone changed from 2.6 to 2.5

comment:5 in reply to: ↑ description janbrasna6 years ago

Replying to tellyworth:

"Uploading and sending to the editor happens in a single step: clicking the Add Image button does the upload, inserts the attachment post, sends the img src html to the editor, and closes the popup."

The functions image_send_to_editor() and media_send_to_editor() should be somehow pluggable to allow a) inserting the images in e.g. Textile formatting or with Lightbox and similar additions; b) inserting other media as Flash/FLV in a specific way (think SWFObject, UFO or vPIP); instead of the fixed HTML code for that image/medium.

comment:6 lloydbudd6 years ago

Relates to #5722.

comment:7 andy6 years ago

  • Resolution set to fixed
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.