Make it possible to reset media picker crops #18110

kjac · 2025-01-24T10:58:31Z

Prerequisites

I have added steps to test this contribution in the description below

If there's an existing issue for this PR then this fixes #12135

Description

This PR makes it possible to reset (remove) local crops from a media picker.

As-is, the media picker will forcefully overwrite the crop with the defaults when one attempts to reset the crop. This efficiently makes it impossible to "inherit" existing crops from the original image once a corresponding local crop has been created.

With this PR, the "reset crop" functionality literally resets (and removes) the crop. For comparison, this is how the image cropper works, and this is also how the media picker works in V14+ 👍

Note that I also experienced issues with the default image focal point going missing after saving a document. This happens because the media picker value editor explicitly strips out the default focal point ... so this should really be fixed serverside. However, I'm afraid this will have consequences at a later point, when V13 changes are forward merged to V14+, so I have opted to fix it clientside instead 😄

Testing this PR

Setup a crop on the default image cropper.
Setup a corresponding crop on the default image media picker.
Upload an image to the media library and define the crop.
Create a document based on a doctype that contains the default image picker.
- The document must have a template for rendering.
Pick the uploaded image (do not define local a crop yet) and publish the page.
Render the cropped image in frontend (see test template below).
Define a local crop that overrides the media crop and republish the page.
Render the cropped image again - the local crop should take precedence over the media crop.
Reset the local crop and republish the page.
Render the cropped image again - it should revert to rendering the media crop.

Test template

@using Umbraco.Cms.Core.Models
@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage
@{
	Layout = null;
	var cropper = Model.Value<MediaWithCrops>("image");
	if (cropper is null)
	{
		throw new InvalidOperationException("You'll need an \"image\" property to render this :-)");
	}
}
<html>
	<body>
		<h1>@Model.Name</h1>
		<em>Text page</em>
		<br/>
		<img src="@cropper.GetCropUrl("small")" />
	</body>
</html>

AndyButland

Looks good. I've followed the test steps and can confirm this works as described.

Make it possible to reset media picker crops

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.

GPG key ID: 4AEE18F83AFDEB23
Expired

Verified
Learn about vigilant mode

Loading
Loading status checks…

f45c303

kjac mentioned this pull request Jan 24, 2025

Media Picker 3 local crops can't be reset #12135

Closed

kjac added the release/13.7.0 label Jan 24, 2025

AndyButland self-assigned this Jan 24, 2025

AndyButland approved these changes Jan 24, 2025

View reviewed changes

AndyButland enabled auto-merge (squash) January 24, 2025 12:21

AndyButland merged commit 44bf3b7 into v13/dev Jan 24, 2025
19 checks passed

AndyButland deleted the v13/fix/media-picker-crops-cannot-reset branch January 24, 2025 13:41

nul800sebastiaan removed the release/13.7.0 label Jan 30, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make it possible to reset media picker crops #18110

Make it possible to reset media picker crops #18110

kjac commented Jan 24, 2025

AndyButland left a comment

Make it possible to reset media picker crops #18110

Make it possible to reset media picker crops #18110

Conversation

kjac commented Jan 24, 2025

Prerequisites

Description

Testing this PR

Test template

AndyButland left a comment

Choose a reason for hiding this comment