Grid view for the Media Library

[alexvorn2]

Currently we have a list of images and additional information to them on the right, It can be cool to use all this space for displaying other images and hovering on a image can show some information (size, date of upload ...)

This will help to display more attachments on the page.

I agree that it would be cool to explore something other than the standard list table layout for attachments, like we do for themes. However, a note that we should be avoiding the exclusive use of hover for information display, as it's neither accessible nor touch friendly. Also keep in mind that columns can be added/removed for post type list tables, which would have to be accommodated.

List View

Hybrid View

Grid View

I attached a few wireframes outline three different views: list, hybrid, and grid.

The list view is similar to the existing view. It occurs to me that this view may be better suited for bulk management, and viewing/sorting by details. It could use some tweaks, but the layout is otherwise good.

The hybrid view aims to show larger thumbnails, but still maintain room for all the details about the attachments.

The grid view is great for browsing, but doesn't lend it self to showing as much information.

It may be cool to offer a way to create a new post/page with the selected image, or a gallery of the selected images.

I like it...

Grid View:

• maybe to display more then 3 columns, depending of the size of the screen
• smaller thumbnails for more space
• can be used for "Manage Themes" page

It would be a dream having a grid view of media library.
I think this ticket should get an higher priority; many years passed, many things changed, and media library should be changes too. The list view is too hard to manage when files number increase.
Please update as soon as possible.

Replying to virgodesign:

It would be a dream having a grid view of media library.
I think this ticket should get an higher priority; many years passed, many things changed, and media library should be changes too. The list view is too hard to manage when files number increase.
Please update as soon as possible.

We need someone to make a plugin first, then after that it can be considered for a review to join WP Core, so until that it remains as an idea.

The themes page changed from the date I started this ticked, so the display view can be imported from there... but not as big thumbnails as there, and instead of Theme Details to use Image Details. Activate, Live Preview to Edit, Delete, View...

I made a plugin. There wasn't a huge interest from developers, so the project has been on hold. I'd love to jump back into this for maybe 4.0.

That plugin: ​http://wordpress.org/plugins/media-grid/

I put it on GitHub to try to drum up extra interest, there's been a little: ​https://github.com/helenhousandi/wp-media-grid-view/

So this will be in 4.0? We can apply the milestone number to it so it will take more attention.

The plugin is not at a stage to determine an absolute yes/no for 4.0. Features as plugins are to decouple feature development from release cycles.

#24710 was marked as a duplicate.

This ticket was mentioned in IRC in #wordpress-ui by ericandrewlewis. ​View the logs.

In attachment:24716.diff​,

• create a new media workflow "Manage," which powers the media grid.
• hide the bottom toolbar and the tab links (router) from this workflow by default.
• window-wide drag-and-drop uploader in the media grid view.
• add URL and human-readable filesize to the attachment details view (parity with fields shown in a list-view Edit Media page).
• add a global mode toggle for Media, between grid view and the list view.

24716.2.diff​ will apply cleanly. I also fixed some localhost cruft and avoided some JS errors on certain screens.

Only big issue I have noticed: if you upload a file and it fails, there are no errors shown.

Other than that, this rocks.

Can't seem to click the view switcher icons in Firefox - the h1 is on top, didn't chase down the why. That said, it makes me want to do #16774/#20335/#22222.

This ticket was mentioned in IRC in #wordpress-dev by ericandrewlewis. ​View the logs.

In attachment:24716.3.diff​

• Surface author and "Uploaded To" info in the attachment details view.
• Media mode (list vs. grid) is now a persistent user option, defaulting to grid.
• Add a mime-type dropdown filter.

In attachment:24716.4.diff​,

• Up .media-grid-view-switch z-index to 300, to out-stack .media-frame-title. Fixes @helen's bug findings in comment:16.

In attachment:24716.5.diff​

• Remove router instantiation bloat that isn't used by MediaFrame.Manage
• Fix uploader issue @wonderboymusic brought up in comment:15

There are now no standing issues with this patch. Please futz, test, and provide feedback.

