Sync Crop Area

Extension key

sync_crop_areas

Package name

jweiland/sync-crop-areas

Version

main

Language

en

Author

Stefan Froemken

License

This document is published under the Creative Commons BY 4.0 license.

Rendered

Wed, 10 Sep 2025 09:42:44 +0000


Imagine you have the 4 crop variants "Desktop", "Landscape", "Tablet" and "Mobile" at your disposal, then it may happen that you have to copy the crop area of "Desktop" to all other crop variants. Slight shifts of the image crop between the crop variants are almost inevitable. sync_crop_areas provides a remedy here and offers you to transfer the image crop of the first crop variant (here: "Desktop") to all other crop variants with the same image ratio.


Table of Contents:

Introduction

What does it do?

Imagine you have the 4 crop variants "Desktop", "Landscape", "Tablet" and "Mobile" at your disposal, then it may happen that you have to copy the crop area of "Desktop" to all other crop variants. Slight shifts of the image crop between the crop variants are almost inevitable. sync_crop_areas provides a remedy here and offers you to transfer the image crop of the first crop variant (here: "Desktop") to all other crop variants with the same image ratio.

Installation

Composer

If your TYPO3 installation works in composer mode, please execute following command:

composer req jweiland/sync-crop-areas
vendor/bin/typo3 extension:setup --extension=sync_crop_areas
Copied!

If you work with DDEV please execute this command:

ddev composer req jweiland/sync-crop-areas
ddev exec vendor/bin/typo3 extension:setup --extension=sync_crop_areas
Copied!

ExtensionManager

On non composer based TYPO3 installations you can install sync_crop_areas still over the ExtensionManager:

  1. Login

    Login to backend of your TYPO3 installation as an administrator or system maintainer.

  2. Open ExtensionManager

    Click on Extensions from the left menu to open the ExtensionManager.

  3. Update Extensions

    Choose Get Extensions from the upper selectbox and click on the Update now button at the upper right.

  4. Install sync_crop_areas

    Use the search field to find sync_crop_areas. Choose the sync_crop_areas line from the search result and click on the cloud icon to install sync_crop_areas.

Next step

Configure sync_crop_areas.

Configuration

EXT:sync_crop_areas itself does not need any configuration, but it needs a configured crop column in TCA of table sys_file_reference. Usually you should have a file Configuration/TCA/Overrides/sys_file_reference.php in your SitePackage where CropVariants are defined. Of cource you also can build up the CropVariants with PageTSConfig.

$GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants'] = [
    'desktop' => [
        'title' => 'Desktop',
        'allowedAspectRatios' => [
            '4:3' => [
                'title' => '4/3',
                'value' => 4 / 3
            ],
            'NaN' => [
                'title' => 'Free',
                'value' => 0.0
            ],
        ],
    ],
    'mobile' => [
        'title' => 'Mobile',
        'allowedAspectRatios' => [
            '4:3' => [
                'title' => '4/3',
                'value' => 4 / 3
            ],
            'NaN' => [
                'title' => 'Free',
                'value' => 0.0
            ],
        ],
    ],
];
Copied!

Usually a TCA reference to sys_file_reference in your extension should look like:

'images' => [
    'exclude' => true,
    'label' => 'LLL:EXT:glossary2/Resources/Private/Language/locallang_db.xlf:tx_glossary2_domain_model_glossary.images',
    'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
        'images',
        [
            ...
            'overrideChildTca' => [
                'types' => [
                    '0' => [
                        'showitem' => '
                        --palette--;;imageoverlayPalette,
                        --palette--;;filePalette'
                    ],
                    \TYPO3\CMS\Core\Resource\File::FILETYPE_TEXT => [
                        'showitem' => '
                        --palette--;;imageoverlayPalette,
                        --palette--;;filePalette'
                    ],
                    ...
                ],
            ],
        ],
        $GLOBALS['TYPO3_CONF_VARS']['SYS']['mediafile_ext']
    )
]
Copied!

Known Problems

I can't copy 2nd or 3rd cropVariant to all other cropVariants

Currently we only support copying the cropArea of the first cropVariant. So, you can't decide to copy the cropArea of the second or fourth cropVariant back to all other cropVariants

In our DataHandler Hook we check, if first cropArea with its ratio is allowed for all other cropVariants. If a CropVariant does not have the ratio of the first CropVariant sync_crop_areas keeps this CropVariant untouched.

Please check, if your editors have access rights to column sys_file_reference:sync_crop_area. This column is deactivated by default, so, if an editor has no rights for this column, the CropVariants can't be synchronized.

Is there an automatism to upgrade all sys_file_reference records?

If you add sync_crop_areas the first time to a project or you have added further CropVariants, you may have the problem that you have 1000s of sys_file_reference records which have CropVariants out-of-sync. Instead of opening each record and save it, you can use a CLI command or scheduler task.

Command: vendor/bin/typo3 sync_crop_areas:sync

Task: Choose Execute console commands -> sync_crop_areas:sync -> execute task once.

