November Happy Hour will be moved to Thursday December 5th.

ImageSharp alternative for CMS 12

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
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 :)
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.
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* 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.