Improving the MediaField Experience: A Fresh UX Update

[buzznick]

We’d like to share a new MediaField editor we’ve built that makes the user experience smoother and more intuitive.

Single Image MediaField

As shown in the video below, we've replaced the previous action buttons with a large, clickable placeholder card that opens the media library. Once an image is selected, all actions—such as adding media text or anchors—are now integrated directly into the image card. If the user wants to replace the image, they can simply click on it to reopen the media library and choose a new one.

We also noticed it was difficult to tell whether an image had media text applied. To improve this, the speech bubble icon now appears as an outline by default when an image is added. Once media text is entered, the icon changes to a filled version, making it easy for users to see at a glance which images have media text associated with them.

Multiple Images MediaField

For MediaFields that support multiple images, we wanted to apply the same streamlined approach while also improving usability for fields containing many images. We redesigned the top bar, removing the single-image actions and introducing a layout that mirrors the media library. Users can now switch between different views, making it easier to manage large sets of images. In addition to the existing small and large card sizes, we’ve also added a new list view for more efficient browsing and editing.

We've been using these updated MediaFields internally for a while now and have received some great feedback. We wanted to share this work with the community and would love to hear your thoughts or suggestions. If there's interest, we're also happy to submit this as an additional MediaField editor via a PR.

[hishamco]

I suggest to submit a PR for it

[Piedone]

Contributing this would be great, yes!

You may also be interested in the admin renewal: https://github.com/OrchardCMS/OrchardCore/discussions/categories/admin-renewal.

[hishamco]

Good point, we could align with the new design, but that doesn't prevent us from submitting a PR, then we can react to the UI changes.

[buzznick]

Great! I’ll create a new editor called Gallery and open a PR soon 😊.

[Piedone]

Awesome, thank you!

[buzznick]

I have now submitted a PR #18151