Known Problems 

Image Processing 

The focal point data is stored separately from TYPO3's image processing. When using f:image or f:uri.image ViewHelpers with cropping, the focal point is not automatically applied to the crop calculation.

Workaround: Use the focal point data with CSS object-position to position the image within its container, rather than relying on server-side cropping.

No Automatic Cropping 

The extension does not modify how TYPO3 crops images. It provides focal point data that you can use in your templates to position images correctly using CSS.

Example:

<div style="width: 300px; height: 200px; overflow: hidden;">
    <img src="{image.publicUrl}"
         style="width: 100%; height: 100%; object-fit: cover;
                object-position: {nnfocalpoint:objectPosition(fileReference: image)}" />
</div>

CSS Object-Position 

The object-position CSS property is supported in all modern browsers but may not work in older browsers (IE11 and below).

Fallback: For older browsers, consider using background images instead:

<div style="background-image: url('{image.publicUrl}');
            background-size: cover;
            background-position: {nnfocalpoint:objectPosition(fileReference: image)};">
</div>

Modal in Iframe Context 

The focal point modal opens in the main backend frame, while the form is rendered in an iframe. This is by design to ensure proper modal functionality, but it means the CSS must be loaded globally in the backend.

Crop Preview Updates 

After saving focal points, the crop preview indicators may not update immediately in all cases. Refreshing the form or saving the record will update the display.