Hi,
Ich setze das als responsive Image z. B. so um:
Im TCA:
$defaultCropSettings = [
'title' => 'default',
'allowedAspectRatios' => [
'4:1' => [
'title' => '4:1',
'value' => 4 / 1
],
'5:2' => [
'title' => '5:2',
'value' => 5 / 2
],
'16:9' => [
'title' => '16:9',
'value' => 16 / 9
],
'4:3' => [
'title' => '4:3',
'value' => 4 / 3
],
'1:1' => [
'title' => '1:1',
'value' => 1.0
],
'1:2' => [
'title' => '1:2',
'value' => 0.5
],
'NaN' => [
'title' => 'free',
'value' => 0.0
],
],
'selectedRatio' => 'NaN',
'cropArea' => [
'x' => 0.0,
'y' => 0.0,
'width' => 1.0,
'height' => 1.0,
]
];
$largeCropSettings = $defaultCropSettings;
$largeCropSettings['title'] = 'desktop';
$mediumCropSettings = $defaultCropSettings;
$mediumCropSettings['title'] = 'tablet';
$smallCropSettings = $defaultCropSettings;
$smallCropSettings['title'] = 'mobile';
$teaserCropSettings = $defaultCropSettings;
$teaserCropSettings['title'] = 'teaser';
$GLOBALS['TCA']['tt_content']['types']['image']['columnsOverrides']['image']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants']['default'] = $defaultCropSettings;
$GLOBALS['TCA']['tt_content']['types']['image']['columnsOverrides']['image']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants']['small'] = $smallCropSettings;
$GLOBALS['TCA']['tt_content']['types']['image']['columnsOverrides']['image']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants']['medium'] = $mediumCropSettings;
$GLOBALS['TCA']['tt_content']['types']['image']['columnsOverrides']['image']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants']['large'] = $largeCropSettings;
Im Fluidtemplate:
<picture>
<source media="print" srcset="{f:uri.image(image:file, width:'800', cropVariant:'default')}">
<source media="(max-width: 330px)" srcset="{f:uri.image(image:file, width:'330', cropVariant:'small')}">
<source media="(max-width: 540px)" srcset="{f:uri.image(image:file, width:'540', cropVariant:'small')}">
<source media="(max-width: 768px)" srcset="{f:uri.image(image:file, width:'600', cropVariant:'medium')}">
<source media="(max-width: 1200px)" srcset="{f:uri.image(image:file, width:'700', cropVariant:'large')}">
<source media="(min-width: 1201px)" srcset="{f:uri.image(image:file, width:'800', cropVariant:'large')}">
<f:image class="img-fluid {file.properties.css_class}"
image="{file}"
cropVariant="medium"
decoding="auto"
alt="{file.alternative}"
additionalAttributes="{loading:'{f:if(condition:\'{file.properties.lazyload_disabled} == 1\', then:\'eager\', else:\'lazy\')}'}"
title="{file.title}" />
</picture>
Das Beispiel ist etwas zusammengewürfelt und wahrscheinlich musst du die Bezeichnungen für deine jew. cropVariant anpassen.
