When I have a media field that uses Lightning Media browser, I can only select a single media asset, even though my field is set up to allow for multiple items.

Comments

Bcwald created an issue. See original summary.

balsama’s picture

This is far from ideal UX - but you can select more than one image... just not at the same time. If your field is setup to allow more than one value, you should be able to click on the "Select Image(s)" button again (and again) to continue to add images to the field.

This is really just a workaround until we can straighten out the UX with entity browser.

phenaproxima’s picture

I feel like Entity Browser somehow supports this, at least should support it. I'll look into adding this soon, because it is definitely sorely needed.

rajab natshah’s picture

I think the Entity Browser Enhanced module could help very much at this time.

Work on the module were inspired by the work on Lightning.
But we advanced the UX behaviours a bit.
It's like having a list of enhancers "Libraries" as plugin then you will be able to select one to change the look an behaver of the selected entity browser view.

Entity Browser Enhanced Multiselect

Entity Browser Enhanced

Scenarios Coved:

Scenario: Image filed with one value.
Given we do have a filed which Limited to 1 value for Allowed number of values
When we double click an image in the Entity Browser
Then the Entity Browser will auto submit the image to the field.
When we click an image in the Entity Browser
Then the image will be highlighted
And the Submit button will be active
And we will not be able to select other image until we unselect the current selected image.

Scenario: Image filed with unlimited values.
Given we do have a filed which Unlimited values for Allowed number of values
When we double click an image in the Entity Browser
Then the Entity Browser will auto submit the image to the field.
When we click an image in the Entity Browser
Then the image will be highlighted
And the Submit button will be active
And we could select or deselect as many images as we like.

Scenario: Image filed with more than one value for the limit.
Given we do have a filed which Limited to > 1 of values for Allowed number of values
When we double click an image in the Entity Browser
Then the Entity Browser will auto submit the image to the field.
When we click an image in the Entity Browser
Then the image will be highlighted
And the Submit button will be active
And we could select or deselect images within the limit

I will try to add patch files with 2 options. to add the module to Lightning .. or Patch Lightning Media feature.

#2815809: [Entity Browser Enhanced] to provide some behaviours and style enhancements to Entity Browsers, specifically for multiselect and image/media browsers.

balsama’s picture

Feedback from commit c621ab2713ba1a017845ed64885f11a1eb17a85f on the 8.x-media-browser-multiple branch:

  • [bug] If you filter the list at all and then unfilter, it becomes possible to select more than one item when the cardinality is set to 1. For example, using the media browser from CKEditor:
    1. Have at least two media items
    2. Search for sometning that doesn't exist so that the list is empty.
    3. Reset the filter
    4. You can now select two media entities.
  • The checkbox that appears is very large and obscures the selected image. Can we make it small and in a corner?
  • The checkbox doesn't really show up on stuff with a white background (e.g. tweets). Can we make it translucent gray or something that is more likely to show up?
phenaproxima’s picture

Status: Active » Needs review

Good catches all. I have addressed them (with tests), except for #3, and it is ready to be reviewed in the 8.x-media-browser-multiple branch.

EDIT: Travis is, in classic Travis fashion, repeatedly failing a test which is, for me, passing locally every time. It's ready for manual review, but I'll have to see what I can do about getting Travis to pass it. Fixed it.

balsama’s picture

This works really, really well. And it's a massive improvement in other ways over what we currently have.

I want to document and discuss three things before merging:

  1. In an upload field with the cardinality set to more than one, there is some strange behavior when I want to use the same image multiple times. For one, I have to open the dialog multiple times. I don't see way around that with the current UX though. The other is that the widget on the form only shows the image once in the table. If I save, I clearly see two images. And if I delete the one that shows up in the table, the other is "revealed". Again, I'm not sure if this was an existing issue and I don't necessarily want to block on it. But wanted to get thoughts.
  2. When the cardinality is set to 1 - as it is in the media library - after selecting an image, I expected clicking on another image to de-select the first and select the new one. I was able to quickly figure out that I need to first de-select the first (by clicking on it a second time) before selecting the second. And I understand that any other behavior would make any browsers with cardinality set to larger than 1 very confusing.
  3. Since we're doing quite a bit of JS interactions, we should check to see that it's usable on devices without click.
phenaproxima’s picture

In an upload field with the cardinality set to more than one, there is some strange behavior when I want to use the same image multiple times. For one, I have to open the dialog multiple times. I don't see way around that with the current UX though.

Me neither. It would take a pretty big UX redesign to account for this use case.

The other is that the widget on the form only shows the image once in the table. If I save, I clearly see two images. And if I delete the one that shows up in the table, the other is "revealed". Again, I'm not sure if this was an existing issue and I don't necessarily want to block on it. But wanted to get thoughts.

I'd be very surprised if this is due to anything Lightning's JavaScript, which is pretty much cosmetic in nature, is doing. I suspect it's a limitation either of Entity Browser (likely) or image fields themselves (less likely). We should get input from @samuel.mortenson or @slashrsm about this.

When the cardinality is set to 1 - as it is in the media library - after selecting an image, I expected clicking on another image to de-select the first and select the new one. I was able to quickly figure out that I need to first de-select the first (by clicking on it a second time) before selecting the second. And I understand that any other behavior would make any browsers with cardinality set to larger than 1 very confusing.

That's a really good point. I'll see if I can get it to work that way.

Since we're doing quite a bit of JS interactions, we should check to see that it's usable on devices without click.

Agreed, just not quite sure how to test this.

  • balsama committed 3847cc1 on 8.x-2.x authored by phenaproxima
    Issue #2829444 by phenaproxima: Multiselect media fields cannot select...
phenaproxima’s picture

Status: Needs review » Fixed
balsama’s picture

Status: Fixed » Needs work

Discovered a bug after commit where you cannot select any items on fields with unlimited cardinality. Will commit a fix against this issue shortly.

  • balsama committed 050fb71 on 8.x-2.x
    Issue #2829444: Support unlimited cardinality
    
phenaproxima’s picture

Status: Needs work » Fixed

All righty then!

phenaproxima’s picture

Status: Fixed » Closed (fixed)
balsama’s picture

I ended up using a color from seven, the highlight color (#ed5), for the border on selected items. I think the blues and greens we had might have actually looked better, but think it's best not to introduce a new color to seven.

danepowell’s picture

It seems like the "double click to submit" functionality referenced in #4 was never implemented. Is that correct? That would be a really nice feature to have.

danepowell’s picture

I implemented double-click to select in #2888535: Double-click to select items in media browser