Skip to content

Make it possible to reset media picker crops#18110

Merged
AndyButland merged 2 commits intov13/devfrom
v13/fix/media-picker-crops-cannot-reset
Jan 24, 2025
Merged

Make it possible to reset media picker crops#18110
AndyButland merged 2 commits intov13/devfrom
v13/fix/media-picker-crops-cannot-reset

Conversation

@kjac
Copy link
Contributor

@kjac kjac commented Jan 24, 2025

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

  1. Setup a crop on the default image cropper.
  2. Setup a corresponding crop on the default image media picker.
  3. Upload an image to the media library and define the crop.
  4. Create a document based on a doctype that contains the default image picker.
    • The document must have a template for rendering.
  5. Pick the uploaded image (do not define local a crop yet) and publish the page.
  6. Render the cropped image in frontend (see test template below).
  7. Define a local crop that overrides the media crop and republish the page.
  8. Render the cropped image again - the local crop should take precedence over the media crop.
  9. Reset the local crop and republish the page.
  10. 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>

Copy link
Contributor

@AndyButland AndyButland left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants