Adding SourceWidth and SourceHeight to ImageUrlGenerationOptions

.github/README.md

@@ -40,7 +40,7 @@ Some important documentation links to get you started:
 
 ## Get help
 
-If you need a bit of feedback while building your Umbraco projects, we are [chatty on Discord](https://discord.umbraco.com). Our Discord server serves both a social space but also has channels for questions and answers. Feel free to lurk or join in with your own questions. Or just post your daily Wordle score, up to you!
+If you need a bit of feedback while building your Umbraco projects, we are [chatty on Discord](https://discord.umbraco.com). Our Discord server serves as a social space for all Umbracians. If you have any questions or need some help with a problem, head over to our [dedicated forum](https://forum.umbraco.com/) where the Umbraco Community will be happy to help. 
 
 ## Looking to contribute back to Umbraco?
 
@@ -52,3 +52,4 @@ You came to the right place! Our GitHub repository is available for all kinds of
 Umbraco is contribution-focused and community-driven. If you want to contribute back to the Umbraco source code, please check out our [guide to contributing](CONTRIBUTING.md).
 
 ### Tip: You should not run Umbraco from source code found here. Umbraco is extremely extensible and can do whatever you need. Instead, [install Umbraco as noted above](#looking-to-install-umbraco) and then [extend it any way you want to](https://docs.umbraco.com/umbraco-cms/extending/).
+

src/Umbraco.Core/Models/ImageUrlGenerationOptions.cs

@@ -9,6 +9,8 @@ public class ImageUrlGenerationOptions : IEquatable<ImageUrlGenerationOptions>
 
     public string? ImageUrl { get; }
 
+    public int? SourceWidth { get; set; }
+    public int? SourceHeight { get; set; }
     public int? Width { get; set; }
 
     public int? Height { get; set; }

src/Umbraco.Web.Common/Extensions/FriendlyImageCropperTemplateExtensions.cs

@@ -258,6 +258,8 @@ public static class FriendlyImageCropperTemplateExtensions
     /// furtherOptions: "bgcolor=fff"
     /// ]]></example>
     /// </param>
+    /// <param name="sourceWidth">The width of the source image.</param>
+    /// <param name="sourceHeight">The height of the source image.</param>
     /// <returns>
     ///     The URL of the cropped image.
     /// </returns>
@@ -273,7 +275,9 @@ public static class FriendlyImageCropperTemplateExtensions
         bool preferFocalPoint = false,
         bool useCropDimensions = false,
         string? cacheBusterValue = null,
-        string? furtherOptions = null)
+        string? furtherOptions = null,
+        int? sourceWidth = null,
+        int? sourceHeight = null)
         => imageUrl.GetCropUrl(
             ImageUrlGenerator,
             width,
@@ -286,7 +290,9 @@ public static class FriendlyImageCropperTemplateExtensions
             preferFocalPoint,
             useCropDimensions,
             cacheBusterValue,
-            furtherOptions);
+            furtherOptions,
+            sourceWidth,
+            sourceHeight);
 
     /// <summary>
     ///     Gets the underlying image processing service URL from the image path.
@@ -318,6 +324,8 @@ public static class FriendlyImageCropperTemplateExtensions
     /// furtherOptions: "bgcolor=fff"
     /// ]]></example>
     /// </param>
+    /// <param name="sourceWidth">The width of the source image.</param>
+    /// <param name="sourceHeight">The height of the source image.</param>
     /// <returns>
     ///     The URL of the cropped image.
     /// </returns>
@@ -333,7 +341,9 @@ public static class FriendlyImageCropperTemplateExtensions
         bool preferFocalPoint = false,
         bool useCropDimensions = false,
         string? cacheBusterValue = null,
-        string? furtherOptions = null)
+        string? furtherOptions = null,
+        int? sourceWidth = null,
+        int? sourceHeight = null)
         => imageUrl.GetCropUrl(
             ImageUrlGenerator,
             cropDataSet,
@@ -346,5 +356,7 @@ public static class FriendlyImageCropperTemplateExtensions
             preferFocalPoint,
             useCropDimensions,
             cacheBusterValue,
-            furtherOptions);
+            furtherOptions,
+            sourceWidth,
+            sourceHeight);
 }