This ticket was mentioned in IRC in #wordpress-dev by helen. ​View the logs.

In [28682]:

Grid view for the media library, first pass. This is alpha; expect imperfection. We will be iterating further.

props ericlewis, shaunandrews, wonderboymusic.
see #24716.

Notes thus far from me, please everybody test and also make notes:

Parity with the list table view

• Needs link to post.php (edit screen), possibly in the sidebar when selected, between "Edit image" (when there) and "Delete Permanently". Open to suggestions.
• Needs date filter.
• Need to discuss whether we need to also have parity with sorting by various columns, filtering by author/uploader (semi-hidden), attached unattached items, and comment count.
• Bulk edit (currently just delete). Perhaps a switch into a distinct multiple select mode, e.g. the way iOS handles it.
• Expose "Add new" workflow - drag-anywhere-to-upload is not visible, and not universally accessible. Probably just showing the uploader as in the modal.

Other

• Select first item when loading the screen.
• Don't need to show checkbox for a selected item in this view.
• Show "No results" rather than (or in addition to?) uploader when filtered to no items.
• What does an empty library look like?

Related

• Keyboard accessibility: #23560.
• Persistent option for view mode (not just for media): #16774, #20335, #22222.

There are some jshint errors introduced in [28682].
24716.patch fixes them.

This ticket was mentioned in IRC in #wordpress-dev by ericandrewlewis. ​View the logs.

#28484 was marked as a duplicate.

The first error is now fixed in [28688], but the second one is still there...

In 28697:

Fix JSHint error.

props avryl.
see #24716.

[28682] broke inserting images from Media Library via the media modal on my install:

<br />
<b>Warning</b>:  filesize() [<a href='function.filesize'>function.filesize</a>]: stat failed for H:\home\wordpress\trunk/wp-content/uploads/2008/06/2429111678_2ecb3abb93_b.jpg in <b>S:\home\wordpress\trunk\wp-includes\media.php</b> on line <b>2604</b><br />
<br />
<b>Warning</b>:  filesize() [<a href='function.filesize'>function.filesize</a>]: stat failed for H:\home\wordpress\trunk/wp-content/uploads/2008/02/catyeye.jpg in <b>S:\home\wordpress\trunk\wp-includes\media.php</b> on line <b>2604</b><br />

We don't store absolute file paths in _wp_attached_file since [8796], but I have a couple of files uploaded before 2.7, and now they have an invalid path, which apparently should be fixed on editing by wp_insert_attachment()​.

On a related note, get_attached_file() can return false since [20613], but we don't check for that here.

Looks like we need a file_exists() check before calling filesize(): 24716.3.patch​.

However, that causes 'false' string to be displayed as a file size: 24716.filesize.png​. The screenshot also shows an overlapping issue with Hello Dolly activated.

Noticed that r28682 caused a visual issue with the image details modal due to

