CloudflareImageUrlGenerator

This package adds a ImageUrlGenerator to Umbraco that offloads some image processing to Cloudflare Image Resizing.

Currently the approach is "hybrid" with some commands offloaded to Cloudflare and some remaining with ImageSharp.Web.

When implemented calls to GetCropUrl will generate Urls using this generator when the "format" parameter is present.

It works very well with Slimsy v4.1+ to offer avif format images as the primary source for modern browsers.

For Umbraco v14 use v3.x This Url Generator will not work with the HMACSecretKey due to the path being different so ensure that's not enabled

dotnet add package Umbraco.Community.CloudflareImageUrlGenerator --version 3.0.0

For Umbraco v12 & v13+ please use v2.x This Url Generator will not work with the HMACSecretKey due to the path being different so ensure that's not enabled

dotnet add package Umbraco.Community.CloudflareImageUrlGenerator --version 2.2.0

For Umbraco v10 & v11 please use v1.x

dotnet add package Umbraco.Community.CloudflareImageUrlGenerator --version 1.0.0

Release Downloads

NuGet Package:

Prerelease Downloads

NuGet Package:

Installation

1. Install from NuGet

2. Add to Startup.cs in the ConfigureServices method

.AddCloudflareImageUrlGenerator()

e.g.

services.AddUmbraco(_env, _config)
  .AddBackOffice()
  .AddWebsite()
	.AddComposers()
	.AddSlimsy()
	.AddAzureBlobMediaFileSystem()
	.AddCloudflareImageUrlGenerator()
	.Build();

3. Enable Image Resizing on Cloudflare

https://developers.cloudflare.com/images/image-resizing/enable-image-resizing/

4. Optionally disable the generator for local development

In appsettings.json

	"CloudflareImageUrlGenerator": {
		"Enabled": false
	}

Then in appsettings.production.json

	"CloudflareImageUrlGenerator": {
		"Enabled": true
	}

Or use the environment variable CloudflareImageUrlGenerator__Enabled : true for environments with Cloudflare

Further Options (v2.0.1+)

By default the provider offloads conversion of webp and avif file types, you can configure further types, check they are supported output types https://developers.cloudflare.com/images/image-resizing/format-limitations/

e.g.

"CloudflareImageUrlGenerator": {
	"Enabled": true,
	"CloudFlareSupportedImageFileTypes": ["webp", "avif", "jpg", "png"]
}