>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #2796001. --> Reported by: [webchick](https://www.drupal.org/user/24967) >>> <p>For Drupal 8.3, we want to ship with a media library that allows displaying and selecting from a listing of previously-uploaded images. (And expanded later to also cover videos, audio files, documents, etc.)</p> <p>This issue intends to compare/contrast different approaches both within and outside of the Drupal ecosystem, with the aim to arrive at a validated design we can turn into one or more core patches.</p> <h3>Current media library in core</h3> <p>Drupal 8 ships with a media library, in the form of a basic administrative view:</p> <p><img src="https://www.drupal.org/files/issues/core-media-library.png" alt="List of files"></p> <p>Files are listed in a simple table, exposing their raw file names, but with no visual representation of what the image looks like.</p> <p>This library of pre-existing files is not accessible from the content author's experience; when adding an image to the WYSIWYG editor, the only option is to upload a new image:</p> <p><img src="https://www.drupal.org/files/issues/Screen%20Shot%202016-08-20%20at%2010.48.20%20AM.png" alt="Upload new image."></p> <h3>Prototype</h3> <p><img src="https://www.drupal.org/files/issues/drupal-media-library-mvp-prototype-v0-8.png" width="900" alt="prototype"></p> <h3>Requirements</h3> <p>What then do we want to see in a new media library experience?</p> <ul> <li>Accessible to content authors, not just content administrators</li> <li>Allow users to see a listing of previously-uploaded images when adding a new image.</li> <li>Visual representation of images (e.g. grid of thumbnails)</li> <li>Allow selecting from a previous image when inserting an image into the WYSIWYG editor.</li> <li>Must not regress accessibility features of current image UI (e.g. required alt text)</li> <li>Provide basic filtering options (e.g. search by file name)</li> <li>Simple enough spec to implement by January.</li> <li><em>Anything else?</em></li> </ul> <h3>Prioritized user stories</h3> <p>Here prioritization is simply based on the heuristic "If the user need 1 is not being met, it's either impossible, or makes no sense to try to meet user need 2" eg. if my need calls for a media browser, without a media browser I can't have a media browser with a grid view.</p> <p>Stories that should be covered by the MVP are prefixed with an "*".</p> <p><strong>Content authors</strong></p> <ol> <li><strong>* 'When I add media to a piece of content I want the media to be available when I want to add it to another piece of content so I don't have to upload it again.'</strong></li> <li><strong>* 'When I add media to a piece of content I want to browse thumbnails of the media files if they are visual (eg. video, image) so I don't have to guess or remember what I named things'</strong></li> <li>'When I add media to a piece of content I want to see the the things most recently added or edited by me already at the top of the list so I don't have to apply filters or scroll or page through many files to find what I need'</li> <li><strong>* 'When I add media to a piece of content I want to be able to filter the list of files with autocomplete so I can quickly find what I'm looking for"</strong></li> <li>'When I add media to a piece of content while quick editing I want to be able to see what it looks like in place without having to close the editing widget so I'm not constantly going back and forth between edit and preview modes."</li> <li>"When I add media to a piece of content I wan to be able to scale, crop, or rotate images I am adding so that I don't have to open them in an image editing application, edit, re-save, and re-upload them just to make a simple change."</li> <li><strong>* "When I add media to a piece of content I need to be able to browse files by (maybe hierarchical) categories related to my business, so that I can quickly find what I am looking for"</strong></li> <li>"When I add media to a piece of content I want to be able to add content I've seen on Facebook, Twitter, Youtube as easily as uploading media from my own computer."</li> <li>"When I'm dealing with media I've seen on Facebook, Twitter, Youtube etc, I want it to 'just work' and not have to deal with techie jargon like 'embed codes'"</li> </ol> <p><strong>Content editors</strong></p> <ol> <li><strong>* "When I browse media in my site I want to be able to view the media as either a grid of thumbnails or a list so that I can scan through large quantities of files without having to do a lot of paging"</strong></li> <li>"When I browse media in my site I want to be able to enlarge or reduce the size of the thumbnail images so that I don't have to open each one to see it in greater detail"</li> </ol> <p><strong>Site builders</strong></p> <ol> <li><strong>* 'When I add media to my site I want to be able to add multiple files at once so I don't have to upload files through the UI over and over or figure out how to manually put things in the file system"</strong></li> <li>"When I add multiple media files to my site I would like it to be as fast and simple as possible whether the files are coming from my computer of from another remote source"</li> <li>"When I add multiple media files to my site I would like to "bulk fill" some fields with the same value so that I don't have to repetitively fill the same field with the same value over and over for many files"</li> </ol> <h3>Media library options in contrib</h3> <h4>@todo</h4> <h3>Media libraries of competitors</h3> <h4>WordPress</h4> <p><img src="https://www.drupal.org/files/issues/Screen%20Shot%202016-08-20%20at%2010.45.18%20AM.png" alt="WordPress"></p> <h4>@todo</h4> <h3>Goal</h3> <p>The goal at this stage is to arrive at an implementable spec, so let's start by exploring ideas!</p>