Bildmanipulation in eigener Extension (Image Manipulation)

Im folgenden TCA-Code wird ein Feld mit dem Namen "image" definiert.

'image' => Array (
    'label' => 'Bild',
    'config' => \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::getFileFieldTCAConfig(
        'image',
        array(
            'appearance' => array(
                'createNewRelationLinkTitle' => 'LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference'
            ),
            'overrideChildTca' => [
                'types' => [
                    \TYPO3\CMS\Core\Resource\File::FILETYPE_IMAGE => [
                        'showitem' => '
                    --palette--;LLL:EXT:lang/Resources/Private/Language/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,
                    --palette--;;filePalette'
                    ],
                ],
            ],
        ),
        $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']
    )
),

Der entscheidende Teil hier ist alles, was in "overrideChildTca" steht. Damit wird die Relation zu "sys_file_reference" erweitert und im Backend kann das Feature der Bildmanipulation aufgerufen werden.  Dies erfolg mit den Einstellungen, wie sie für sys_file_reference angegeben ist. Will man diese verändern, macht man das im TCA von sys_file_reference.

$GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants'] = [
    'desktop' => [
        'title' => 'LLL:EXT:wil_master/Resources/Private/Language/locallang_db.xlf:imageManipulation.desktop',
        'allowedAspectRatios' => [
            'NaN' => [
                'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.free',
                'value' => 0.0
            ],
            '16:9' => [
                'title' => '16 : 9',
                'value' => 16/9
            ],
        ]
    ],
    'tablet' => [
        'title' => 'LLL:EXT:wil_master/Resources/Private/Language/locallang_db.xlf:imageManipulation.tablet',
        'allowedAspectRatios' => [
            'NaN' => [
                'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.free',
                'value' => 0.0
            ],
            '16:9' => [
                'title' => '16 : 9',
                'value' => 16/9
            ],
        ]
    ],
    'phablet' => [
        'title' => 'LLL:EXT:wil_master/Resources/Private/Language/locallang_db.xlf:imageManipulation.phablet',
        'allowedAspectRatios' => [
            'NaN' => [
                'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.free',
                'value' => 0.0
            ],
            '16:9' => [
                'title' => '16 : 9',
                'value' => 16/9
            ],
        ]
    ],
    'mobile' => [
        'title' => 'LLL:EXT:wil_master/Resources/Private/Language/locallang_db.xlf:imageManipulation.mobile',
        'allowedAspectRatios' => [
            'NaN' => [
                'title' => 'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.ratio.free',
                'value' => 0.0
            ],
            '16:9' => [
                'title' => '16 : 9',
                'value' => 16/9
            ],
        ]
    ]
];

Hier wurden 4 Cropvarianten definiert. Bei allen vieren wird kann man entweder freihändig (NaN) oder im Verhältnis 16/9 croppen.

Anschließend muss man die Crop-Varianten in Fluid auffangen:

<picture>
    <source srcset="{f:uri.image(image:file,cropVariant:'wide')}" media="(min-width:1280px)" />
    <source srcset="{f:uri.image(image:file,maxWidth:'1279',cropVariant:'desktop')}" media="(min-width:992px)" />
    <source srcset="{f:uri.image(image:file,maxWidth:'991',cropVariant:'tablet')}" media="(min-width:768px)" />
    <source srcset="{f:uri.image(image:file,maxWidth:'767',cropVariant:'phablet')}" media="(min-width:480px)" />
    <source srcset="{f:uri.image(image:file,maxWidth:'479',cropVariant:'mobile')}" media="(min-width:0px)" />
    <img src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" srcset="{f:uri.image(image:file,cropVariant:'desktop')}"  alt="{file.alternative}" title="{file.title}"  />
</picture>