..  include:: /Includes.rst.txt

..  _configuration:

=============
Configuration
=============

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

..  _configuration-tca:

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:

..  code-block:: php
    :caption: 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:

..  code-block:: php

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

..  _configuration-crop-variants:

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:

..  code-block:: php
    :caption: 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.

..  _configuration-javascript:

JavaScript Module
=================

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

..  code-block:: php
    :caption: Configuration/JavaScriptModules.php

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

..  _configuration-ajax:

AJAX Routes
===========

The extension registers two AJAX routes for the backend modal:

..  code-block:: php
    :caption: Configuration/Backend/AjaxRoutes.php

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

..  _configuration-styling:

Styling
=======

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

..  code-block:: php
    :caption: 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