-.image-details .embed-media-settings .setting span {
+.image-details .embed-media-settings .setting .name {

Looking at the reset of the changeset, I think that this should be changed back to span .

24716.6.diff​ makes the change.

Can I propose that (trashed) or similar be added to the Uploaded To label in the sidebar if an item is trashed?

For example, I clicked on this image: ​http://screencloud.net/v/iNFa

It shows as being uploaded to the "Catalyst Framework" but doesn't given any indication that the "Catalyst Framework" item has been deleted until I click on it: ​http://screencloud.net/v/odYD

Looks like we also didn't account for admin notices at the top of the grid view, as seen in admin_notices.png​ above.

In 28732:

Fix the layout of the Image Details modal, props gcorne, see #24716 [28682]

This ticket was mentioned in IRC in #wordpress-dev by ericandrewlewis. ​View the logs.

This ticket was mentioned in IRC in #wordpress-dev by ericandrewlewis. ​View the logs.

attachment:24716.7.diff​ is a first step towards Media Grid revisions ​outlined on make/UI.

• Introduce a .hide-sidebar class to media.view.AttachmentsBrowser. The media grid will no longer have a persistent sidebar, so the browser toolbar and attachments list will take up full width. This is set via by passing sidebar: false in the options hash when instantiating media.view.AttachmentsBrowser. Defaults to true, which the modal view uses.
• Introduce on-hover text "Edit Media" in the template for media.view.Attachment, borrowing css from the Theme browser's .more-details element.
• In media.view.Attachment.render(), bring the view's initial options hash through to the options hash passed to the templating function, so that we have access to the view's controller (i.e. frame) within the microtemplate. This comes in handy for inspecting the controller's current "mode," more on that in a minute.
• In media.view.MediaFrame (and by extension its descendants, all frames), introduce a mode property as an array, which will persist states. For now, this includes select/edit and grid. This helps in microtemplates when deciding within an attachment view whether to display UI which is specific to the grid (i.e. fields to show below each Media item). By default the media grid will be in edit mode, and Bulk Edit mode will use the select mode.
• Introduce showAttachmentFields as an option for media.view.AttachmentsBrowser. This will eventually be a persistent user-specific setting which dictates which fields to display underneath a media item's thumbnail in the grid. Trickles down to media.view.Attachments and finally media.view.Attachment. Utilize controller.options.mode in the media.view.Attachment's microtemplate to decide whether or not to show the fields.

UPDATE: This is not ready for commit, just a bookmark and share functional decisions.

24716.8.diff​ fixes the display somewhat and accounts for fields

This ticket was mentioned in IRC in #wordpress-dev by ericandrewlewis. ​View the logs.

attachment:24716.9.diff​ is still a work in progress, and should not be considered for commit, only for feedback.

Brief notes: If you click on a media item in the grid, a modal will open up with the Image Editing (read: cropping) interface - no default media details editing interface yet.

Hard notes:

• Introduce media.view.Frame.EditMediaDetails, which is a view that will control editing media details. Note this extends from media.view.Frame, not media.view.MediaFrame. media.view.MediaFrame is hard-wired to work with specific regions (menu, title, toolbar, content, router), while our mock-ups don't match that exactly. We need a custom header for the pagination links (click left to edit the previous media item, right for next). So what we want is region management and a state machine, which is exactly what media.view.Frame provides.
• Introduce media.controller._State, which is a more abstracted state controller object. media.controller.State is hard-wired to the regions defined by media.view.MediaFrame, while the only region we need in media.view.Frame.EditMediaDetails is content.
• media.controller.EditImageNoFrame is the state for editing an image (i.e. the cropping interface), a simplified version of media.controller.EditImage without the toolbar region setup, which we will not need.
• Something I'm happy with: in media.view.Attachment, trigger an edit:attachment event on the frame controller. Instead of creating the modal from within the Attachment view, the controller does so on an edit:attachment event callback. We should continue to decouple components via the events bus as much as possible.

attachment:24716.10.diff​​ is still a work in progress, and should not be considered for commit, only for feedback.

Brief notes: Moved the library view switcher from the upper right corner of the screen into the browser toolbar.

Hard notes:

• Straight up copying CSS from theme experience for the navigation bar. We should move towards an OOCSS UI toolkit for wp-admin, and make available a class like .wp-nav-bar here instead.
• Creating a libraryViewSwitcher view inside of media.view.AttachmentsBrowser. This is a bit awkward - we're putting a media grid-specific thing inside the AttachmentsBrowser view. Open to suggestion here. I think it's a good use-case for a Javascript action hook (oh no he di'in't!), so the frame controller could tag in here with a callback and register the view on the toolbar, providing a clear separation of concerns.

Beginning to drop notes in inline code comments where things get weird.

attachment:24716.11.diff​​​ is still a work in progress, and should not be considered for commit, only for feedback.

Brief notes: Edit attachment modal now has tabs, defaulting to the edit attachment details tab. Only shows tabs if the attachment is an image, as the second tab is for "Edit Image"

Hard notes:

• Renamed media.view.Frame.EditMediaDetails to media.view.Frame.EditAttachment, fits in better with the vocabulary used elsewhere in media.
• Added a router to this frame.
• Introduce media.view.Attachment.Details.TwoColumn, which is essentially media.view.Attachment.Details (what you see in the right sidebar when editing a media item in the regular media modal) but with a different microtemplate. Oddity here: media.view.Attachment.Details inherits from media.view.Attachment. media.view.Attachment sets up our data binding, but also presupposes a frame that will have a selection property, assuming we're selecting attachments. Gave media.view.Attachment.Details.TwoColumn a custom initialize method which is a copy of media.view.Attachment.Details.initialize while ripping out the part about selection.

If a media file does not exist, filesize() can break the JSON output with a PHP warning when debug display is turned on. See 24716.13.diff​.

attachment:24716.12.diff​​​​ is still a work in progress, and should not be considered for commit, only for feedback.

Brief notes: Pagination now works in the Edit Media Item modal. Basic styles have been applied. Things work, albeit a bit rough around the edges.

Hard notes:

• Copy a lot of styles from the theme browser for admin UI visual parity. These should move into common selectors for separate modules to share.
• Pagination works by bubbling up an edit:attachment:previous and edit:attachment:next event from the EditAttachment frame to the Manage frame. An EditAttachment frame is bound to editing one attachment, it closes and then a new one is immediately instantiated by the Manage frame. hasPrevious and hasNext options are passed in the hash when instantiating an EditAttachment frame. Architecture inspired by the theme browser here, I'm into it.

This ticket was mentioned in IRC in #wordpress-dev by ericandrewlewis. ​View the logs.

Finally got a chance to test this patch - this is looking really good!

Replying to kovshenin:

If a media file does not exist, filesize() can break the JSON output with a PHP warning when debug display is turned on. See 24716.13.diff​.

See comment:29 :)

In 28959:

Avoing a PHP warning in media modal if the attached file does not exist.

props kovshenin.
see #24716.

This ticket was mentioned in IRC in #wordpress-dev by helen. ​View the logs.

24716.14.diff​ does:

• Moves the grid-specific code to media-grid.js - easier to consume the churn, versus playing Where's Waldo with 7000 lines of media-views.js
• Fixes some of the CSS in the modal popup for Edit Metadata pane. I think this part is actually fairly presentable now. Edit Image still needs love.
• For audio and video files that have a thumbnail, shows it behind the audio or video icon - this may need some massaging, but makes it easier to identify tracks.

I am going to work on inline previews of audio and video.

Note: we should try to get the Backbone sync working in this modal state with the same ID3 data we have on the Edit Media full-page screen. The data is already available in the response from wp_prepare_attachment_for_js()

24716.15.diff​ allows you to listen to your audio files and watch your videos right in the grid. I borrowed the toolbar styles from the MCE views.

This is still a work in progress, but it's pretty slick. I can't figure out how to trigger the modal to open when the Edit icon is clicked. I will save that for E.A.L. to rabbit-hole.

In 28992:

Make a new file: media-grid.js. This will be way more useful in later commits and help reduce churn and bloat in media-views.js.

See #24716.

In 28993:

Media grid, round 2. Expect much more to come.

• Instead of a sidebar for details, utilize a modal. The modal experience allows for a larger preview, editing images, audio/video previews, and previous/next navigation, like the theme browser. Think of it as an attachment browser.
• Show some details in the grid view to more easily distinguish items.

props ericlewis, wonderboymusic, JerrySarcastic. see #24716.

Some known deficiencies:

• Styling.
• Responsive / touch considerations.
• Keyboard accessibility.
• Add New link - note that drag and drop to the area works, but is not enough for the two bullet points above.
• No link to post.php (the full edit screen).
• Some parity with the list view (e.g. date filter, bulk selection/action).
• "Uploaded To" shows the post ID instead of a title.
• Clicking on the edit icon itself doesn't work.

In 28995:

Make media grid text fields (data) toggle-able. Checking/unchecking is saved in user settings cookie.

See #24716.

In 28996:

Media Grid: for audio and video files with covers, show that instead of the icon. The filename is still present with the extension to identify the type.

See #24716.

In 28997:

Media Grid: Use the proper attachment value for uploadedToTitle.

See #24716.

In 28998:

Media Grid: JSHint fixes.

See #24716.

keyboard navigation for media detail modal

use keydown not keypress !chrome

24716.20.diff​ adds keyboard navigation (left and right arrows) to the media detail modal. keyboard on the grid via tab/shift tab seems reasonable already, although full arrow key support including up/down might be nice

Notes & questions:

• when navigating the images, the modal is closed and recreated each time you change images; can we swap the content in place?
• in order to properly capture the keyboard events, the inner part of the modal needs focus after being opened; this patch puts the focus on the first input field in the media details (url) - suggestions?
• thoughts about adding some visual feedback (briefly highlight left/right arrows?) when navigating by keyboard?
• uses ._once to avoid keyboard race conditions

fix jshint error

My above patch fixes a regression of the positioning for Attachment Display Settings:

In 29000:

Fix a regression of positioning in Attachment Display Settings.

props paulwilde.
see #24716.

Replying to adamsilverstein:

• when navigating the images, the modal is closed and recreated each time you change images; can we swap the content in place?

What's the benefit there?

Replying to ericlewis:

Replying to adamsilverstein:

• when navigating the images, the modal is closed and recreated each time you change images; can we swap the content in place?

What's the benefit there?

small benefit - not having to destroy/recreate the modal for each item view; not a big concern, works fine as is :)

