TYPO3 Cropping Tool

This covers:

• Cropping images for each breakpoint
• Cover area for each breakpoint
• Focus area/point for each breakpoint

Simple cropping

Override TCA using $GLOBALS['TCA']['pages']['types']['1']['columnsOverrides']['media']['config']['overrideChildTca'] which will change croppig for page type value *1* media field

To change cropping do the following:

$GLOBALS['TCA']['pages']['types']['1']['columnsOverrides']['media']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants'] = [
    'desktop' => [
        'title' => 'Desktop',
        'allowedAspectRatios' => [
            '21 : 1' => [
                'title' => '2,1 : 1',
                'value' => 16/9,
            ]
        ]
    ],
    'mobile' => [
        'title' => 'Mobile',
        'allowedAspectRatios' => [
            '21 : 1' => [
                'title' => '4 : 3',
                'value' => 4/3,
            ]
        ]
    ],
    .... and so on ...

];

Complete example with coverAreas (possible to set multiple) and focusArea (only one possible) :

$GLOBALS['TCA']['pages']['types']['1']['columnsOverrides']['media']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants'] = [
    'desktop' => [
        'title' => 'Desktop',
        'focusArea' => [
            'x' => 1 / 3,
            'y' => 1 / 3,
            'width' => 1 / 3,
            'height' => 1 / 3,
        ],
        'coverAreas' => [
            [
                'x' => 0,
                'y' => 0.7,
                'width' => 0.4,
                'height' => 0.3,
            ]
        ],
        'allowedAspectRatios' => [
            '21 : 1' => [
                'title' => '2,1 : 1',
                'value' => 16/9,
            ]
        ]
    ],
    'mobile' => [
        'title' => 'mobile',
        'coverAreas' => [
            [
                'x' => 0.6,
                'y' => 0,
                'width' => 0.4,
                'height' => 0.3,
            ]
        ],
        'allowedAspectRatios' => [
            '21 : 1' => [
                'title' => '2,1 : 1',
                'value' => 16/9,
            ]
        ]
    ],
];