Image crops not working with Azure

[khraibani]

This is affecting Umbraco 13.5.1

Followed these instructions to configure - https://our.umbraco.com/documentation/Extending/FileSystemProviders/Azure-Blob-Storage/

Media is uploaded correctly but when rendered the original image is always returned regardless of the crop/quality/format parameters we use.

What we expect is an image returned matching the parameters requested.

For example: https://xxxx.azureedge.net/media/bdxppozj/steve-halama-grw8xnnx4qm.jpg?rxy=0.7722735494210942,0.6297253454943595&width=30&height=20&quality=40&v=1db294eca131e00 Should return a 30x20 jpeg with quality 40.

What actually gets returned is the original image.

CDN settings in Azure: 'Query string caching behavior' option has been set to "Cache every unique URL'"

appsettings.json

"Umbraco": {
  "Storage": {
    "AzureBlob": {
      "Media": {
        "ConnectionString": "DefaultEndpointsProtocol=https;AccountName=;AccountKey=;EndpointSuffix=core.windows.net;",
        "ContainerName": "media-prod",
        "MediaPath": "",
        "UsePrivateContainer": false,
        "AutoCreateContainer": false
      }
    },
    "Cdn": {
      "Url": "https://cdn.azureedge.net/",
      "RemoveMediaFromPath": false
    }
  },
  "CMS": {
    "Global": {
      "Id": "8eb1f6ce-0ec6-4628-879f-7f644016da76",
      "SanitizeTinyMce": true
    },
    "Content": {
      "AllowEditInvariantFromNonDefault": true,
      "ContentVersionCleanupPolicy": {
        "EnableCleanup": true
      }
    }
  }
},
"Slimsy": {
  "WidthStep": 180,
  "UseCropAsSrc": true,
  "DefaultQuality": 70,
  "Format": "",
  "BackgroundColor": "white",
  "AppendSourceDimensions": true,
  "EncodeCommas": true,
  "AutoOrient": true
},

Startup.cs

public void ConfigureServices(IServiceCollection services)
{
    services.AddUmbraco(_env, _config)
        .AddBackOffice()
        .AddWebsite()
        .AddComposers()
        .AddAzureBlobMediaFileSystem()
        .AddAzureBlobImageSharpCache("cache")
        .AddCdnMediaUrlProvider()
        .AddSlimsy()
        .Build();
}

/// <summary>
/// Configures the application.
/// </summary>
/// <param name="app">The application builder.</param>
/// <param name="env">The web hosting environment.</param>
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    app.UseImageSharp();

    app.UseUmbraco()
        .WithMiddleware(u =>
        {
            u.UseBackOffice();
            u.UseWebsite();
        })
        .WithEndpoints(u =>
        {
            u.UseInstallerEndpoints();
            u.UseBackOfficeEndpoints();
            u.UseWebsiteEndpoints();
        });
}

_ViewImports.cshtml

@using Umbraco.Extensions
@using Umbraco.Cms.Web.Common.PublishedModels
@using Umbraco.Cms.Web.Common.Views
@using Umbraco.Cms.Core.Models.PublishedContent
@using Microsoft.AspNetCore.Html
@using Slimsy.Enums
@using Our.Umbraco.GMaps
@addTagHelper *, Slimsy
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Smidge
@addTagHelper *, OurHtagEditor
@inject Smidge.SmidgeHelper SmidgeHelper
@inject Slimsy.Services.SlimsyService SlimsyService
@using Slimsy.Extensions

Packages installed: Umbraco 13.5.1 Slimsy version 5.1.2 Umbraco.StorageProviders 13.1.0 Umbraco.StorageProviders.AzureBlob 13.1.0 Umbraco.StorageProviders.ImageSharp 13.1.0

Thanks!

[ronaldbarendse]

Hi @khraibani! If the original image gets returned when using a CDN, most of the times it is indeed the 'Cache every unique URL' that's not enabled... If this is already correctly configured (and you've purged the cache after enabling it), I'd first start by checking whether the origin server actually returns the resized images.

Also note that the correct v13 documentation is on https://docs.umbraco.com/umbraco-cms/13.latest-lts/extending/filesystemproviders/azure-blob-storage. I'd also recommend using Minimal Hosting Model (see note in our upgrade documentation) and remove the UseImageSharp() call from your own code (as that's already done by Umbraco).

Overall this really looks like a configuration issue, so I'd recommend carefully reading the documentation again and starting with the most basic setup before customizing it to your needs. I'll close the issue, as this doesn't seem like a bug that needs fixing...