fix extra space on right of grid at certain screen sizes

24716.23.diff​ remove extra space on right for better responsive layout
before - ​http://cl.ly/image/3q422v0e2B06
after - ​http://cl.ly/image/462e2o0F1e07

add router - url mapping, history

24716.24.diff​ includes keyboard nav; adds state urls -- image=xxx, search=xxx; also adds history; saw some issues in testing going back between searches and detail view, using browser history; maybe loose history?

In 29017:

Remove some unnecessary empty space in the media library grid view. props adamsilverstein. see #24716.

feedback, testing appreciated!

better routing,history; default route

remove unused handler

In attachment:24716.27.diff​, require only the model and the library to the EditAttachment frame, instead of the grid's controller. Trigger edit:attachment:previous and edit:attachment:nextevents on the EditAttachment frame, decoupling the two controllers.

keyboard nav, history/routes

24716.29.diff​ builds on 24716.28.diff;
added:

• keyboard navigation (attached to window gave me best results, tried attaching to view), excludes input/textarea so you can still use arrow keys when editing those, removing event handler on modal close
• Backbone routes and history support for image details & search string, back button takes you back thru states, bookmarking/emailing a link to a search or specific image also works
• fixed undefined error with explicit check

in attachment:24716.30.diff​, add style .attachments-browser.hide-sidebar .uploader-inline { right: 0; } so inline uploader centers correctly in the grid.

