TL;DR
Cloudflare image rendering can be enabled through Adaptive Images in DXP by installing the AdaptiveImages.Cloudflare NuGet package and adding the following to your Startup class:
services.AddCloudflare();
Prerequisites
- "Image resizing at the edge" feature enabled for DXP, apply here for beta access
- Adaptive Images including the AdaptiveImages.Cloudflare NuGet package
How to enable Cloudflare for image rendering
To enable Cloudflare, simply invoke AddCloudflare() to render images using the image resizing URL format:
public void ConfigureServices(IServiceCollection services)
{
services.AddAdaptiveImages()
.AddCloudflare();
}
What happens when Cloudflare rendering is enabled?
Enabling Cloudflare only affects public-facing image URL:s. Nothing changes in the CMS, so it's safe to enable/disable Cloudflare as required in different environments.
By default, an image is rendered with a URL like:
http://yoursite.url/adaptiveimages/provider/id/image-name.jpg?[parameters]
When Cloudflare is enabled, the image URL will instead look something like:
https://yoursite.url/cdn-cgi/[parameters]/image/adaptiveimages/provider/id/image-name.jpg
Benefits of Cloudflare rendering
The main benefits of enabling Cloudflare are:
- Improved auto-cropping
- Device-specific image formats
- Off-loading the web app, as the CDN takes care of cropping, resizing, optimizing, and serving images
Q&A
Can Cloudflare be used to render images locally?
Outside of DXP environments, for example during local development, you have two options:
- Skip services.AddCloudflare() to instead use locally rendered images
- Have images render through the DXP environment
The second option requires a public hostname for your environment so Cloudflare can access the original images to transform. This can be achieved for local development using a proxy tunnel service such as ngrok.
You then add something like the following to Startup:
services.AddCloudflare(new CloudflareSettings
{
SiteHostname = "integration.dxp.uri", // DXP environment where Cloudflare is enabled
ImagesHostname = "my-localhost.ngrok.io" // Hostname where your local environment is accessible over the internet
});
Should we still have the Adaptive Images cache enabled?
Yes, especially if you use image providers for external images, such as from a DAM. This is because images may be loaded locally in some scenarios in the CMS UI, for example in the crop dialog.
For DXP, or other Azure environments, you should use the AdaptiveImages.Azure package for blob storage caching. More details can be found in the SDK documentation.
Do we need to make any additional changes to image properties, crop settings, etc?
No. Cloudflare can be enabled/disabled without affecting any existing images.
Can we revert to locally rendered images?
Yes, simply omit AddCloudflare() to have images rendered by the web app instead.
We are currently using Cloudinary, can we switch to Cloudflare instead?
Yes. Replace AddCloudinary() with AddCloudflare() to render images using Cloudflare instead of Cloudinary.
We are interested, where can we get assistance?
Refer to the Adaptive Images website.