Image resizing for Optimizely CMS 12 doesn't work

Vote:
 

Hi,

Short info: CMS 12.3, DXP is used (tested on "Integration" only for now), Azure Blob storage is configured.

I am trying to configure PictureRenderer.Optimizely in order to generate <picture> elements. The html looks good, but the image is not resized.

Example of html:

<picture>
<source srcset="/siteassets/test-folder/0101f87e7447b76181127d7a3d66ff66.jpeg?width=400&amp;quality=80 400w, /siteassets/test-folder/0101f87e7447b76181127d7a3d66ff66.jpeg?width=800&amp;quality=80 800w, /siteassets/test-folder/0101f87e7447b76181127d7a3d66ff66.jpeg?width=1040&amp;quality=80 1040w" sizes="(max-width: 640px) 400px, (max-width: 1200px) 800px, 1040px">
<img alt="AltTextImage" src="/siteassets/test-folder/0101f87e7447b76181127d7a3d66ff66.jpeg?width=1040&amp;quality=80" loading="lazy">
</picture>

As I understand the relations of the modules is the following one:

  1. PictureRenderer.Optimizely renders HTML (basing of the Picture profile) and it depends on the module (#2) below
  2. Baaijte.Optimizely.ImageSharp.Web re-uses module #3 for Optimizely. Most of the configuration in Startup.cs is related to this module.
  3. SixLabors.ImageSharp.Web - the module which allows image manipulation via URL based commands.

    My dependencies:



    Part of ConfigureServices method.

    // Azure Blob
    services.AddAzureBlobProvider(options =>
    {
    	options.ConnectionString = _configuration.GetConnectionString("EPiServerAzureBlobs");
    	options.ContainerName = BlobContainerName;
    });
    
    // Configuration of Baaijte.OptimizelyImageSharp.Web
    services.AddImageSharp()
    	.Configure<AzureBlobStorageCacheOptions>(options =>
    	{
    		options.ConnectionString = _configuration.GetConnectionString("EPiServerAzureBlobs");
    		options.ContainerName = BlobContainerName;
    	})
    	.ClearProviders()
    	.AddProvider<BlobImageProvider>()
    	.SetCache<AzureBlobStorageCache>();


    My Configure method (only the last row in the method is related to this task).

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
    	/* geta-notfoundhandler begin */
    	app.UseNotFoundHandler();
    	/* geta-notfoundhandler end */
    
    	if (env.IsDevelopment())
    	{
    		app.UseDeveloperExceptionPage();
    	}
    
    	app.UseStaticFiles();
    	app.UseRouting();
    	app.UseAuthentication();
    	app.UseAuthorization();
    
    	app.UseEndpoints(endpoints =>
    	{
    		endpoints.MapContent();
    		endpoints.MapControllers();
    		endpoints.MapRazorPages(); /* required for "geta-notfoundhandler" as well */
    	});
    
    	// Add the image processing middleware.
    	app.UseBaaijteOptimizelyImageSharp();
    }

I looked through example: https://github.com/SixLabors/ImageSharp.Web/blob/main/samples/ImageSharp.Web.Sample/Startup.cs

and tried to add ".AddProcessor<ResizeWebProcessor>()" explicitly, but it didn't help.

It is worth to mention that readme file for module Baaijte.Optimizely.ImageSharp.Web contains statement : DO NOT add other SixLabors.ImageSharp.Web settings!!
So, I haven't tried to use any other options...

Will be glad to know if somebody uses the same modules and has a working configuration. Thank you in advance.

Best regards,

Maxim

#277006
Mar 23, 2022 16:04
Vote:
 

Hi again,

It looks that I found a root cause. Decided to check the example (https://github.com/SixLabors/ImageSharp.Web/blob/main/samples/ImageSharp.Web.Sample/Startup.cs) one more time and found that I have a wrong position of image processing middleware.

So, final version of Configure method is:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
	/* geta-notfoundhandler begin */
	app.UseNotFoundHandler();
	/* geta-notfoundhandler end */

	if (env.IsDevelopment())
	{
		app.UseDeveloperExceptionPage();
	}

	// Add the image processing middleware.
	app.UseBaaijteOptimizelyImageSharp();

	app.UseStaticFiles();
	app.UseRouting();
	app.UseAuthentication();
	app.UseAuthorization();

	app.UseEndpoints(endpoints =>
	{
		endpoints.MapContent();
		endpoints.MapControllers();
		endpoints.MapRazorPages(); /* required for "geta-notfoundhandler" as well */
	});
}
#277016
Mar 23, 2022 18:32
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.