Debugging Image Cropper

Questions
1

Hi,

We’re currently migrating from Umbraco v8 to v15. We’ve successfully linked up our existing media (stored in azure blobs) just fine.

I have this line of code in a custom Model (ModelsMode is set to Nothing):

_content.GetCropUrl("authorImage", "blogPostImage");

_content being IPublishedContent, authorImage being a Umb.PropertyEditorUi.ImageCropper property and blogPostImage being a crop alias.

This returns a correct URL from our CDN but the crop alias is not applied. Changing the ?width and ?height query strings don’t change anything either.

Does anyone have any insight on how to debug this further?

2

If your urls are generated correctly (eg a crop alias only dictates the width/height and any focalpoint settings you won’t see rmode=“crop” either as that’s the default)
It seems more like imagesharp.web isn’t intercepting the urls and serving the cropped image. So debug wise maybe check all is well there (no image processor dlls left over from v8)

If you CDN is azure blob storage.. check you’ve added, the separate now, imageSharp package?

dotnet add package Umbraco.StorageProviders.AzureBlob
dotnet add package Umbraco.StorageProviders.AzureBlob.ImageSharp

and added into the builder

builder.CreateUmbracoBuilder()
    .AddBackOffice()
    .AddWebsite()
    .AddDeliveryApi()
    .AddComposers()
    .AddAzureBlobMediaFileSystem() // This configures the required services for Media
    .AddAzureBlobImageSharpCache() // This configures the required services for the Image Sharp cache
    .Build();
3

Thanks for the response. We started a new codebase for this project so no left over files.

We have these packages set:

.AddCdnMediaUrlProvider()
.AddAzureBlobMediaFileSystem()
.AddAzureBlobImageSharpCache()

With this in app settings:

   "Storage": {
      "Cdn": {
        "Url": "company-cdn",
        "RemoveMediaFromPath": false
      },
      "AzureBlob": {
        "Media": {
          "ContainerName": "media",
          "ContainerRootPath": "/"
        }
      }
    }

Previously we had two separate /media and /cache folders in Azure, when I attempt to use AddAzureBlobImageSharpCache(“cache”, containerRootPath: “/”) to linkup the old cache we get a “blobContainerName cannot be null” from the Azure SDK. Practically speaking /cache now being in /media/cache is OK for us and I wouldn’t expect that to be the issue as I manually re-uploaded the image I’m testing with so it must be in the new /media/cache.

The URL we get back from _content.GetCropUrl("authorImage", "blogPostImage"); is:

company-cdn.co.uk/media/idzd4kck/889f73639c51d41fdea7d2f3c31f02cee02c50eb.png?width=60&height=60&v=1dba863c53e8880

If the ImageCropper was working properly would you expect the URL to be company-cdn.co.uk/media/cache/… ? instead of being served from just /media?

4

No I’d think it would still still be media, with imagesharp using the cached images dependant on the querystring as needed.

Does image resizing work against your site url rather than the cdn?

I’ve not had to also have CDN, blob storage and cache has worked ok for us.

saw this in discord chats.. might be of use?
Azure CDN not rendering ImageSharp resizing Umbraco #help-with-umbraco

5

Yeah, removing .AddCdnMediaUrlProvider() does work. I know where to look now, cheers! :slight_smile:

1 Like