improved search routing

In 24716.31.diff​: clear search from url when search field is cleared

in attachment:24716.32.diff​, defer the call to media.view.Attachments.css() until after the view has been rendered so the width of attachments is applied according to the container's size rather than the default 120px.

In attachment:24716.33.diff​, get rid of the toolbar region in the EditAttachment frame. We were thinking of using it, but decided we're not.

In attachment:24716.34.diff​:

• do not blow away attachment/inline uploader views in the AttachmentsBrowser depending on context; hide the view that is irrelevant instead.
• if there is no media in your library or results from a query, give that feedback rather than presenting the uploader immediately. Consider adding a link to open the uploader.
• rejigger the uploader as a slidedown panel within the browser.

attachment:24716.35.diff​ is half way to bulk select.

We still need to account for space for admin notices at the top of the screen. See admin_notices.png​ -- it's still all mashed together.

This ticket was mentioned in IRC in #wordpress-dev by helen. ​View the logs.

In attachment:24716.36.diff​, Bulk Editing.

Introduce modes to frames to tell us whether we're in single edit or bulk edit mode. Separate from region modes, but a similar concept.

In 29053:

Use a more generic selector for image editor in media modal styling so that the Media Grid modal also gets it. see #24716.

In 29055:

Better styling for the larger image preview in the attachment details modal. Portrait images still have problems in Firefox due to percentage height. props mikeyarce for the initial patch. see #28800, #24716.