sync_crop_areas does not work for column of extension XY

First of all it's not the TYPO3 core itself which adds cropping feature to sys_file_reference, it's TYPO3 sysext frontend. The core initializes sys_file_reference with just title and description for all kind of files in TCA palette basicoverlayPalette. For each table in TYPO3 universe which contains a relation to sys_file_reference it is possible to overwrite the displayed columns or palettes. Sysext frontend contains the TCA for table tt_content which of cause has a relation to sys_file_reference. In its TCA it overwrite palette basicoverlayPalette to imageoverlayPalette which also contains the column crop for all image filetypes.

EXT:sync_crop_areas simply searches for crop in palette imageoverlayPalette and adds our own column sync_crop_area before crop.

Some extension authors like bootstrap_package do not make use of TYPO3 palette imageoverlayPalette. That's why column sync_crop_area is not visible. So it's up to you to add this missing column to such extensions.

You need the table name of the foreign extension and the column name where the sync_crop_areas feature is missing.

As we want to modify the TCA of one or more foreign extensions we should be sure to load the foreign extensions BEFORE your site_package. Go into

typo3conf/ext/[my_site_package]/ext_emconf.php

and check, if all extensions with missing sync_crop_area column is listed in section depends. Here an example for bootstrap_package:

...
'constraints' => [
    'depends' => [
        'typo3' => '11.5.23-12.4.99',
        'maps2' => '9.3.0-10.99.99',
        'tt_address' => '5.2.0-6.99.99',
        'bootstrap_package' => '12.0.1-12.99.99'
    ],
    'conflicts' => [],
    'suggests' => [],
],
...
Copied!

Go into your SitePackage extension and create a new file:

typo3conf/ext/[my_site_package]/Configuration/TCA/Overrides/[tableName].php

Add following PHP block and update the variables $table and $columns to your needs.:

<?php
if (!defined('TYPO3')) {
    die('Access denied.');
}

call_user_func(static function () {
    // Only needed, if foreign extension author do not use
    // "imageoverlayPalette" palette from core.
    // Example for bootstrap table "tx_bootstrappackage_card_group_item":
    $table = 'tx_bootstrappackage_card_group_item';
    $columns = ['image'];
    $imgFileType = \TYPO3\CMS\Core\Resource\File::FILETYPE_IMAGE;

    if (isset($GLOBALS['TCA'][$table]['columns'])) {
        foreach ($columns as $column) {
            if (isset($GLOBALS['TCA'][$table]['columns'][$column]['config'])) {
                $imgConfig = $GLOBALS['TCA'][$table]['columns'][$column]['config'];
                if (isset($imgConfig['overrideChildTca']['types'][$imgFileType]['showitem'])) {
                    // Add column "sync_crop_area" before "crop" column
                    $imgConfig['overrideChildTca']['types'][$imgFileType]['showitem'] = str_replace(
                        'crop',
                        'sync_crop_area, crop',
                        $imgConfig['overrideChildTca']['types'][$imgFileType]['showitem']
                    );
                    $GLOBALS['TCA'][$table]['columns'][$column]['config'] = $imgConfig;
                }
            }
        }
    }
});
Copied!

Clear System Cache and you should be done.

ChangeLog

Version 4.0.1

  • TASK: Update testing directory
  • TASK: Replaced deprecations in test cases

Version 4.0.0

  • TASK: Add TYPO3 13 compatibility
  • TASK: Remove TYPO3 12 compatibility
  • TASK: Remove TYPO3 11 compatibility
  • TASK: Update Test Suite removing testing docker

Version 3.0.0

  • TASK: Add TYPO3 12 compatibility
  • TASK: Remove TYPO3 10 compatibility

Version 2.2.3

  • TASK: Update .editorconfig
  • TASK: Update .gitignore
  • TASK: Update .gitattributes

Version 2.2.2

  • Bugfix: Respect crop variants of non-types tables in columnsOverride
  • TASK: Migrate Prophesize in tests to MockObjects

Version 2.2.1

  • Bugfix: Repair sync for new sys_file_reference records
  • TASK: Update and add more functional tests

Version 2.2.0

  • Feature: Respect TCA overrideChildTca
  • Feature: Respect TCA type based columnsOverrides
  • Feature: Add missing CropVariants. f.e. if new config was added
  • Feature: Use TYPO3 CropVariant API to build crop JSON

Version 2.1.0

  • Move CropVariant synchronization into its own Service class
  • DataHandler hook uses synchronization service to process records
  • Add schedulable symfony command to process all sys_file_reference records

Version 2.0.1

  • Remove PHP 7.2 and PHP 7.3 compatibility
  • BUGFIX: Check selected ratio of other cropVariants before copy

Version 2.0.0

  • Remove TYPO3 9 compatibility
  • Add TYPO3 11 compatibility

Version 1.0.4

  • Add documentation how to extend foreign extensions with sync_crop_areas

Version 1.0.1

  • Change Extension Icon

Version 1.0.0

  • Initial commit

Sitemap

Index