November Happy Hour will be moved to Thursday December 5th.
AI OnAI Off
November Happy Hour will be moved to Thursday December 5th.
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;
}
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.
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.