ImageSharp alternative for CMS 12

Dileep D

Vote:

I am working on an upgrade to CMS 12 project. In CMS 11 the Image sharp was being used to resize images in browser with querystring parameters for height and width. It doesn't seem to work in CMS 12. Looking for alternatives to achieve this functionality.

#310293

Oct 09, 2023 12:45

Mark Stott

Vote:

Hello DD,

I'm using ImageSharp for a number of CMS 12 builds. Specifically I'm using Baaijte.Optimizely.ImageSharp.Web which adds the same kinds of query string filtering that you'll be used to. You'll want SixLabors.ImageSharp.Web.Providers.Azure for handling caching of resized images within Azure. I'm also using this in conjunction with the ImagePointEditor package to manage focal points for when you resize images with cropping.

Here is an extract from the main csproj

  <ItemGroup>
    <PackageReference Include="Baaijte.Optimizely.ImageSharp.Web" Version="2.2.0" />
    <PackageReference Include="EPiServer.CloudPlatform.Cms" Version="1.3.2" />
    <PackageReference Include="EPiServer.CMS" Version="12.22.5" />
    <PackageReference Include="EPiServer.CMS.AspNetCore.HtmlHelpers" Version="12.17.1" />
    <PackageReference Include="EPiServer.CMS.AspNetCore.TagHelpers" Version="12.17.1" />
    <PackageReference Include="EPiServer.CMS.AspNetCore.Templating" Version="12.17.1" />
    <PackageReference Include="EPiServer.CMS.Core" Version="12.17.1" />
    <PackageReference Include="EPiServer.Find.Cms" Version="15.2.0" />
    <PackageReference Include="EPiServer.Hosting" Version="12.17.1" />
    <PackageReference Include="EPiServer.ImageLibrary.ImageSharp" Version="2.0.1" />
    <PackageReference Include="EPiServer.Labs.LanguageManager" Version="5.1.3" />
    <PackageReference Include="Geta.NotFoundHandler.Optimizely" Version="5.0.7" />
    <PackageReference Include="Geta.Optimizely.Categories" Version="1.0.0" />
    <PackageReference Include="Geta.Optimizely.Categories.Find" Version="1.0.0" />
    <PackageReference Include="Geta.Optimizely.ContentTypeIcons" Version="2.1.0" />
    <PackageReference Include="Geta.Optimizely.GenericLinks" Version="1.8.0" />
    <PackageReference Include="Geta.Optimizely.Sitemaps" Version="3.1.1" />
    <PackageReference Include="ImagePointEditor" Version="2.2.0" />
    <PackageReference Include="MediatR" Version="12.1.1" />
    <PackageReference Include="RestSharp" Version="110.2.0" />
    <PackageReference Include="SixLabors.ImageSharp.Web.Providers.Azure" Version="2.0.2" />
    <PackageReference Include="Stott.Optimizely.RobotsHandler" Version="2.6.1" />
    <PackageReference Include="Stott.Security.Optimizely" Version="1.2.2" />
  </ItemGroup>

The service extensions then look like this:

    public static IServiceCollection AddOptimizelyImageSharp(
        this IServiceCollection serviceCollection,
        IConfiguration configuration)
    {
        var connectionString = configuration.GetConnectionString("EPiServerAzureBlobs");
        var containerName = "mysitemedia";

        serviceCollection.AddImageSharp(options =>
                         {
                             options.OnPrepareResponseAsync = context =>
                             {
                                 context.Response.Headers.CacheControl = new CacheControlHeaderValue
                                 {
                                     Public = true,
                                     MaxAge = TimeSpan.FromDays(365)
                                 }.ToString();
                                 return Task.CompletedTask;
                             };
                         })
                         .Configure<AzureBlobStorageCacheOptions>(options =>
                         {
                             options.ConnectionString = connectionString;
                             options.ContainerName = containerName;
                         })
                         .ClearProviders()
                         .AddProvider<BlobImageProvider>()
                         .SetCache<AzureBlobStorageCache>();

        return serviceCollection;
    }

    public static IApplicationBuilder UseOptimizelyImageSharp(this IApplicationBuilder app)
    {
        app.UseBaaijteOptimizelyImageSharp();

        return app;
    }

#310295

Edited, Oct 09, 2023 13:03

Dileep D - Oct 10, 2023 18:57

Thanks Mark. This was of great help. +1 for code

Mark Stott - Oct 11, 2023 11:02

You're welcome :)

Sid - Nov 15, 2023 15:19

Many thanks, Mark!

I've scoured google to find any documentation how to implement these packages into CMS 12 .NET 7 and you're example made it possible in the end!

Mark Stott - Nov 15, 2023 15:21

You're welcome Sid :)

Stefan Holm Olsen

Vote:

If you use Optimizely DXP, and you are interested in a new approach, you can also sign up for beta testing image resizing at the edge. So resizing will happen on the CDN servers, not the application servers.

#310674

Oct 12, 2023 4:52

Dileep D - Oct 12, 2023 13:22

Thanks Stefan. We have CDN resizing for one of our applications. Since this was an upgrade project I needed something as part of lift and shift and plan on updates later.