Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document new ideal media management flow #4

Open
paaljoachim opened this issue Oct 7, 2016 · 3 comments
Open

Document new ideal media management flow #4

paaljoachim opened this issue Oct 7, 2016 · 3 comments

Comments

@paaljoachim
Copy link

No description provided.

@felixarntz
Copy link
Owner

For reference: This is an example for what such a sketch could look like.

@paaljoachim
Copy link
Author

paaljoachim commented Oct 8, 2016

I began drawing by hand but figured out that I would extend using Photoshop. As I began adding blocks to the screenshots I began rethinking the UI.

Bulk Select
The Bulk Select button draws too much attention today, so that I added an bulk media icon instead placing it alongside the left side with the List and Grid icons. That means one can activate bulk media by holding down shift and selecting media or by clicking the bulk media icon.

Selecting the top default section of any filter. Such as All Media, Date, Category or Tags. Sorts/orders the media library by the filter selected. Seen in the below image in sketch 2.
(I could have instead of naming the titles if filtering my All Media Images, Audio or if filtering by date September 2016, August 2016.)

Drill down into any drop down and the specific filter is seen in the top with other similar sections below. Perhaps like a html anchor that jumps to the selected anchor on the page.

Sketch 3. Just shows the detailed view of an image. On the right image details. Below Attach the image to a category and/or tag. I also added a replace media to the bottom of this area alongside the other text which is usually there such as delete media.

Here is a Photoshop Sketch. Making it as plain as possible to show flow.

wp-media-management

NB! Thoughts - brain dumping.

  • Drag and drop of media to manually sort/reorder. Lets say one has 5 images from a specific place during a vacation and want to have these 5 images next to each other. Even though they might have been uploaded at various times one can drag and drop them so they are next to each other in the library.
  • An overall WordPress list feature. Drag and drop of All pages, All posts, Post category listing etc.
    All Posts list. Filter by date, category, tag or other. The user will then be able to also sort the various posts to keep it in better order.

This means creating a filtering system that can be used for different locations of the WordPress backend.

@felixarntz
Copy link
Owner

felixarntz commented Oct 12, 2016

Filtering Media

My approach for filtering was initially to add another dropdown to the top bar of the media library, in addition to the ones to determine media type and date. While this is an easy solution, I think now that we might need to go deeper than that. The space in that bar is very limited, and if we allow developers to add their own taxonomy dropdowns as well, it will get messy quickly.

Therefore my current workflow looks something like this:
wp-media-filter-workflow

Some words to describe it:
Instead of placing the filters directly in the bar, there is a "Filter" button. On click the bar is expanded, exposing a dedicated filtering UI that overlaps the media items in the background. There are several filter controls there. The actual filtering operation based on these controls is only executed when hitting the "Apply" button.
The current controls in there are mere ideas. It might be helpful to have start and end date inputs (using a calendar) instead of the dropdown we currently have. For taxonomies, I am imagining something like a <select multiple> - supporting multiple selected terms at the same time is very useful I think.

Assigning Terms to Media Item

For assigning terms my approach would be to use similar interface components like we do on the regular post editing screen: For hierarchical taxonomies it should work like the "Categories" one, for non-hierarchical taxonomies it should work like the "Tags" one, therefore I didn't do any sketches here. These UI components should be available in the attachment modal to assign terms to the current attachment, and they should replace the (current) basic text input fields. The most important functional enhancement this would bring is that not only existing terms could be assigned, but also new ones could be created on the fly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants