WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 3 years ago

#24716 closed task (blessed) (fixed)

Grid view for the Media Library

Reported by: alexvorn2 Owned by:
Milestone: 4.0 Priority: normal
Severity: normal Version:
Component: Media Keywords:
Focuses: ui, javascript, administration Cc:

Description

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.

Attachments (69)

Media Library - List.png (195.9 KB) - added by shaunandrews 4 years ago.
List View
Media Library - Hybrid.png (231.5 KB) - added by shaunandrews 4 years ago.
Hybrid View
Media Library - Grid.png (178.8 KB) - added by shaunandrews 4 years ago.
Grid View
24716.diff (16.3 KB) - added by ericlewis 3 years ago.
24716.2.diff (16.0 KB) - added by wonderboymusic 3 years ago.
24716.3.diff (20.7 KB) - added by ericlewis 3 years ago.
24716.4.diff (20.7 KB) - added by ericlewis 3 years ago.
24716.5.diff (19.6 KB) - added by ericlewis 3 years ago.
24716.patch (1.1 KB) - added by iseulde 3 years ago.
24716.2.patch (369 bytes) - added by iseulde 3 years ago.
24716.3.patch (609 bytes) - added by SergeyBiryukov 3 years ago.
24716.filesize.png (43.3 KB) - added by SergeyBiryukov 3 years ago.
24716-image-details-spacing.png (505.1 KB) - added by gcorne 3 years ago.
24716.6.diff (394 bytes) - added by gcorne 3 years ago.
admin_notices.png (28.1 KB) - added by DrewAPicture 3 years ago.
24716.7.diff (5.2 KB) - added by ericlewis 3 years ago.
24716.8.diff (5.8 KB) - added by wonderboymusic 3 years ago.
24716.9.diff (13.0 KB) - added by ericlewis 3 years ago.
24716.10.diff (16.9 KB) - added by ericlewis 3 years ago.
24716.11.diff (22.3 KB) - added by ericlewis 3 years ago.
24716.12.diff (28.8 KB) - added by ericlewis 3 years ago.
24716.13.diff (891 bytes) - added by kovshenin 3 years ago.
24716.14.diff (39.2 KB) - added by wonderboymusic 3 years ago.
24716.15.diff (43.8 KB) - added by wonderboymusic 3 years ago.
24716.16.diff (35.8 KB) - added by wonderboymusic 3 years ago.
24716.17.diff (33.6 KB) - added by wonderboymusic 3 years ago.
24716.18.diff (35.1 KB) - added by wonderboymusic 3 years ago.
24716.19.diff (1.4 KB) - added by adamsilverstein 3 years ago.
keyboard navigation for media detail modal
24716.20.diff (1.4 KB) - added by adamsilverstein 3 years ago.
use keydown not keypress !chrome
24716.21.diff (1.3 KB) - added by adamsilverstein 3 years ago.
fix jshint error
24716.22.diff (766 bytes) - added by paulwilde 3 years ago.
24716.23.diff (371 bytes) - added by adamsilverstein 3 years ago.
fix extra space on right of grid at certain screen sizes
24716.24.diff (4.7 KB) - added by adamsilverstein 3 years ago.
add router - url mapping, history
24716.25.diff (6.1 KB) - added by adamsilverstein 3 years ago.
better routing,history; default route
24716.26.diff (5.8 KB) - added by adamsilverstein 3 years ago.
remove unused handler
24716.27.diff (2.3 KB) - added by ericlewis 3 years ago.
24716.28.diff (3.6 KB) - added by wonderboymusic 3 years ago.
24716.29.diff (8.9 KB) - added by adamsilverstein 3 years ago.
keyboard nav, history/routes
24716.30.diff (452 bytes) - added by ericlewis 3 years ago.
24716.31.diff (8.9 KB) - added by adamsilverstein 3 years ago.
improved search routing
24716.32.diff (513 bytes) - added by ericlewis 3 years ago.
24716.33.diff (2.1 KB) - added by ericlewis 3 years ago.
24716.34.diff (4.9 KB) - added by ericlewis 3 years ago.
24716.35.diff (2.7 KB) - added by ericlewis 3 years ago.
24716.36.diff (6.3 KB) - added by ericlewis 3 years ago.
24716.37.diff (15.1 KB) - added by ericlewis 3 years ago.
media-library.png (102.4 KB) - added by paulwilde 3 years ago.
media-library-legacy.png (236.9 KB) - added by paulwilde 3 years ago.
themes.png (1.3 MB) - added by paulwilde 3 years ago.
24716.38.diff (7.5 KB) - added by adamsilverstein 3 years ago.
routing, keyboard
24716.39.diff (7.4 KB) - added by adamsilverstein 3 years ago.
better history
24716.40.diff (431 bytes) - added by adamsilverstein 3 years ago.
shift top by error div
24716.41.diff (954 bytes) - added by michalzuber 3 years ago.
Pad No media message http://i.imgur.com/2PYZDLb.png
24716.42.diff (3.8 KB) - added by ericlewis 3 years ago.
24716.43.diff (2.7 KB) - added by ericlewis 3 years ago.
Screen Shot 2014-07-10 at 19.46.32.png (132.2 KB) - added by paulwilde 3 years ago.
Media Grid broken when collapsing menu.
24716.44.diff (9.3 KB) - added by wonderboymusic 3 years ago.
24716.45.diff (4.2 KB) - added by ericlewis 3 years ago.
24716.46.diff (3.2 KB) - added by ericlewis 3 years ago.
24716.47.diff (744 bytes) - added by JustinSainton 3 years ago.
Missed i18n
24716.48.diff (332 bytes) - added by michalzuber 3 years ago.
Change cursor on Add new hover
24716.49.diff (793 bytes) - added by michalzuber 3 years ago.
Added href to add-new-h2 due cursor change on hover instead adding into common.css
media-veiws.diff (456 bytes) - added by mikeyarce 3 years ago.
Path to make dashicon overlay clickable
24716.50.diff (456 bytes) - added by mikeyarce 3 years ago.
Patch to make dashicon overlay clickable
24716.51.diff (816 bytes) - added by michalzuber 3 years ago.
In 24716.49.diff replaced # with link to media-new.php
24716.52.diff (2.8 KB) - added by kovshenin 3 years ago.
newMedia.PNG (5.1 KB) - added by pbearne 3 years ago.
new media grid toogles
oldMedia.PNG (8.3 KB) - added by pbearne 3 years ago.
Old toggle location
move_view_switcher_to_left.patch (2.4 KB) - added by robertburnfield 3 years ago.
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.

