Crop-scalling issue since 4.3.0

[CIMEOS]

Hi everyone,
It seems the crop-scaling feature is not available anymore in the latest version of Headless. For example, before 4.3.0 fixing an image width or height with the c suffix would crop the image and not deform it.

To reproduce the issue, you can create a custom content element with an image field and set it's width and height parameter with a c suffix in the data processor configuration.
If you render an image way bigger than the rendering format, the image is deformed instead of cropped. Maybe something related to type casting with the width and height attributes in Classes/Utility/File/ProcessingConfiguration.php.

[CIMEOS]

Hi,
I just checked the pull request and tested it on a few websites. It works like a charm! Thank you for the quick fix! 👍

[MichaelNussbaumerGOWEST]

We are using multiple crop variants (xs, sm, md, lg, xl, 2xl) and it seems to be broken still in this case. We get the original dimensions for each variant even if we did some cropping modification in the backend.

[twoldanski]

@MichaelNussbaumerGOWEST can you provide example typoscript configuration?

[MichaelNussbaumerGOWEST]

@twoldanski:

TCA Config for cropVariants

$GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants'] = [
        'xs' => [
            'title' => 'XS',
            'allowedAspectRatios' => [

                'NaN'    => [
                    'title' => 'Free',
                    'value' => 0.0,
                ],

                '16:9'    => [
                    'title' => '16:9',
                    'value' => 16 / 9,
                ],

                '4:3'    => [
                    'title' => '4:3',
                    'value' => 4 / 3,
                ],

                '3:4'    => [
                    'title' => '3:4',
                    'value' => 3 / 4,
                ],

                '3:2'    => [
                    'title' => '3:2',
                    'value' => 3 / 2,
                ],

                '3:1'    => [
                    'title' => '3:1',
                    'value' => 3 / 1,
                ],

                '2:3'    => [
                    'title' => '2:3',
                    'value' => 2 / 3,
                ],

                '2:1'    => [
                    'title' => '2:1',
                    'value' => 2 / 1,
                ],

                '1:2'    => [
                    'title' => '1:2',
                    'value' => 1 / 2,
                ],

                '1:1'    => [
                    'title' => '1:1',
                    'value' => 1 / 1,
                ],

            ],
        ],
    ];
    $GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['sm'] = $GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['xs'];
    $GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['sm']['title'] = 'SM';
    $GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['md'] = $GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['xs'];
    $GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['md']['title'] = 'MD';
    $GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['lg'] = $GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['xs'];
    $GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['lg']['title'] = 'LG';
    $GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['xl'] = $GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['xs'];
    $GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['xl']['title'] = 'XL';
    $GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['2xl'] = $GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['xs'];
    $GLOBALS['TCA']['sys_file_reference']['columns']['crop']['config']['cropVariants']['2xl']['title'] = '2XL';

Typoscript is the default headless typoscript, no modifications

[twoldanski]

@MichaelNussbaumerGOWEST on what content element you have issue? I mean, are you are using only file processor or ce with gallery processing?

[MichaelNussbaumerGOWEST]

@twoldanski it looks like both are not working. I always get only the original file and dimensions for cropVariants:

"cropVariants": {
                      "xs": {
                        "publicUrl": "https://exampple.com/fileadmin/pexels-celeo-sun-15976900.jpg",
                        "properties": {
                          "dimensions": {
                            "width": 4000,
                            "height": 6000
                          }
                        }
                      },
.....
}

[twoldanski]

@MichaelNussbaumerGOWEST If you can, please check it out #754

[MichaelNussbaumerGOWEST]

@twoldanski: I get now the dimension I selected in the cropping, but still no information about the cropping position like before:

xs": {
                        "cropArea": {
                          "height": 1,
                          "width": 1,
                          "x": 0,
                          "y": 0
                        },
                        "selectedRatio": "NaN",
                        "focusArea": null
                      },

[twoldanski]

@MichaelNussbaumerGOWEST yeah, image is by that cropped, but why you need CropArea on the frontend?

[MichaelNussbaumerGOWEST]

@twoldanski in our applications we used to crop and resize the original image via an image api. This gives us more flexibility and we can have different image dimensions for each breakpoint, thats why we used the cropping parameters in frontend aswell.

If we would get the cropped image this would work aswell, but right now we just get the original file even if we used cropping in typo3.

[MichaelNussbaumerGOWEST]

@twoldanski ok now it is working, I get the processed image for the certain crop variant. We have to addapt the frontend processing of the images, so we don't do additional cropping there. So this should work actually. In case the image quality don't suit us, I guess we have to overwrite the image processor.

[twoldanski]

@MichaelNussbaumerGOWEST thanks for info, year right now backend properly process files, also I restored for legacy return crop property and added flag to output crop info to frontend in cropVariants property in case of delegate cropping to frontend.

[develth]

Hi,
just discovered the same issues.
after applying #754 it was fixed

[MichaelNussbaumerGOWEST]

@twoldanski may I ask when this change will be added in the release as we still have to manually patch new installations.