src/Umbraco.Web.Common/Extensions/ImageCropperTemplateCoreExtensions.cs

@@ -341,6 +341,8 @@ public static class ImageCropperTemplateCoreExtensions
     /// furtherOptions: "bgcolor=fff"
     /// ]]></example>
     /// </param>
+    /// <param name="sourceWidth">The width of the source image.</param>
+    /// <param name="sourceHeight">The height of the source image.</param>
     /// <returns>
     ///     The URL of the cropped image.
     /// </returns>
@@ -357,7 +359,9 @@ public static class ImageCropperTemplateCoreExtensions
         bool preferFocalPoint = false,
         bool useCropDimensions = false,
         string? cacheBusterValue = null,
-        string? furtherOptions = null)
+        string? furtherOptions = null,
+        int? sourceWidth = null,
+        int? sourceHeight = null)
     {
         if (string.IsNullOrWhiteSpace(imageUrl))
         {
@@ -384,7 +388,9 @@ public static class ImageCropperTemplateCoreExtensions
             preferFocalPoint,
             useCropDimensions,
             cacheBusterValue,
-            furtherOptions);
+            furtherOptions,
+            sourceWidth,
+            sourceHeight);
     }
 
     /// <summary>
@@ -421,6 +427,8 @@ public static class ImageCropperTemplateCoreExtensions
     /// furtherOptions: "bgcolor=fff"
     /// ]]></example>
     /// </param>
+    /// <param name="sourceWidth">The width of the source image.</param>
+    /// <param name="sourceHeight">The height of the source image.</param>
     /// <returns>
     ///     The URL of the cropped image.
     /// </returns>
@@ -437,7 +445,9 @@ public static class ImageCropperTemplateCoreExtensions
         bool preferFocalPoint = false,
         bool useCropDimensions = false,
         string? cacheBusterValue = null,
-        string? furtherOptions = null)
+        string? furtherOptions = null,
+        int? sourceWidth = null,
+        int? sourceHeight = null)
     {
         if (string.IsNullOrWhiteSpace(imageUrl))
         {
@@ -490,6 +500,8 @@ public static class ImageCropperTemplateCoreExtensions
         options.Height = height;
         options.FurtherOptions = furtherOptions;
         options.CacheBusterValue = cacheBusterValue;
+        options.SourceWidth = sourceWidth;
+        options.SourceHeight = sourceHeight;
 
         return imageUrlGenerator.GetImageUrl(options);
     }
@@ -554,6 +566,9 @@ public static class ImageCropperTemplateCoreExtensions
         var cacheBusterValue =
             cacheBuster ? mediaItem.UpdateDate.ToFileTimeUtc().ToString("x", CultureInfo.InvariantCulture) : null;
 
+        var sourceWidth = mediaItem.Value<int?>(Constants.Conventions.Media.Width);
+        var sourceHeight = mediaItem.Value<int?>(Constants.Conventions.Media.Height);
+
         return GetCropUrl(
             mediaItemUrl,
             imageUrlGenerator,
@@ -567,6 +582,8 @@ public static class ImageCropperTemplateCoreExtensions
             preferFocalPoint,
             useCropDimensions,
             cacheBusterValue,
-            furtherOptions);
+            furtherOptions,
+            sourceWidth,
+            sourceHeight);
     }
 }

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/Block/BlockGridBlockAdvanced.spec.ts

@@ -240,7 +240,9 @@ test('can remove a icon color from a block', async ({umbracoApi, umbracoUi}) =>
   expect(await umbracoApi.dataType.doesBlockEditorBlockContainIconColor(blockGridEditorName, contentElementTypeId, '')).toBeTruthy();
 });
 
-test('can add a thumbnail to a block', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
+// Remove skip when the front-end is ready. Currently it is not possible to add a thumbnail to a block
+// Issue link: https://github.com/umbraco/Umbraco-CMS/issues/20264
+test.skip('can add a thumbnail to a block', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
   // Arrange
   const mediaName = 'TestMedia';
   await umbracoApi.media.ensureNameNotExists(mediaName);