Crop variants for tt_content image

Question

I tried the first time the new image manipulation feature in TYPO3 and stumbled upon some problems. I am using TYPO3 8.7.16. The image processing is working correctly (tested in install tool using ImageMagick).

For testing purposes I overrided the TCA of tt_content:

$GLOBALS['TCA']['tt_content']['columns']['image']['config'] ['overrideChildTca']['columns']['crop'] = [
    'config' => [
        'cropVariants' => [
            'desktop' => [
                'title' => 'Desktop',
                'selectedRatio' => '4:3',
                'allowedAspectRatios' => [
                    '4:3' => [
                        'title' => '4:3',
                        'value' => 4 / 3,
                    ],
                ],
            ],
            'tablet' => [
                'title' => 'Tablet',
                'selectedRatio' => '16:9',
                'allowedAspectRatios' => [
                    '16:9' => [
                        'title' => '16:9',
                        'value' => 16 / 9,
                    ],
                ],
            ],
            'mobile' => [
                'title' => 'Mobile',
                'selectedRatio' => '2:3',
                'allowedAspectRatios' => [
                    '16:9' => [
                        'title' => '2:3',
                        'value' => 2 / 3,
                    ],
                ],
            ],
        ],
    ],
];

When I use the editor for image manipulation I can crop the different formats and after accepting the manipulation I see the cropped images as preview in the content element:

After saving the content element I see the following (the cropped images are not shown anymore):

Is this a bug? But that doesn't bother me much for now.

Now I tried to show e.g. the cropped desktop image in frontend. I copied the Media/Rendering/Image.html partial and changed the content to:

<f:image image="{file}" cropVariant="desktop" width="480" alt="{file.alternative}" title="{file.title}" />

I thought that is enough to show the cropped image, but it was not. I see the original file. When I debugged the file reference I see, that the configuration for the cropped images are stored correctly in sys_file_reference:

Now I have no clue what to do to get the cropped images in frontend.

Any ideas?

Edit: Now I found the problem, I had some issues with ImageMagick, so that the cropped images cannot be created.

ChrisKr ChrisKr · Accepted Answer · 2018-07-12T20:23:21

i would recommend you to look at the article from Clickstorm Clickstorm CropVariant Images

You can easily access the cropVariants with srcset.

<f:if condition="{files}"> <f:image src="{image.id}" treadIdAsReference="1" srcset="{f:uri.image(image:image.id,width:'2500',height:'816',cropVariant:'desktop')}" alt="{files.0.alternative}" /> </f:if>

Maybe you use the Picture Element like this: <picture> <source media="(min-width: 1400px)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',width:'1400',cropVariant:'default')}"> <source media="(max-width: 1399px) and (min-width:1025px)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',cropVariant:'default-md')}"> <source media="(max-width: 1024px) and (orientation:portrait)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',width:'768',cropVariant:'tablet-portrait')}"> <source media="(max-width: 1024px) and (orientation:landscape)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',width:'768',cropVariant:'tablet-landscape')}"> <source media="(max-width: 667px) and (orientation:portrait)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',width:'667',cropVariant:'smartphone-portrait')}"> <source media="(max-width: 667px) and (orientation:landscape)" srcset="{f:uri.image(src:'{image.uid}',treatIdAsReference:'1',width:'667',cropVariant:'smartphone-landscape')}"> <img src="{f:uri.image(crop: image.crop, src: image.id, cropVariant:'default')}"title="{image.title}" alt="{image.alternative}" /> </picture>

I hope that help you in getting started for the Frontend part.

Crop variants for tt_content image

1 Answers