Improve the intuitivity for setting the featured image

[waltervos]

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'.

[Alhadis]

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.

[helenyhou]

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

[TomAuger]

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

[sbutze]

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.

[helenyhou]

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

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.

[dd32]

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:

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).

[lessbloat]

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):

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

[lessbloat]

Added the tabs in:

[dd32]

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)

[lessbloat]

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.

[dd32]

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.

[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:

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

[sbutze]

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:

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

[SergeyBiryukov]

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

[ocean90]

The way like comment:19 sounds good.

[koopersmith]

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.