When migrating from Sitecore XP to XM Cloud, one feature many developers miss is the ability to customize image rendering using focal points. In Sitecore XP, tools like Kate Orlova's Advanced Image module gave content editors an intuitive interface to set focal points, ensuring images displayed correctly across different aspect ratios and container sizes.

However, XM Cloud’s architecture does not allow the same level of backend customization. So how can we give content editors control over image focal points without compromising functionality? In this post, I’ll share the practical solution we implemented to bring focal point functionality to XM Cloud.

The Challenge

In Sitecore XP, the Advanced Image module allowed content editors to:

• Visually select a focal point on images
• Preview how images would crop at different sizes
• Ensure important elements remained visible across responsive layouts

XM Cloud’s headless architecture and limited backend customization options mean we cannot simply install a module or customize the Content Editor. We needed a solution that would:

1. Work within XM Cloud constraints
2. Provide an intuitive experience for content editors
3. Integrate seamlessly with Next.js rendering
4. Require minimal training for editors

The Solution: A Three-Part Approach

Our solution combines a standalone focal point picker tool, custom Sitecore fields, and a Next.js component implementation. In this blog, I will focus on the first two parts.

Part 1: Creating Custom Fields for Focal Point Coordinates

For each image field that requires focal point functionality, we add two companion fields:

• {field name} CX – The X-axis coordinate (horizontal position)
• {field name} CY – The Y-axis coordinate (vertical position)

These fields store percentage values (0–100) representing the focal point location on the image. For example, if the image field is called Hero Image, you would create:

• Hero Image CX
• Hero Image CY

Pro Tip: Add a help link to these fields that points to your focal point picker tool so editors can quickly access it when needed.

Part 2: Building a Focal Point Picker Tool

We created a standalone Next.js page that serves as a focal point picker. This tool allows content editors to:

• Upload an image
• Click or drag to visually set the focal point
• Preview the image at different container sizes
• Generate the CX and CY percentage values to enter into Sitecore

The tool is hosted as part of the Next.js application (or can be hosted separately) and provides a simple, intuitive interface that requires no technical knowledge.

The UI

The tool provides:

• Visual Selection: Click or drag on the image to position the focal point
• Precise Input: Manual entry for exact percentage values
• Live Previews: Preview how the image appears across mobile, tablet, desktop, and banner layouts
• CSS Output: Generated code showing the exact object-position values

Stay Tuned

In the next part, we will explore how the React component works with the companion Sitecore image fields to provide a streamlined editor experience.