WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 20 months ago

#14762 closed enhancement (duplicate)

Improve the intuitivity for setting the featured image

Reported by: waltervos Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Media Keywords:
Focuses: Cc:

Description

Right now, when setting a featured image you simply enter the same modal window as when uploading/inserting and image. When clicking 'show' next to an image on the gallery tab you get the same options as you get when uploading/inserting an image. All we really need to see there is an image preview and a button that says something like 'Use as featured image'. The same goes for when you upload an image to use it as a featured image, you get all of the options. I regularly work with clients that find this behaviour confusing, they usually want to click the button 'Insert into post/page'.

Attachments (1)

wp-simplified-image-selection.png (50.0 KB) - added by helenyhou 22 months ago.

Download all attachments as: .zip

Change History (29)

comment:1 Alhadis4 years ago

Agreed - but I think this entire area of WordPress's source code needs serious development. There's very little room for enhancement in the Media Uploader's API - the best that I've done by way of customising the uploader has been accomplished with JavaScript. It'd be good if there were filters and actions for this: Your issue could, for example, be circumvented by declaring a filter for the function that generates the dropdown markup. Then all you'd do is replace the output with something simpler - say, the image thumbnail and "Use as featured post" instead of the whole shebang.

The way it is now, you'd need to capture and flush the output buffer to implement that.

comment:2 nacin3 years ago

  • Keywords ux-feedback added
  • Milestone changed from Awaiting Review to Future Release

comment:3 helenyhou23 months ago

Related: #19396, #18708, #13522, #12922. Closed #20632 as a duplicate. I'd like to work on this :)

Last edited 23 months ago by helenyhou (previous) (diff)

comment:4 DrewAPicture23 months ago

  • Cc xoodrew@… added

comment:5 Alhadis23 months ago

  • Cc gardnerjohng@… added

comment:6 Alhadis23 months ago

  • Cc gardnerjohng@… removed
  • Keywords ux-feedback removed

comment:7 TomAuger22 months ago

  • Cc tomaugerdotcom@… added

I've dug pretty deeply into the media subsystem myself and would love to be able to contribute in this area as well.

comment:8 sbutze22 months ago

I am also VERY interested in contributing to this! The Featured Image interface is a huge usability issue and I see it tripping up new users and clients all too frequently. It can and should be dramatically simplified.

comment:9 helenyhou22 months ago

As an example, this is something I often do for sites that select images for post meta (featured or otherwise):

http://core.trac.wordpress.org/raw-attachment/ticket/14762/wp-simplified-image-selection.png

Note that the gallery options are also hidden because they're not useful in that context. We could probably also make the button a primary (blue) button, per #18708:comment:18.

I also wonder if the selection button could also show in the table row itself when the details are collapsed so you can optionally not have to expand the details just to choose the image. These are all thoughts based on iterating on what we currently have.

comment:10 follow-up: dd3222 months ago

Crazy idea: This is a chance for someone to experiment with avoiding the Thickbox all together, Selecting an image from the Upload dialogue sticks to the existing UI, but in reality, most users do not need all the functionality/details that comes from that process. (As we're seeing with suggestions to hide certain bits).

I've quickly sketched out a example of what I mean:
http://f.cl.ly/items/401X3d3J150e2q0b0T0A/Screen%20Shot%202012-07-10%20at%2011.14.25%20AM.png

If there are any details which should be shown when switching images (for example, resolution maybe?) hovering over a image for long enough could trigger the image to expand (So they're sure that's the image they want) and also show some extra details (such as the resolution).

comment:11 in reply to: ↑ 10 lessbloat22 months ago

Replying to dd32:

This is a chance for someone to experiment with avoiding the Thickbox all together

Dion, we must be on the same wavelength, I just came to post this (and discovered your sketch):

http://f.cl.ly/items/1d0s0H1M1n0b1R3g3o1C/featured-image-mockup.jpg

What if we just reused the uploader code Koop used in the customizer, and just dropped the iFrame modal altogether.

comment:12 lessbloat22 months ago

Added the tabs in:

http://f.cl.ly/items/2P1X1M0a211Y2J3W391B/featured-image-mockup-v2.jpg

comment:13 karmatosed22 months ago

  • Cc karmatosed added

comment:14 saracannon22 months ago

  • Cc sararcannon@… added

comment:15 meliko22 months ago

  • Cc melissachoyce@… added

comment:16 follow-up: dd3222 months ago

What if we just reused the uploader code Koop used in the customizer, and just dropped the iFrame modal altogether.

I was thinking of the Customizer's display, but didn't think it'd fit well here - for the simple fact that many posts will often have a larger number of attachments to sort through, which is why I went for a grid rather than a list which expands (and will make the column expand forever in some cases) - The sidebar is small, and not well suited for lots of content.

As for getting rid of the iframe all together, I believe that's a long-term goal from some, and one I like, but it might not have to be linked to this specifically as it can be a time suck (of course if it is easy to implement it here specifically just for featured images, why not)

comment:17 in reply to: ↑ 16 lessbloat22 months ago

Replying to dd32:

many posts will often have a larger number of attachments to sort through

I guess I don't quite follow. I was thinking you'd just drag and drop the image you wanted to use as a featured image to this drop zone (and it would auto-start the upload process), or you could click the "select a file" link and select a file through the browsers upload dialogue.

if it is easy to implement it here specifically just for featured images, why not

Sorry, yes I wasn't very clear. I was speaking specifically about "featured images" with that comment. It seems to me that the featured image functionality just piggy backed off of the media manager because (I'm guessing) at the time, it was either the easiest option, or there were no other options. Now that @koopersmith has already completed the bulk of the work to extract the image upload functionality for the customizer side bar, it seems like we should just ditch the older (more confusing media manger flow) for this newer (simplified) one.