Change History (217)

#1 @helen
4 years ago

  • Keywords ui-focus added

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.

#2 @shaunandrews
4 years ago

  • Cc shaun@… added

@shaunandrews
4 years ago

List View

@shaunandrews
4 years ago

Hybrid View

@shaunandrews
4 years ago

Grid View

#3 @shaunandrews
4 years ago

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.

#4 @alexvorn2
4 years ago

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

#5 follow-up: @virgodesign
3 years ago

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.

#6 in reply to: ↑ 5 @alexvorn2
3 years ago

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

Last edited 3 years ago by alexvorn2 (previous) (diff)

#7 @shaunandrews
3 years ago

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.

#9 @helen
3 years ago

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/

#10 @alexvorn2
3 years ago

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

#11 @helen
3 years ago

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.

#12 @ericlewis
3 years ago

#24710 was marked as a duplicate.

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


3 years ago

@ericlewis
3 years ago

#14 @ericlewis
3 years ago

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.

#15 @wonderboymusic
3 years ago

  • Focuses javascript administration added
  • Keywords has-patch needs-testing ui-feedback ux-feedback added
  • Milestone changed from Awaiting Review to 4.0

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.

#16 @helen
3 years ago

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.


3 years ago

@ericlewis
3 years ago

#18 @ericlewis
3 years ago

  • Summary changed from Add a grid view for media files in Media Library to Grid view for the Media Library

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.

@ericlewis
3 years ago

#19 @ericlewis
3 years ago

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.

@ericlewis
3 years ago

#20 @ericlewis
3 years ago

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.


3 years ago

#22 @helen
3 years ago

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.

#23 @helen
3 years ago

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?

@iseulde
3 years ago

#24 @iseulde
3 years ago

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.


3 years ago

#26 @iseulde
3 years ago

#28484 was marked as a duplicate.

@iseulde
3 years ago

#27 @iseulde
3 years ago

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

#28 @SergeyBiryukov
3 years ago

In 28697:

Fix JSHint error.

props avryl.
see #24716.

#29 @SergeyBiryukov
3 years ago

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

#30 @gcorne
3 years ago

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 .

@gcorne
3 years ago

#31 @gcorne
3 years ago

24716.6.diff makes the change.

#32 @mordauk
3 years ago

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

#33 follow-up: @DrewAPicture
3 years ago

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

#34 @azaozz
3 years ago

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.


3 years ago

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


3 years ago

@ericlewis
3 years ago

#37 @ericlewis
3 years ago

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.

Last edited 3 years ago by ericlewis (previous) (diff)

#38 @wonderboymusic
3 years ago

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.


3 years ago

@ericlewis
3 years ago

#40 @ericlewis
3 years ago

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.
Last edited 3 years ago by ericlewis (previous) (diff)

#41 @ericlewis
3 years ago

  • Keywords dev-feedback added; has-patch needs-testing ui-feedback ux-feedback removed

@ericlewis
3 years ago

#42 @ericlewis
3 years ago

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.

@ericlewis
3 years ago

