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

Media library UI #350

Closed
chadfawcett opened this Issue Apr 10, 2017 · 13 comments

Comments

@chadfawcett
Copy link

chadfawcett commented Apr 10, 2017

- Do you want to request a feature or report a bug?
feature

- What is the current behavior?
If you want to use an image that is already on the site, you must upload the image again when creating a new collection item. If the name of the image is the same, it overwrites the existing images (see #247)

- What is the expected behavior?
Users should be able to choose from images that have already been uploaded to the website. The UI could display images from the media_folder and allow for selecting them.

@Benaiah Benaiah added the improvement label Apr 11, 2017

@erquhart erquhart added kind: feature and removed improvement labels Apr 17, 2017

@erquhart erquhart changed the title Image picker should allow for picking existing images Media library UI Apr 17, 2017

@erquhart

This comment has been minimized.

Copy link
Member

erquhart commented Apr 17, 2017

@chadfawcett agreed, this would be a great feature.

@indysigner

This comment has been minimized.

Copy link

indysigner commented Apr 18, 2017

Great feature request, I mentioned a Media Library UI at their CMS redesign discussion as well (#180 (comment)). It's also worth noting, that the Media Library deserves its own link in the primary navigation of the CMS as well as a way to upload multiple images at once. :-)

@tech4him1

This comment has been minimized.

Copy link
Collaborator

tech4him1 commented May 15, 2017

If we were to do this, I am wondering if the entry creation implementation should create a separate commit for each file added to a post instead of committing them all in one. (A good side effect of this would be that it would also make the GitLab implementation (#57) easier.)

@tech4him1

This comment has been minimized.

Copy link
Collaborator

tech4him1 commented Jun 27, 2017

While we are already working on media, it might be a good idea to consider the upload location implementation. Some flat-file CMSs and static site generators have found it better to place the media uploaded to a post in the same folder as the post itself, but some have kept media in a separate media_folder. There are benefits and downsides to each method of course, and adding a "Media Library" feature may influence the decision as well.

@erquhart

This comment has been minimized.

Copy link
Member

erquhart commented Jun 27, 2017

@tech4him1 that all depends on your build tool. If you have other implementation questions, feel free to hit us up on Gitter!

@erquhart

This comment has been minimized.

Copy link
Member

erquhart commented Jul 24, 2017

@carlflor this is a hot issue for the community, curious if you're up for kickstarting it? It's less about UI design and more about allowing images and assets to be managed directly, both on upload and when including an image/asset in an entry.

It's closely tied to #432, which is about allowing images and assets to be stored in third party services.

Let me know if you're interested!

@carlflor

This comment has been minimized.

Copy link

carlflor commented Jul 25, 2017

@erquhart Okay. I'm still in the process of reviewing the code structure, but I can start working on this. :)

@erquhart

This comment has been minimized.

Copy link
Member

erquhart commented Jul 25, 2017

@carlflor awesome! I'll write up some high level considerations in a bit.

@erquhart

This comment has been minimized.

Copy link
Member

erquhart commented Jul 25, 2017

Below are some points on how the media library implementation could work.

Overview

CMS users should be able to view, upload, and delete assets (images and other files) through a dedicated UI. The initial implementation should come in the form of an overlay or dialog to avoid integration concerns with the current UI.

Configuration

  • Configuration should not be impacted.
  • Feature should be fully backwards compatible with existing configurations.

Points of Access

  • The overlay should be shown when clicking a file or image widget in the entry editor.
  • The overlay should be accessible through a simple button in the top navigation.

Implementation

Overlay

  • The React Toolbox Dialog component should be used for the overlay itself.
  • A simple text title such as "Assets" should be displayed in the lop left corner, with the same styling as collection titles in the Collections page.

Bottom Bar

  • The bottom bar in the Dialog component should contain the following buttons:
    • Delete: Positioned to far left, disabled when no asset is selected.
    • Add New: Positioned next to Delete, launches file picker on click.
    • Insert: Positioned to far right, disabled when no asset is selected.
      • Hidden unless media library was launched by clicking a file/image widget.
    • Cancel: Positioned next to Add New, closes the Media Library overlay.

Search

  • A search bar should be provided, centered in the top of the overlay.
  • The search bar should only query against filenames.
  • Displayed assets should update when the search field value changes.
  • Search results should begin updating after two characters are typed.
  • Search update should be debounced by ~500ms.

Assets List

  • The React Toolbox Table component should be used for the list of assets.
  • Columns should include: "Filename", "Extension", "Created", and "Updated".
  • Columns should be sortable by clicking a column header.
  • Clicking a row selects the asset in that row. The user can then insert or delete using the bottom bar buttons.
  • The data cells in the rows should not be interactive, clicking only selects the row.
  • Only one row may be selected at a time (multi-select should be a future improvement)

Drag and Drop

  • Images and files should be uploaded when dragged and dropped to the overlay.
  • The UI should update when an image/file is being dragged over the overlay.
  • See the current file/image widget dragging behavior for reference.
  • Only one file/image may be dragged and dropped at a time.

File/Image Widgets

  • Dragging images or files to the image/file widgets should still work.
  • On click, the media library overlay should open.

Top Nav Button

  • The CMS top nav should include an suitable icon button between the home and "plus" buttons.
  • On click, the media library overlay should open.
  • Insert button should not be visible when the media library is launched this way.

Future improvements

  • Assets should be stored in collections, similar to the currently used content collections.
  • Asset collections should be visible on the main CMS UI, and searchable along with content through the primary search mechanism.

Feedback welcome! @carlflor is looking into this 🎉, but it's a big undertaking, so please speak up if you'd like to help out!

cc/ @biilmann @Benaiah @neutyp

@erquhart

This comment has been minimized.

Copy link
Member

erquhart commented Aug 17, 2017

This is now underway, WIP PR coming shortly.

This was referenced Aug 22, 2017

@erquhart erquhart modified the milestones: 0.5.0, 1.0 Aug 30, 2017

@erquhart erquhart modified the milestones: 1.0.0, 0.5.0 Sep 8, 2017

@dopry

This comment has been minimized.

Copy link
Contributor

dopry commented Sep 12, 2017

I've been poking around at some existing react media libraries and file managers. I've found the following which may be good for inspiration or may have components we can incorporate.

Prior Art

  • Eureka - full featured, but not very attractive. multiple media sources, search, folder navigation, multiple layouts.
  • Scotch.io Media Library - an okay example for a developer, but probably not a good fit.
  • React Keyed File Browser - looks really nice. The interface and components look easy to work with.
  • React File Explorer - there isn't a demo, but may be worth further investigation.

Alternatives

I've started some wires for an sidebar folder nav style interface as a possible alternative to the current modal centric approach, that may work better for drag and drop workflows, Netlify CMS -
Media Wires on Lucid Chart
If you launch it in 'present' mode you should get the basic idea. If people like this as a possible next step I can flesh out the post workflows.

I'm going to try to touch up the existing UX a bit now to make it work sooner rather than later... I'm not sure I'm adept enough at React to start implementing UX from scratch.

@erquhart erquhart added this to Sprint 5 (11/9 - 11/22) in Sprint Planning | Sprint 6 (11/23 - 12/6) Sep 13, 2017

@erquhart erquhart removed this from Sprint 5 (11/9 - 11/22) in Sprint Planning | Sprint 6 (11/23 - 12/6) Sep 13, 2017

@erquhart erquhart added this to Sprint 1 (9/14 - 9/27) in Sprint Planning | Sprint 6 (11/23 - 12/6) Sep 13, 2017

@ziburski

This comment has been minimized.

Copy link
Collaborator

ziburski commented Sep 14, 2017

I posted some thoughts and mockups on the media library UI over here.

@erquhart

This comment has been minimized.

Copy link
Member

erquhart commented Sep 15, 2017

@dopry although assets are obviously files, we want to try to abstract away from making this a folder tree interface as much as possible.

Your screengrab in Lucid is exactly what I meant in the Future Improvements section of my requirements comment above - having assets in collections, just like other content. I'm thinking we'll stay away from nesting collections, but otherwise it looks like we're on the same page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.