comment:18 follow-up: dd3222 months ago

I guess I don't quite follow. I was thinking you'd just drag and drop the image you wanted to use as a featured image to this drop zone (and it would auto-start the upload process), or you could click the "select a file" link and select a file through the browsers upload dialogue.

We're thinking of different flows :) You're thinking of uploading a new image, I'm thinking about selecting from a set of already uploaded images. I feel selecting from the already uploaded images is "more important", where others may never upload the image until they want to set the featured image (for example if the theme does something special with it).

Ultimately, both flows need to be optimized.

comment:19 in reply to: ↑ 18 ; follow-up: lessbloat22 months ago

Replying to dd32:

You're thinking of uploading a new image, I'm thinking about selecting from a set of already uploaded images.

Gotcha. On the same page now. :-)

So... what if we did something like this:

http://f.cl.ly/items/0r2d2V1l0j311J133z1K/featured-image-flow.jpg

Clicking "Select a file" under the "Media Library" tab would pass a content=featured param, which we'd use to:

A) Auto-select the "Media Library" tab in the media manager
B) Swap out the "Insert into post" button for the "Use as featured image" button

comment:20 jtsternberg22 months ago

  • Cc justin@… added

comment:21 in reply to: ↑ 19 sbutze22 months ago

  • Cc sbutze@… added

The ability to drag a file directly onto the Featured Image meta box would definitely be appealing for many users. Also a fan of the dual tabs "Upload New" vs. "Media Library".

It probably goes without saying but when selecting from Media Library, we'd still want to do away with the extra settings (ie Size, Alignment, etc.) as those are pretty much irrelevant for Featured Images.

Replying to lessbloat:

Replying to dd32:

You're thinking of uploading a new image, I'm thinking about selecting from a set of already uploaded images.

Gotcha. On the same page now. :-)

So... what if we did something like this:

http://f.cl.ly/items/0r2d2V1l0j311J133z1K/featured-image-flow.jpg

Clicking "Select a file" under the "Media Library" tab would pass a content=featured param, which we'd use to:

A) Auto-select the "Media Library" tab in the media manager
B) Swap out the "Insert into post" button for the "Use as featured image" button

comment:22 sabreuse21 months ago

  • Cc sabreuse@… added

comment:23 sbutze21 months ago

  • Cc sbutze@… removed

comment:24 bootsz21 months ago

  • Cc bootsz added

comment:25 SergeyBiryukov21 months ago

The latest patch on #18708 implements the UI similar to the one in comment:9.

comment:26 ocean9020 months ago

  • Keywords needs-patch added
  • Milestone changed from Future Release to 3.5

The way like comment:19 sounds good.

comment:27 JerrySarcastic20 months ago

  • Cc JerrySarcastic added

comment:28 koopersmith20 months ago

  • Keywords needs-patch removed
  • Milestone 3.5 deleted
  • Resolution set to duplicate
  • Status changed from new to closed

See #21776.

Integrating featured images into the new media workflow will eliminate the overlap between selecting a featured image and inserting content into a post. Once the initial workflow has landed, we'll likely add an inline dropzone.

Note: See TracTickets for help on using tickets.