Configuration

The Focal Point Editor extension works out of the box with minimal configuration. This chapter covers the technical configuration and customization options.

TCA Configuration

The extension automatically adds the focal point field to sys_file_reference through TCA overrides.

Default Configuration

The field is added to the imageoverlayPalette after the crop field:

Configuration/TCA/Overrides/sys_file_reference.php

$newSysFileReferenceColumns = [
    'tx_nnfocalpoint_points' => [
        'label' => 'Fokus-Punkte',
        'config' => [
            'type' => 'user',
            'renderType' => 'focalPointElement',
        ],
    ],
];

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTCAcolumns(
    'sys_file_reference',
    $newSysFileReferenceColumns
);

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
    'sys_file_reference',
    'imageoverlayPalette',
    '--linebreak--,tx_nnfocalpoint_points',
    'after:crop'
);

Custom Palettes

If you want to add the focal point field to a custom palette, use:

\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addFieldsToPalette(
    'sys_file_reference',
    'yourCustomPalette',
    'tx_nnfocalpoint_points',
    'after:crop'
);

Crop Variants

The focal point editor automatically reads the crop variants defined in your TCA configuration. Each crop variant gets its own focal point.

Example crop variant configuration:

Configuration/TCA/Overrides/tt_content.php

$GLOBALS['TCA']['tt_content']['columns']['image']['config']['overrideChildTca']['columns']['crop']['config'] = [
    'cropVariants' => [
        'default' => [
            'title' => 'Default',
            'allowedAspectRatios' => [
                '16:9' => ['title' => '16:9', 'value' => 16 / 9],
                '4:3' => ['title' => '4:3', 'value' => 4 / 3],
                'free' => ['title' => 'Free', 'value' => 0.0],
            ],
        ],
        'mobile' => [
            'title' => 'Mobile',
            'allowedAspectRatios' => [
                '1:1' => ['title' => 'Square', 'value' => 1.0],
                '3:4' => ['title' => 'Portrait', 'value' => 3 / 4],
            ],
        ],
    ],
];

With this configuration, the focal point editor will show two variants: "Default" and "Mobile", each with its own focal point.

JavaScript Module

The JavaScript module is registered in Configuration/JavaScriptModules.php:

Configuration/JavaScriptModules.php

return [
    'dependencies' => ['core', 'backend'],
    'imports' => [
        '@nng/nnfocalpoint/' => 'EXT:nnfocalpoint/Resources/Public/JavaScript/',
    ],
];

AJAX Routes

The extension registers two AJAX routes for the backend modal:

Configuration/Backend/AjaxRoutes.php

return [
    'nnfocalpoint_wizard' => [
        'path' => '/nnfocalpoint/wizard',
        'target' => FocalPointController::class . '::wizardAction',
    ],
    'nnfocalpoint_image' => [
        'path' => '/nnfocalpoint/image',
        'target' => FocalPointController::class . '::imageAction',
    ],
];

Styling

The extension includes CSS for the backend editor. The stylesheet is loaded globally in the backend via ext_localconf.php:

ext_localconf.php

$GLOBALS['TYPO3_CONF_VARS']['BE']['stylesheets']['nnfocalpoint'] =
    'EXT:nnfocalpoint/Resources/Public/Css/FocalPointEditor.css';

Custom Styling

To customize the appearance of the focal point editor, you can override the CSS classes in your own backend stylesheet:

.nnfocalpoint-container - Main container
.nnfocalpoint-trigger - The button to open the editor
.nnfocalpoint-modal - Modal container
.nnfocalpoint-thumbnails - Thumbnail row
.nnfocalpoint-thumbnail - Individual thumbnail
.nnfocalpoint-editor - Editor area
.nnfocalpoint-image-container - Image container
.nnfocalpoint-point - Focal point marker