attachment:24716.37.diff​ = 27 + 30 + 32 + 33 + 34 + 36 + upping max thumbsizes from 120px to 150px

In 29056:

Media grid:

• Introduce the concept of bulk editing via a separate mode. Like the list view, only bulk deleting is available. The UI is a little funky, especially with the field display toggles there, but refinements will come.
• Up the max thumbnail size from 120px to 150px.
• Slide-down panel for the add new uploader. Known issue: it doesn't close again.
• Remove the toolbar region in the EditAttachment frame.
• Defer a function call so the grid fills available space.
• Give feedback when no results are found. Also needs styling.

props ericlewis. see #24716.

routing, keyboard

In 24716.38.diff​

• keyboard navigation in item detail (left/right)
• routing, browser url / bookmarking for detail & search
• history has issues

What would be nice was if the media grid was consistent design-wise with how the theme installation screen looks and works. See https://core.trac.wordpress.org/attachment/ticket/24716/media-library.png.

In my mockup clicking on the "Visiblity" toggle would reveal a drawer below the filter bar (in the same way as the Feature Filter on theme-install.php) with the list of checkboxes where you can toggle the visiblity of the Name, Date, Mine-type etc. rather than having lesser used options constantly visible. This would solve the issue of them being hidden on smaller screens.

I already have a patch (#28794) which seperates the filter bar from themes.css and into a seperate file with a more reuseable approach by using .wp-filter rather than .theme-navigation.

Having an API for the filter bar to make it more reuseable would be nice too, especially for plugin developers. The ability to create an instance and then methods to create toggable drawers, filter links, search and so forth. If this was all tied into a Backbone-based API where all of the filter bar components (filtering, search, bulk editing, etc) would be tied to data (collections) it would be a good start to phasing out WP_List_Table and finding a solution for #28050. This is all out-of-scope for 4.0 obviously, and has a lot of backwards compatibility implications.

better history

shift top by error div

In 29057:

Media grid attachment modal:

• Keyboard navigation.
• History and routes for single items and search results.

props adamsilverstein. see #24716.

Mentioned to ericlewis in passing that the display options should really go back up in screen options. Whatever we may think of their discoverability, I think it would be worse to have it be different on just this one screen.

Ack! The CSS is full of absolute values, 24716.40.diff​ is a simple JS fix.

Replying to DrewAPicture:

Looks like we also didn't account for admin notices at the top of the grid view, as seen in admin_notices.png​ above.

Pad No media message ​http://i.imgur.com/2PYZDLb.png

Error in Chrome Dev Tools when $_GET['item'] param is present, but no image in media ​http://i.imgur.com/H3tvQDZ.png
Uncaught TypeError: Cannot read property 'attributes' of undefined media-grid.js?ver=4.0-alpha-29018-src:304

When I click Delete Permanently the modal dialog doesn't close, but the image is removed.
Sorry, but no experience with Backbone so far, so couldn't fix.

The file input is clickable even if not visible ​http://i.imgur.com/CdMa8fK.png
Screencast at ​https://youtu.be/DLbRBDBEh7w

In attachment:24716.42.diff​, override methods in media.controller.EditImageNoFrame instead of creating the abstract media.controller._State.

In attachment:24716.43.diff​, make the edit attachment icon clickable. Hide it in bulk select mode.

No visible button to return to grid from table view when on Firefox for Android.

In 29065:

Media Grid: make the edit attachment icon clickable.

Props ericlewis.
See #24716.

In 29066:

Media Grid, remove unnecessary abstraction: wp.media.controller._State

Props ericlewis.
See #24716.

In 29067:

Media Grid, add padding to "No Media Found" message.

Props michalzuber.
See #24716.

Clickable file input still an issue ​https://www.youtube.com/watch?v=5oT5JcVxOPc

In 29068:

Avoid JS errors after [29057].

See #24716.

In 29069:

Avoid JS errors after [29057].

See #24716.

Missing scroll if a lot of images were uploaded ​http://i.imgur.com/Ztrjjpn.png
Disabling webkit-transform helped ​http://i.imgur.com/nUGPnTL.png but the uploader input is overlapping with photos.

In 29070:

Avoid JS errors after [29057]. When the modal closes, reset the URL.

See #24716.

In 29071:

Avoid JS errors after [29057]. This is not how _.debounce() works.

See #24716.

In 29072:

Media Grid: hasNext and hasPrevious are functions that must be called. Otherwise they are always truthy properties.

See #24716.

In 29073:

Media Grid: make the router work when ?item= is in the URL on page load. This is still a hack, needs to be event-driven.
See #24716.

In 29074:

Media Grid: add disambiguation between generic frames and routers and the router specifically interacting with the grid's frame.
See #24716.

Media Grid broken when collapsing menu.

In 29076:

Media Grid: decouple the Grid and Edit modal frames. Next steps: we shouldn't have to reload the frame while paginating.
See #24716.

In 29077:

Media Grid: Move toggling of visible fields to Screen Options. This moves us in a better direction... but this will probably need to be massaged again.

See #24716.

In 29078:

Media Grid: Screen Options for grid have to play nice with Screen Options for list. This was fun.

See #24716.

In 29079:

Media Grid: make registering Screen Options for non-list tables more generic.

See #24716.

In 29080:

Media Grid: JSHint.

See #24716.

In attachment:24716.45.diff​, while in Bulk Edit mode, any selected attachment should have the blue border, rather than just the last clicked one.

In attachment:24716.46.diff​, make the Uploader closable.

In 29081:

Media Grid: while in Bulk Edit mode, any selected attachment should have the blue border, rather than just the last clicked one.

Props ericlewis.
See #24716.

In 29082:

Media Grid: make the Uploader closable.

Props ericlewis.
See #24716.

Missed i18n

Just a quick i18n for the Close Overlay addition.

Just an observation but the icons for grid and list jump from left to right when you switch between each.

Perhaps having them in the same place would help with UI?

Thanks,
Wil.

In 29084:

Media Grid: fix z-index of attachment "check"

See #24716.

Change cursor on Add new hover

Added href to add-new-h2 due cursor change on hover instead adding into common.css

In 29085:

Media Grid:

• The "Edit Image" link in the attachment modal details is redundant.
• After an attachment is deleted in the modal, automatically move to the next attachment in the library. If there are no attachments left, close the modal.

See #24716.

Need help making translation work. I don't know how to change the text in wp-includes/js/media-grid.js

In 29086:

Media Grid:

• Move the grid down via CSS transition when the Screen Options slide open.
• Remove some unused CSS for grid options.

See #24716.

In 29087:

Media Grid: "Add New" should open and close, not just open.

See #24716.

In 29088:

Media Grid, in the Edit Attachment modal:

• Label the fields under the attachment a la the Edit Media page
• Move the audio and video previews above the info
• Remove the audio / video icon display. Unnecessary.
• Ensure that width and max-width are set for .mejs-container

See #24716.

In 29089:

Media Grid:

• Don't store multiple references to the Edit Attachments frame.
• Fix keyboard navigation event delegation and proxy.
• Remove redundant function calls.

See #24716.

Path to make dashicon overlay clickable

Patch to make dashicon overlay clickable

This ticket was mentioned in IRC in #wordpress-dev by michalzuber. ​View the logs.

In 24716.49.diff replaced # with link to media-new.php

Leaving open for tracking, but please open new tickets for any individual issues, including any already listed here. We have reached the point where keeping track among comments and patches is impossible.

Related: #28825, #28830, #28819.

In 29098:

Media Grid: after [29085], also handle MEDIA_TRASH.

See #24716.

Related: #28850, #28851, #28844, #28833

please what happen when i can access my wordpress admin password

Replying to chaben25:

please what happen when i can access my wordpress admin password

Password keeping is the responsibility of the user. If you lost it you can reset it by visiting {site_url}/wp-login.php?action=lostpassword

This ticket was mentioned in IRC in #wordpress-dev by melchoyce. ​View the logs.

In 29175:

No-JS fallback for the Media Library grid view. props michalzuber. fixes #28830, see #24716.

​http://make.wordpress.org/flow/2014/07/19/a-stroll-through-the-media-library-grid-view-on-a-nexus-5-4-0-beta2/

​http://make.wordpress.org/flow/2014/07/20/a-stroll-through-the-media-library-grid-view-with-macnchrome-4-0-beta2-20140720/

Thoughts:

Grid view should be nothing but big, touchable images. Those fields are litter that should go. Grid view is a new thing that should not be encumbered with parity to a past that can still be accessed via a click/tap.

Make grid view the default view and put it first in the switcher list.

Think in taps, not clicks.

The list view needs parity with the grid view. More comfortable thumbnails, view/edit modal, love.

The ability to spin up a new post with the current selection inserted as a gallery would be super decent.

Plugins that build on top of the media modal but provide their own attachment views will get bitten by r29065 where the click/select handle changed from .attachment-preview to .js--select-attachment. Example: ​http://plugins.svn.wordpress.org/getty-images/tags/2.0/getty-templates.php

In 29278:

Add support for attachment_fields_to_edit in the attachment details modal. props ericlewis. fixes #28991, see #24716.

Lazy loading in the media grid is not lazy enough. The scroll event on the view never occurs because the view itself is never scrolled, but the scroll method keeps firing from ready() up until all attachments are loaded on the page. Looks like we need to watch for the scroll event on the document, rather than the view.

See 24716.52.diff​, haven't tested outside of Chrome and FF on OS X.

new media grid toogles

Old toggle location

Miner GUI point

in the new media grid the toggle buttons are moved to the left

and in the old view they are still over on the right

Can we update the old bar to match the new look and move the toggle buttons

Paul

Patch to move the view switcher in the list view to the left to match what is being displayed in the new grid view. Not tested for rtl languages.

See patch.

As pbearne request I've modified the code to move the view switcher to the left side on grid view. However, this still needs testing for rtl languages.

Replying to kovshenin:

... the scroll method keeps firing from ready() up until all attachments are loaded on the page. Looks like we need to watch for the scroll event on the document, rather than the view.

Great, it works for me, but with the "refreshThreshold" value set to 3 maybe it's still loading too many attachments. I've tested with 200 attachments and on the first page load, it fires 4 ajax requests each one with "posts_per_page" set to 40 so the final results is 160 attachments.
Your mileage may vary depending on the thumbnail size, your screen size (if you have your browser window maximized) or if you shrink your browser window height, you may get 3 or 4 requests. But basically it keeps loading attachments till the body scrollHeight is less than its clientHeight * 3. Sort of 3 "pages" of thumbnails.
Also, I'm not so sure the "refreshThreshold" should multiply, in all infinite scroll implementations I've seen, the threshold value is *added*.
Of course, it's better to have 160 attachments than *all* the attachments loaded :) But please consider to review the threshold thing. I could easily propose a patch arbitrarily changing "refreshThreshold" value say to "2" but probably this needs more testing and feedback from users with different devices, screen sizes etc.

Replying to pbearne:

Miner GUI point

in the new media grid the toggle buttons are moved to the left

See #28946.

In 29312:

Media Grid: Improve lazy loading.

props kovshenin.
see #24716.

Replying to ocean90:

Replying to pbearne:

Miner GUI point

in the new media grid the toggle buttons are moved to the left

See #28946.

If #28946 doesn't make 4.0 please look at adding robertburnfield's patch as stop gap

many thanks

Paul

In 29416:

Media Grid: after [28996], use the same cover size for audio/video files that images use for thumbnails.

See #24716.

In 29493:

Media Grid: Use an existing string for posts without a title.

see #24716.

This ticket is unusable at its current size. Everything remaining has its own ticket, let's close this out.