Bug #103389
open
Multiple configured coverAreas not correctly displayed in image manipulation modal
0%
Description
The following cover areas are defined in a custom page field:
'columns' => [
'crop' => [
'config' => [
'cropVariants' => [
'desktop_wide' => [
'title' => 'Desktop wide',
'allowedAspectRatios' => [
'default' => [
'title' => 'Default',
'value' => 1920 / 680,
],
],
'selectedRatio' => 'default',
'coverAreas' => [
[
'x' => 0,
'y' => 0,
'width' => 1,
'height' => 0.25,
],
[
'x' => 0.2,
'y' => 0.35,
'width' => 0.25,
'height' => 0.5,
],
],
],
'desktop' => [
'title' => 'Desktop',
'allowedAspectRatios' => [
'default' => [
'title' => 'Default',
'value' => 1370 / 680,
],
],
'selectedRatio' => 'default',
'coverAreas' => [
[
'x' => 0,
'y' => 0,
'width' => 1,
'height' => 0.25,
],
[
'x' => 0.08,
'y' => 0.35,
'width' => 0.45,
'height' => 0.5,
],
],
],
'small' => [
'title' => 'Tablet / Smartphone',
'allowedAspectRatios' => [
'default' => [
'title' => 'Default',
'value' => 16 / 9,
],
],
'selectedRatio' => 'default',
],
],
],
],
],
However, the cover areas in the UI are displayed like that:
Desktop wide:
Desktop:
Tablet/Smartphone:
Mind the duplicated cover areas, best seen in "Desktop wide" and "Desktop" for the second defined cover area. Additionally, the "Tablet/Smartphone" crop variant should have no cover areas displayed.
It looks like all defined cover areas are combined for each crop variant.
TYPO3 v12.4.12
Files
Updated by Chris Müller about 2 months ago
In the payload of the "Open Editor" button the cover areas are passed correctly:
{
"cropVariants": {
"desktop_wide": {
"id": "desktop_wide",
"title": "Desktop wide",
"cropArea": {
"x": 0,
"y": 0.10170383527399512,
"width": 1,
"height": 0.6296296296296295
},
"allowedAspectRatios": {
"default": {
"id": "default",
"title": "Default",
"value": 2.823529411764706
}
},
"selectedRatio": "default",
"focusArea": null,
"coverAreas": [
{
"x": 0,
"y": 0,
"width": 1,
"height": 0.25
},
{
"x": 0.2,
"y": 0.35,
"width": 0.25,
"height": 0.5
}
]
},
"desktop": {
"id": "desktop",
"title": "Desktop",
"cropArea": {
"x": 0,
"y": 0.00018511075673567726,
"width": 1,
"height": 0.8824006488240065
},
"allowedAspectRatios": {
"default": {
"id": "default",
"title": "Default",
"value": 2.014705882352941
}
},
"selectedRatio": "default",
"focusArea": null,
"coverAreas": [
{
"x": 0,
"y": 0,
"width": 1,
"height": 0.25
},
{
"x": 0.08,
"y": 0.35,
"width": 0.45,
"height": 0.5
}
]
},
"small": {
"id": "small",
"title": "Tablet \/ Smartphone",
"cropArea": {
"x": 0,
"y": 0,
"width": 1,
"height": 1
},
"allowedAspectRatios": {
"default": {
"id": "default",
"title": "Default",
"value": 1.7777777777777777
}
},
"selectedRatio": "default",
"focusArea": null,
"coverAreas": null
}
},
"image": 4908
}
Updated by Chris Müller about 2 months ago
· Edited
Initially, for "Desktop wide" in HTML three cover areas are defined instead of the two configured:
<div class="cropper-cover-area t3js-cropper-cover-area" style="height:50%;left:20%;top:35%;width:25%;"></div> <div class="cropper-cover-area t3js-cropper-cover-area" style="height:25%;left:0%;top:0%;width:100%;"></div> <div class="cropper-cover-area t3js-cropper-cover-area" style="height:50%;left:8%;top:35%;width:45%;"></div>
After switching to "Desktop" four are defined:
<div class="cropper-cover-area t3js-cropper-cover-area" style="height:25%;left:0%;top:0%;width:100%;"></div> <div class="cropper-cover-area t3js-cropper-cover-area" style="height:50%;left:20%;top:35%;width:25%;"></div> <div class="cropper-cover-area t3js-cropper-cover-area" style="height:25%;left:0%;top:0%;width:100%;"></div> <div class="cropper-cover-area t3js-cropper-cover-area" style="height:50%;left:8%;top:35%;width:45%;"></div>
As it looks, every time another crop variant is selected, the latest <div class="cropper-cover-area"> is removed, and the new ones added. Seems, more than one cropper-cover-area is not removed, although multiple are defined.
Updated by Chris Müller about 2 months ago
- Subject changed from coverAreas seem to be merged for different cropVariants to Multiple configured coverAreas not correctly displayed in image manipulation modal
Updated by Chris Müller about 2 months ago
· Edited
I assume, this line is responsible:
this.cropBox?.querySelector(this.coverAreaSelector)?.remove();
https://github.com/TYPO3/typo3/blob/12.4/Build/Sources/TypeScript/backend/image-manipulation.ts#L493
With querySelector only one cover area is removed from DOM? Using querySelectorAll and iterating over the results may be the fix.