CDN images not resizing

[rickyzu]

Hi,

I'm having a few issues resizing images from the CDN within Umbraco v9.3.1. I have followed the steps to upload and manage my site media in Azure Blob storage. The middleware calls have been registered as outlined.

services.AddImageSharp(options =>
                            {
                                options.MemoryStreamManager = new RecyclableMemoryStreamManager();
                                options.BrowserMaxAge = TimeSpan.FromDays(7);
                                options.CacheMaxAge = TimeSpan.FromDays(365);
                                options.OnParseCommandsAsync = _ => Task.CompletedTask;
                                options.OnBeforeSaveAsync = _ => Task.CompletedTask;
                                options.OnProcessedAsync = _ => Task.CompletedTask;
                                options.OnPrepareResponseAsync = _ => Task.CompletedTask;
                            })
            .ClearProviders()
            .AddProvider<AzureBlobStorageImageProvider>()
            .AddProvider<PhysicalFileSystemProvider>()
            .SetRequestParser<QueryCollectionRequestParser>()
            .Configure<AzureBlobStorageCacheOptions>(options =>
            {
                options.ConnectionString = "Blah";
                options.ContainerName = "Cache-Dev";
                            // Optionally create the cache container on startup if not already created.
                            AzureBlobStorageCache.CreateIfNotExists(options, PublicAccessType.Blob);
            })
            .SetCache<AzureBlobStorageCache>()
            .ClearProcessors()
            .AddProcessor<ResizeWebProcessor>()
            .AddProcessor<FormatWebProcessor>()
            .AddProcessor<BackgroundColorWebProcessor>();

  services.AddUmbraco(_env, Configuration)
              .AddBackOffice()
              .AddWebsite()
              .AddComposers()
               // Add the Azure Blob Storage file system, ImageSharp image provider/cache and middleware for Media:
               .AddAzureBlobMediaFileSystem()
              // Optionally add the CDN media URL provider:
              .AddCdnMediaUrlProvider()
              .Build();

            app.UseDefaultFiles();
            app.UseImageSharp();
            app.UseStaticFiles();
            app.UseUmbraco()
               .WithMiddleware(u =>
               {
                   u.UseBackOffice();
                   u.UseWebsite();
                   //// Enables the Azure Blob Storage middleware for Media:
                   u.UseAzureBlobMediaFileSystem();
               })
               .WithEndpoints(u =>
               {
                   u.UseInstallerEndpoints();
                   u.UseBackOfficeEndpoints();
                   u.UseWebsiteEndpoints();
               });

The media is uploaded and available in Azure. The CDN is also storing and fetching the images.

Static images such as logos etc that are stored in wwwroot resize fine when called in the UI. Images being requested from the CDN are being return as the originally uploaded size with the data in the query parameters not being applied.

The CDN has 'Cache every unique url' set.

if anyone can provide any guidance that would be great.

[ronaldbarendse]

@rickyzu Looks like you're configuring the wrong options: AzureBlobStorageCacheOptions is the one from ImageSharp itself, not the options from this package. You're also clearing all ImageSharp processors, which would remove the CropWebProcessor from Umbraco (depending on whether you're calling AddImageSharp() before or after AddUmbraco()).

To fix this, remove the call to AddImageSharp() and configure the options as follows (although it seems like you've configured the options correctly in your appsettings.json or using environment variables, as you'd otherwise not get the original image back at all):

.AddAzureBlobMediaFileSystem(options => {
    options.ConnectionString = "Blah";
    options.ContainerName = "Cache-Dev";

    // Optionally create the cache container on startup if not already created
    AzureBlobFileSystem.CreateIfNotExists(options, PublicAccessType.Blob);
})

[rickyzu]

Hi @ronaldbarendse - apologies about the delayed response. Thanks for the comments above. I removed the use of AddImageSharp() and brought the implementation back to the recommended Umbraco.StorageProviders implementation.

Unfortunately the issue still persists whereby the CDN images are still not being resized. The image appears on the page so the CDN is returning the image but the processor is not resizing the image. Local images located in wwwroot resize absolutely fine.

Its seems it a similar issue to a couple of people describing it on the Umbraco forums

I will go though the configuration steps again in case i have missed something fundamental - which is probably the case.

Although interestingly enough removing the below CDN provider serves the images from the blob container and they resize perfectly fine.

  // Optionally add the CDN media URL provider:
  .AddCdnMediaUrlProvider()

[ronaldbarendse]

I will go though the configuration steps again in case i have missed something fundamental - which is probably the case.

Although interestingly enough removing the below CDN provider serves the images from the blob container and they resize perfectly fine.

You're probably missing something fundamental indeed 😉 What CDN provider are you using and have you configured it to cache every unique URL (see docs for Azure CDN)? If your CDN is removing the query strings, it obviously won't resize the image 😅

[jonwid]

Hi! I'm also having the same issue. Well I have two issues but I'm not sure they're related.

1. As it seems, I'm having the same issue as @rickyzu. I'm using Azure CDN and have configured it to cache every unique url

This is how my origin is configured:

And this is my storage setup, that I think works fine (it works fine not using CDN). Even though I'm not sure about the contents of the cache folder?

-- Everything works fine when I'm not using CDN and just the Azure storage. The media gets uploaded and cropped accordingly: <img src="@Url.GetCropUrl(contentPage.TestImage, height: 30, width: 40)" />

But when I use the CDN the images doesn't get cropped! An example: https://tress-test.azureedge.net/media/hgocy0e4/25364075.jpg?width=40&height=30&rnd=132991598585900000

2. My second issue is that a second slash is added after the CDN url when using GetCropUrl(). I tried configuring the CdnUrl without the trailing slash but it doesn't matter, it gets rendered like this: https://tress-test.azureedge.net//media/hgocy0e4/25364075.jpg?width=40&height=30&rnd=132991598585900000

Not sure if the issues are related, I suppose not. Do I need to do something else that is not in the Readme? Thanks!

[ronaldbarendse]

@jonwid The images aren't resizing because your CDN is pointing directly to Azure Blob Storage, which doesn't do anything with the query string and therefore returns the original file.

You need to point the CDN to your site, so ImageSharp can process images using the query string and cache the processed image in Azure Blob Storage (although you can opt-out of this, as your CDN will already cache all responses, see PR https://github.com/umbraco/Umbraco.StorageProviders/pull/25). Depending on the Umbraco:Storage:Cdn:RemoveMediaFromPath setting (defaults to true), you need to include the media path in the origin URL.

[jonwid]

@ronaldbarendse Ah, that figures! I was used to configure the old Azure toolkit that way. Thanks. The double trailing slashes after Cdn.Url remains though. (https://tress-test.azureedge.net//fprjkdid/25364070.jpg?width=40&height=30&rnd=132991862229100000)

Is it something around this? I'm not too familiar with that substring syntax. https://github.com/umbraco/Umbraco.StorageProviders/blob/a33c198ef3416cf5814029abec13cb5e58dec862/src/Umbraco.StorageProviders.AzureBlob/CdnMediaUrlProvider.cs#L46

[ronaldbarendse]

The double trailing slashes after Cdn.Url remains though.

Although this won't make the URL invalid, it would make it a lot prettier 😄 I've created a PR to fix this for v1: https://github.com/umbraco/Umbraco.StorageProviders/pull/41 and will also ensure it's included in the next version (supporting Umbraco 10). Thanks for reporting!