London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!
AI OnAI Off
Image focal point
Hi,
As far as I'm aware, the focal point isn't automatically applied to the resized images so you'll need to include the focal point in the image URL. For ImageSharp, the querystring parameter is rxy and it expects two values between 0 and 1 separated by commas representing the x and y positions of the focal point as a proportion of the original image.
Taking your example, to crop the image around its centre, your url should be:
https://localhost:5001/globalassets/media_slider_item1.jpg?width=502&height=501&quality=80&rxy=0.5,0.5
whereas, to crop the image around the top left, it should be:
https://localhost:5001/globalassets/media_slider_item1.jpg?width=502&height=501&quality=80&rxy=0,0
As I recall, the focal point editor stores the co-ordinates in almost the right format but separated by a | so replace the | with a , to get a usable value for the rxy parameter.
One final thing to mention. Assuming you're hosting the CMS in the Optimizely DXP service, you can resize the images as they pass through CloudFlare rather than using ImageSharp on the server. The URL format is a bit different though.
Apr 14, 2025 11:21
Hi,
We have a headless setup with CMS 12.
I have installed Baaijte.Optimizely.ImageSharp.Web in order to render and crop images. This all works fine. Now I want to edit a focus/focal point to the image rendering.
I have installed https://github.com/ErikHen/ImagePointEditor and I can edit the focal point in the CMS. But when I call the image url the image will still be cropped in the center and it ignores the set focal point.
I also installed https://github.com/ErikHen/PictureRenderer.Optimizely Just to be sure, but I don't think we need it as we are working headless and call the images directly.
calling the image like this will get the cropped image: https://localhost:5001/globalassets/media_slider_item1.jpg?width=502&height=501&quality=80
but no focal point is being used.
Looking at this thread: https://world.optimizely.com/forum/developer-forum/cms-12/thread-container/2023/10/imagesharp-alternative-for-cms-12/
I have a simular setup only we work headless.
I have this setup in my startup.cs
// Add the image processing services.
if (_webHostingEnvironment.IsDevelopment())
{
_webHostingEnvironment.WebRootPath = _webHostingEnvironment.ContentRootPath;
services.AddBaaijteOptimizelyImageSharp();
}
else
{
services.AddImageSharp()
.Configure<AzureBlobStorageCacheOptions>(options =>
{
options.ConnectionString = _configuration.GetConnectionString("EPiServerAzureBlobs");
options.ContainerName = "mysitemedia";
})
.ClearProviders()
.AddProvider<BlobImageProvider>()
.SetCache<AzureBlobStorageCache>();
}
services.AddImagePointEditor();
And added this in the configure
app.UseBaaijteOptimizelyImageSharp();
Does anybode have any idea how this can happen and what we could do to fix this?