Make it easier to pick media on multiple content items

[iOvergaard]

Managing a website with a large media collection is quite cumbersome for editors, especially when they want to reuse a media element somewhere else on the site.

Picture this: You have an image on a given page, which you want to reuse on another page, but you don't know exactly where it's located in the media library. Your only option is to click "Edit" on the image and copy/screenshot the breadcrumb in the bottom of the page, which looks like: "Folder A / Folder B / Folder C / ". Then you have to navigate back to that exact location on the other page, and only then can you search for the name of the image.

Ideas for optimizing the experience:

1. Add the name/ID of the media element to the preview of the image:
   

2. Enable the search field in the media library to search nested across all media, because it seems like it only filters the current folder in the library.

3. Allow to search by ID of media elements as it seems you are only allowed to search by name currently.

[nul800sebastiaan]

How about a copy button? It would copy the link to the media item which you can then paste in your other media picker.

[iOvergaard]

How about a copy button? It would copy the link to the media item which you can then paste in your other media picker.

Yes, that is a good idea. Really anything that enables the editor to move/copy references for media elements are helpful. I created this feature suggestion with the media picker first and foremost, because that is one of the most used outputs for media elements (in my opinion), and if the media picker can be improved on its own, the other suggestions regarding media search is less important.

[patrickdemooij9]

Did a quick prototype on the copy image:

It's still a bit rough with the code, but nothing that can't be fixed. I think it would be good to follow the same styling as the block editor, but let me know what you think!

[nul800sebastiaan]

That looks brilliant @patrickdemooij9! And we love the consistency with the other copy/paste options in the backoffice as well. Looking forward to seeing the PR! 👍

[umbrabot]

Hi @Jacob87,

We're writing to let you know that we would love some help with this issue. We feel that this issue is ideal to flag for a community member to work on it. Once flagged here, folk looking for issues to work on will know to look at yours. Of course, please feel free work on this yourself ;-). If there are any changes to this status, we'll be sure to let you know.

For more information about issues and states, have a look at this blog post

Thanks muchly, from your friendly Umbraco GitHub bot :-)

[patrickdemooij9]

Added the PR for the copy logic: #9957

I'll probably see if I can also pick up #2 and #3 in a separate PR

[skttl]

@patrickdemooij9 I think it should be in the action menu on the property label, like how block list does it?

[patrickdemooij9]

@skttl I did think about placing it there. But then how would people copy a single image in a media picker where they can choose multiple images?

[skttl]

Yes, sorry I forgot Block lists do pretty much the same, when copying a single block item :)

So if you want - you could add the property actions menu for multiple media pickers, to enable copying of all selected media.

[patrickdemooij9]

Yeah, I think I'll add that for the multiple media pickers somewhere today.

[iOvergaard]

I really like the copy/paste solution as demonstrated! But I also think a part of the issue is that it is not possible to open up the media picker on the same folder again, if you want to select another image. I mean, you have to first remove the existing image and then navigate back to the previous folder, and you can probably only remember where it was, if you took a screenshot of the breadcrumb first.

[patrickdemooij9]

@Jacob87 What about something like this?

(Misuses the starting node now, but quick prototype). This makes it so you'll always open the folder of the image that was in there. So it opens in the "Products" folder because the image came from there.

We'll have to check because there is some logic that sort of already does this. Whenever you visit a folder, it'll remember that. So if you go to folder X in the first media picker, it'll automatically open that folder in the second media picker

[iOvergaard]

@patrickdemooij9 That looks really great as well. Do you have to remove the image before opening the media library, couldn't you open it by simply clicking the existing image?

I'm imagining the scenarios like this:

Click existing image -> Open media library in the folder of that image
Delete existing image -> Click element -> Open media library in the last used folder (as today)

What are your thoughts on that?

[patrickdemooij9]

@Jacob87, that does sound like something that shouldn't be that difficult to do. Just wondering if it wouldn't be confusing for users as all actions are shown as icons now

[nul800sebastiaan]

Please make sure to concentrate only on the copy button, now we're starting to make up more things that HQ hasn't reviewed, we need to agree on those first and put them in a separate PR.

I would say that these are all nice assumptions but each of those changes are significant to current users, usually not in a good way, we'll break someone's workflow: https://xkcd.com/1172/

[nathanwoulfe]

Copying media items is resolved in #9957

[nul800sebastiaan]

As noted in #9957 - turns out we were already working on an alternative version of this feature in PR #9461

So that one will fix this issue, we couldn't get it ready for 8.13 yet, but it will go into 8.14 - we'll keep this open for a bit longer until the PR is merged.

[nul800sebastiaan]

Fixed in 8.14 - #9461