#43 @ericlewis
3 years ago

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.

@ericlewis
3 years ago

@kovshenin
3 years ago

#44 follow-up: @kovshenin
3 years ago

  • Keywords has-patch added

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.

#45 @ericlewis
3 years ago

  • Keywords has-patch removed

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.


3 years ago

#47 @adamsilverstein
3 years ago

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

#48 in reply to: ↑ 44 @SergeyBiryukov
3 years ago

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

#49 @SergeyBiryukov
3 years ago

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.


3 years ago

#51 @wonderboymusic
3 years ago

  • Keywords has-patch needs-refresh added

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.

#52 @wonderboymusic
3 years ago

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

#53 @wonderboymusic
3 years ago

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.

#54 @wonderboymusic
3 years ago

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.

#55 @helen
3 years ago

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.

#56 @helen
3 years ago

  • Keywords needs-patch added; dev-feedback has-patch needs-refresh removed

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.

#57 @wonderboymusic
3 years ago

In 28995:

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

See #24716.

#58 @wonderboymusic
3 years ago

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.

#59 @wonderboymusic
3 years ago

In 28997:

Media Grid: Use the proper attachment value for uploadedToTitle.

See #24716.

#60 @wonderboymusic
3 years ago

In 28998:

Media Grid: JSHint fixes.

See #24716.

#61 @helen
3 years ago

  • Type changed from enhancement to task (blessed)

@adamsilverstein
3 years ago

keyboard navigation for media detail modal

@adamsilverstein
3 years ago

use keydown not keypress !chrome

#62 follow-up: @adamsilverstein
3 years ago

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

@adamsilverstein
3 years ago

fix jshint error

@paulwilde
3 years ago

#63 @paulwilde
3 years ago

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

http://cl.ly/WPLV/Screen%20Shot%202014-07-04%20at%2020.28.27.png

Last edited 3 years ago by paulwilde (previous) (diff)

#64 @SergeyBiryukov
3 years ago

In 29000:

Fix a regression of positioning in Attachment Display Settings.

props paulwilde.
see #24716.

#65 in reply to: ↑ 62 ; follow-up: @ericlewis
3 years ago

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?

#66 in reply to: ↑ 65 @adamsilverstein
3 years ago

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

@adamsilverstein
3 years ago

fix extra space on right of grid at certain screen sizes

#67 @adamsilverstein
3 years ago

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

@adamsilverstein
3 years ago

add router - url mapping, history

#68 @adamsilverstein
3 years ago

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?

#69 @helen
3 years ago

In 29017:

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

#70 @adamsilverstein
3 years ago

  • Keywords dev-feedback added

feedback, testing appreciated!

@adamsilverstein
3 years ago

better routing,history; default route

@adamsilverstein
3 years ago

remove unused handler

@ericlewis
3 years ago

#71 @ericlewis
3 years ago

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.

@adamsilverstein
3 years ago

keyboard nav, history/routes

#72 @adamsilverstein
3 years ago

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

@ericlewis
3 years ago

#73 @ericlewis
3 years ago

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

@adamsilverstein
3 years ago

improved search routing

#74 @adamsilverstein
3 years ago

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

@ericlewis
3 years ago

#75 @ericlewis
3 years ago

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.

@ericlewis
3 years ago

#76 @ericlewis
3 years ago

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.

@ericlewis
3 years ago

#77 @ericlewis
3 years ago

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.
Last edited 3 years ago by ericlewis (previous) (diff)

@ericlewis
3 years ago

#78 @ericlewis
3 years ago

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

#79 @DrewAPicture
3 years ago

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.


3 years ago

@ericlewis
3 years ago

#81 @ericlewis
3 years ago

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.

Last edited 3 years ago by ericlewis (previous) (diff)

#82 @helen
3 years ago

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.

#83 @helen
3 years ago

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.

@ericlewis
3 years ago

#84 @ericlewis
3 years ago

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

#85 @helen
3 years ago

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.

@paulwilde
3 years ago

@adamsilverstein
3 years ago

routing, keyboard

#86 @adamsilverstein
3 years ago

In 24716.38.diff

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

#87 @paulwilde
3 years ago

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.

@adamsilverstein
3 years ago

better history

@adamsilverstein
3 years ago

shift top by error div

#88 @helen
3 years ago

In 29057:

Media grid attachment modal:

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

props adamsilverstein. see #24716.

#89 @helen
3 years ago

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.

#90 in reply to: ↑ 33 @adamsilverstein
3 years ago

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.

@michalzuber
3 years ago

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

#91 @michalzuber
3 years ago

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.

#92 @michalzuber
3 years ago

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

@ericlewis
3 years ago

#93 @ericlewis
3 years ago

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

@ericlewis
3 years ago

#94 @ericlewis
3 years ago

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

Last edited 3 years ago by ericlewis (previous) (diff)

