Opened 9 years ago
Last modified 7 years ago
#35827 assigned enhancement
Customizer: Create a dropzone for adding images
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Future Release | Priority: | high |
Severity: | normal | Version: | 4.1 |
Component: | Customize | Keywords: | needs-patch |
Focuses: | ui, javascript | Cc: |
Description
This is a follow-up to #35826.
On panels that let you upload images (identity, header, background) we should make the "no image set" container a dropzone to drag & drop your images onto. Like the editor, when you drag and drop an image into those dropzones, it would open the media modal and start uploading the image.
Attachments (1)
Change History (22)
#1
@
9 years ago
- Keywords needs-patch added
- Milestone changed from Awaiting Review to Future Release
- Version set to 4.1
#2
@
9 years ago
I would love to see this happen particularly for areas like site logo. In user tests I have seen several times now people try to click the 'no logo' area. This being both clickable and draggable would make a lot of difference. If something can have drop zones or images, making it 'just work' is what people want. There is a really strong learned model of behaviour for people to just drag.
#3
@
9 years ago
- Focuses javascript added
Starting to investigate, this isn't trivial to implement and there are some UX issues to think about. I think we should treat it as a somewhat hidden progressive enhancement - if you drag an image in and you can upload it'll open the media modal and let you go through the process, but we can't cleanly display upload or permissions errors here.
I'm attempting to adapt the code from the media library. I started with tmpl-uploader-inline
in wp-includes/media-template.php
, but working through it I don't think we should add any of that markup, only the JS should work (keeping the UI simple). I'm also looking at the UploaderWindow
view in wp-includes/js/media-views.js
. Need to investigate wp.Uploader
next; work in progress patch is uploaded (if anyone else wants to iterate, please do so, otherwise I'll revisit likely in a couple weeks).
#4
follow-up:
↓ 5
@
9 years ago
I've also been working through some concepts for this. I don't have a patch yet, but I'll take a look at @celloexpressions to get some ideas.
#5
in reply to:
↑ 4
@
8 years ago
Replying to voldemortensen:
I've also been working through some concepts for this. I don't have a patch yet, but I'll take a look at @celloexpressions to get some ideas.
Just wanted to follow up here — have you had a chance to review?
#6
@
8 years ago
Also, we can use the notifications API now to show errors directly in the customize pane without worrying about the media modal. For any media type that's dropped in and supported by the control, the dropzone can directly accept the image and process it without opening the media modal and breaking the flow at all. A modal would only be required for cropped-image controls, and that could go straight to the cropping step. This should eliminate a lot of clicks and complexity if implemented well.
Glancing at my old patch, I'm not sure whether it has much to work off of, for what it's worth.
#7
@
8 years ago
I didn't get far with this one before my schedule got crazy, so anyone else who wants to take a stab is more than welcome to.
This ticket was mentioned in Slack in #core-customize by melchoyce. View the logs.
8 years ago
This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.
8 years ago
This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.
8 years ago
This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.
7 years ago
This ticket was mentioned in Slack in #core-media by joemcgill. View the logs.
7 years ago
This ticket was mentioned in Slack in #core by joemcgill. View the logs.
7 years ago
#16
@
7 years ago
- Priority changed from normal to high
Bumping priority to high for visibility and alignment with 4.9 goals, and given proximity to beta 1 deadline.
I'm pretty sure that this functionality previously existed in the pre-media-modal (pre-4.1) iteration of the Customizer image controls. I'd start with WP_Customize_Media_Control (which also covers the image and background controls) and let it come to the header control once that's updated to extend the core chain of controls.