search

umbraco / Umbraco-CMS

Umbraco is a free and open source .NET content management system helping you deliver delightful digital experiences.
https://umbraco.com
MIT License
4.48k stars 2.69k forks source link

Make it easier to pick media on multiple content items #9948

Closed iOvergaard closed 3 years ago

iOvergaard commented 3 years ago

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: 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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Did a quick prototype on the copy image: copyImage

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Added the PR for the copy logic: https://github.com/umbraco/Umbraco-CMS/pull/9957

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

skttl commented 3 years ago

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

patrickdemooij9 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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

iOvergaard commented 3 years ago

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 commented 3 years ago

@Jacob87 What about something like this? folderRemember (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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

Copying media items is resolved in #9957

nul800sebastiaan commented 3 years ago

As noted in https://github.com/umbraco/Umbraco-CMS/pull/9957 - turns out we were already working on an alternative version of this feature in PR https://github.com/umbraco/Umbraco-CMS/pull/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 commented 3 years ago

Fixed in 8.14 - https://github.com/umbraco/Umbraco-CMS/pull/9461