#95 @knutsp
3 years ago

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

#96 @wonderboymusic
3 years ago

In 29065:

Media Grid: make the edit attachment icon clickable.

Props ericlewis.
See #24716.

#97 @wonderboymusic
3 years ago

In 29066:

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

Props ericlewis.
See #24716.

#98 @wonderboymusic
3 years ago

In 29067:

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

Props michalzuber.
See #24716.

#100 @wonderboymusic
3 years ago

In 29068:

Avoid JS errors after [29057].

See #24716.

#101 @wonderboymusic
3 years ago

In 29069:

Avoid JS errors after [29057].

See #24716.

#102 @michalzuber
3 years ago

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.

#103 @wonderboymusic
3 years ago

In 29070:

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

See #24716.

#104 @wonderboymusic
3 years ago

In 29071:

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

See #24716.

#105 @wonderboymusic
3 years ago

In 29072:

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

See #24716.

#106 @wonderboymusic
3 years ago

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.

#107 @wonderboymusic
3 years ago

In 29074:

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

@paulwilde
3 years ago

Media Grid broken when collapsing menu.

#108 @wonderboymusic
3 years ago

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.

#109 @wonderboymusic
3 years ago

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.

#110 @wonderboymusic
3 years ago

In 29078:

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

See #24716.

#111 @wonderboymusic
3 years ago

In 29079:

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

See #24716.

#112 @wonderboymusic
3 years ago

In 29080:

Media Grid: JSHint.

See #24716.

@ericlewis
3 years ago

#113 @ericlewis
3 years ago

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.

@ericlewis
3 years ago

#114 @ericlewis
3 years ago

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

#115 @wonderboymusic
3 years ago

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.

#116 @wonderboymusic
3 years ago

In 29082:

Media Grid: make the Uploader closable.

Props ericlewis.
See #24716.

@JustinSainton
3 years ago

Missed i18n

#117 @JustinSainton
3 years ago

Just a quick i18n for the Close Overlay addition.

#118 @limecanvas
3 years ago

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.

#119 @wonderboymusic
3 years ago

In 29084:

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

See #24716.

@michalzuber
3 years ago

Change cursor on Add new hover

@michalzuber
3 years ago

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

#120 @wonderboymusic
3 years ago

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.

#121 @michalzuber
3 years ago

Need help making translation work. I don't know how to change the text in wp-includes/js/media-grid.js
http://i.imgur.com/GsoNod4.png

#122 @wonderboymusic
3 years ago

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.

#123 @wonderboymusic
3 years ago

In 29087:

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

See #24716.

#124 @wonderboymusic
3 years ago

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.

#125 @wonderboymusic
3 years ago

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.

@mikeyarce
3 years ago

Path to make dashicon overlay clickable

@mikeyarce
3 years ago

Patch to make dashicon overlay clickable

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


3 years ago

@michalzuber
3 years ago

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

#127 @helen
3 years ago

  • Keywords needs-patch dev-feedback removed

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.

#129 @wonderboymusic
3 years ago

In 29098:

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

See #24716.

#130 @ocean90
3 years ago

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

Last edited 3 years ago by ocean90 (previous) (diff)

#131 follow-up: @chaben25
3 years ago

please what happen when i can access my wordpress admin password

#132 in reply to: ↑ 131 @ericlewis
3 years ago

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.


3 years ago

#134 @helen
3 years ago

In 29175:

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

#136 @ryan
3 years ago

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.

#137 @kovshenin
3 years ago

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

#138 @helen
3 years ago

In 29278:

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

@kovshenin
3 years ago

#139 follow-up: @kovshenin
3 years ago

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.

@pbearne
3 years ago

new media grid toogles

@pbearne
3 years ago

Old toggle location

#140 follow-up: @pbearne
3 years ago

Miner GUI point

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

https://core.trac.wordpress.org/raw-attachment/ticket/24716/newMedia.PNG

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

https://core.trac.wordpress.org/raw-attachment/ticket/24716/oldMedia.PNG

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

Paul

@robertburnfield
3 years ago

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.

#141 @robertburnfield
3 years ago

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.

#142 in reply to: ↑ 139 @afercia
3 years ago

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.

#143 in reply to: ↑ 140 ; follow-up: @ocean90
3 years ago

Replying to pbearne:

Miner GUI point

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

See #28946.

#144 @ocean90
3 years ago

In 29312:

Media Grid: Improve lazy loading.

props kovshenin.
see #24716.

#145 in reply to: ↑ 143 @pbearne
3 years ago

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

Last edited 3 years ago by pbearne (previous) (diff)

#146 @wonderboymusic
3 years ago

In 29416:

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

See #24716.

#147 @SergeyBiryukov
3 years ago

In 29493:

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

see #24716.

#148 @wonderboymusic
3 years ago

  • Resolution set to fixed
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.