Image resizing for Optimizely CMS 12 doesn't work

Maxim Shishov

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:

PictureRenderer.Optimizely renders HTML (basing of the Picture profile) and it depends on the module (#2) below
Baaijte.Optimizely.ImageSharp.Web re-uses module #3 for Optimizely. Most of the configuration in Startup.cs is related to this module.

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

Maxim Shishov

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