Implementing Image Focal Points in Sitecore XM Cloud: A Practical Solution Part 2

Welcome back to part 2 of implementing image focal points in Sitecore XM Cloud! In this final installment, we'll explore how to integrate the focal point coordinates with your Next.js components to achieve perfect image rendering across all devices.

Quick Recap: What We've Built So Far

In Part 1 of this series, we established the foundation for our focal point solution by creating a custom field structure in Sitecore XM Cloud. Since XM Cloud's architecture doesn't support the same backend customization as Sitecore XP, we developed a practical workaround.

The Custom Field Approach

For each image field requiring focal point functionality, we created two companion fields to store the focal point coordinates:

{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) that represent where the focal point sits on the image. For example, if your image field is called "Hero Image", you would create:

Hero Image CX

Hero Image CY

We also built a standalone focal point picker tool—a Next.js page that allows content editors to visually select focal points and get the exact CX and CY percentage values to enter into Sitecore. This tool provides visual selection, precise input fields, live previews at different sizes, and CSS output showing the exact object-position values.

Now that content editors can set their focal point coordinates in Sitecore, let's dive into how to implement these values in your Next.js components.

Part 3: Implementing Focal Points in Your Next.js Components

Once content editors have set their focal point coordinates in Sitecore, implementing them in your components is straightforward. The magic happens in how we use the CX and CY values with the JssImage component.

Basic Implementation

You will need to tweak your GraphQL queries to fetch the image companion fields we created in Sitecore for a given component. Then onwards, here's how you use the focal point coordinates with the JssImage component:

Image I of Implementing Image focal Points in Sitecore XM Cloud A Practical Solution Part 2

For Background Image:

Image 2 of Implementing Image focal Points in Sitecore XM Cloud A Practical Solution Part 2

Key Implementation Points

Let's break down the critical elements that make this work:

1. Object-Position Style: The ‘objectPosition’ or ‘backgroundPosition’ style property tells the browser where to anchor the image within its container. By using our CX and CY percentage values, we ensure the focal point remains visible regardless of how the image is cropped.

2. Browser-Native Rendering All the cropping and positioning is handled automatically by the browser. There's no JavaScript calculation, no performance overhead—just clean, efficient CSS.

Handling Multiple Images

When working with components that have multiple images (like a banner with different images for mobile and desktop), each image can have its own focal point:

Image 3 of Implementing Image focal Points in Sitecore XM Cloud A Practical Solution Part 2

Image 4 of Implementing Image focal Points in Sitecore XM Cloud A Practical Solution Part 2

The Complete Workflow in Practice

Let's walk through how content editors use this system from start to finish:

Upload Image: Editor adds an image to the standard Sitecore image field
Access Picker Tool: Editor clicks the help link on the CX/CY fields or navigates to the focal point picker URL
Upload to Picker: Editor uploads the same image to the picker tool
Set Focal Point: Editor clicks on the most important part of the image (face, product, logo, etc.)
Preview Different Sizes: Editor reviews the live previews to ensure the focal point works across different layouts
Copy Values: Editor copies the CX and CY percentage values displayed by the tool
Enter in Sitecore: Editor pastes these values into the corresponding CX and CY fields in Sitecore
Publish: The image now renders with the correct focal point on the live site

Default Values

Always provide fallback values for when editors haven't set focal points:

const heroImageCX = fields?.heroImageCX?.value || 50;

const heroImageCY = fields?.heroImageCY?.value || 50;

Setting defaults to 50, 50 provides center positioning, ensuring images display reasonably even without explicit focal point selection.

Performance Considerations

Since we're using native CSS for positioning, there's no performance impact. However, consider:

Using appropriate image sizes through the width and height props
Implementing lazy loading for images below the fold
Leveraging Next.js Image Optimization where applicable

Responsive Design

For components with dramatically different aspect ratios across breakpoints, consider whether you need:

Different focal points for different viewport sizes
Different images entirely (separate fields)
A single focal point that works well across all sizes

Benefits of This Implementation

No Backend Customization Required: Works entirely within XM Cloud's constraints and Next.js capabilities
Visual and Intuitive: Content editors get the same visual experience they had with the Advanced Image module in Sitecore XP
Framework Agnostic: While we're using Next.js with JSS, the same CX/CY values and CSS approach could be used with any frontend framework
Maintainable: The implementation is straightforward CSS—no complex JavaScript libraries or custom rendering logic
Performant: Browser-native image positioning with zero JavaScript overhead
Flexible: Can be applied to any image field by adding the companion CX/CY fields and related codebase.

Alternative Approaches Considered

Before settling on this implementation, we evaluated several alternatives:

1. Art Direction with Picture Element: Using multiple image sources for different viewports. While powerful, this requires editors to crop images manually and upload multiple versions—significantly more work than setting a focal point.

2. Automated Focal Point Detection: AI-based solutions that automatically detect focal points. While interesting, they lack the precision editors need for brand-critical images and add unnecessary complexity.

3. Client-Side JavaScript: Calculating focal points dynamically with JavaScript. This would impact performance and add unnecessary client-side processing when CSS handles it natively.

Our solution strikes the right balance between functionality, ease of use, and maintainability.

Training Your Content Editors

While the tool is intuitive, brief training can ensure proper adoption:

Show the Workflow: Walk through the complete process once
Demonstrate Previews: Show how the preview feature helps validate focal points
Explain Use Cases: Help editors understand when focal points are critical (faces, products) vs. nice-to-have (abstract backgrounds)
Provide Documentation: Link to the focal point picker from the help text on CX/CY fields

Conclusion

By combining custom Sitecore fields, a purpose-built focal point picker tool, and straightforward Next.js implementation, we've successfully replicated the Advanced Image functionality that content editors relied on in Sitecore XP—all while working within XM Cloud's headless architecture.

This approach demonstrates that limitations in one area (backend customization) can be offset by leveraging strengths in another (modern frontend tooling and CSS capabilities). The result is a solution that's actually easier to maintain and extend than the traditional XP approach, while providing an equally intuitive experience for content editors.

The beauty of this solution lies in its simplicity: content editors get a visual tool for setting focal points, and developers implement those focal points with just a few lines of CSS. No complex calculations, no performance overhead, no maintenance burden.