Bug #103879
closed
Image manipulation does not display "Selected Size" in other variant than first one
100%
Description
After an upgrade from TYPO3 v10 to v12 we noticed, that the image manipulation modal does not process the selected areas of Free-Mode (NaN) in the cropVariants other than the first (Desktop) correctly.
Whether the button "Free" is selected, nor the "Selected size" info is filled with the pixel values of the selected area.
The payload of the button which calls the image manipulation modal is identical between v10 and v12.
{
"cropVariants": {
"default": {
"id": "default",
"title": "Desktop",
"cropArea": {
"x": 0.241,
"y": 0,
"width": 0.759,
"height": 1
},
"allowedAspectRatios": {
"wide": {
"id": "wide",
"title": "16:9",
"value": 1.7777777777777777
},
"fourbythree": {
"id": "fourbythree",
"title": "4:3",
"value": 1.3333333333333333
},
"threebytwo": {
"id": "threebytwo",
"title": "3:2",
"value": 1.5
},
"twobyone": {
"id": "twobyone",
"title": "2:1",
"value": 2
},
"square": {
"id": "square",
"title": "1:1",
"value": 1
},
"onebytwo": {
"id": "onebytwo",
"title": "1:2",
"value": 0.5
},
"twobythree": {
"id": "twobythree",
"title": "2:3",
"value": 0.6666666666666666
},
"threebyfour": {
"id": "threebyfour",
"title": "3:4",
"value": 0.75
},
"header-non-slide": {
"id": "header-non-slide",
"title": "Header",
"value": 4.125
},
"header": {
"id": "header",
"title": "Header Slideshow",
"value": 4.125
},
"NaN": {
"id": "NaN",
"title": "Frei",
"value": 0
}
},
"selectedRatio": "NaN",
"focusArea": null,
"coverAreas": null
},
"tablet": {
"id": "tablet",
"title": "Tablet",
"cropArea": {
"x": 0.237,
"y": 0,
"width": 0.763,
"height": 1
},
"allowedAspectRatios": {
"wide": {
"id": "wide",
"title": "16:9",
"value": 1.7777777777777777
},
"fourbythree": {
"id": "fourbythree",
"title": "4:3",
"value": 1.3333333333333333
},
"threebytwo": {
"id": "threebytwo",
"title": "3:2",
"value": 1.5
},
"twobyone": {
"id": "twobyone",
"title": "2:1",
"value": 2
},
"square": {
"id": "square",
"title": "1:1",
"value": 1
},
"onebytwo": {
"id": "onebytwo",
"title": "1:2",
"value": 0.5
},
"twobythree": {
"id": "twobythree",
"title": "2:3",
"value": 0.6666666666666666
},
"threebyfour": {
"id": "threebyfour",
"title": "3:4",
"value": 0.75
},
"header-non-slide": {
"id": "header-non-slide",
"title": "Header",
"value": 2.5
},
"header": {
"id": "header",
"title": "Header Slideshow",
"value": 1.5
},
"NaN": {
"id": "NaN",
"title": "Frei",
"value": 0
}
},
"selectedRatio": "NaN",
"focusArea": null,
"coverAreas": null
},
"mobile": {
"id": "mobile",
"title": "Mobile",
"cropArea": {
"x": 0.291,
"y": 0,
"width": 0.709,
"height": 1
},
"allowedAspectRatios": {
"wide": {
"id": "wide",
"title": "16:9",
"value": 1.7777777777777777
},
"fourbythree": {
"id": "fourbythree",
"title": "4:3",
"value": 1.3333333333333333
},
"threebytwo": {
"id": "threebytwo",
"title": "3:2",
"value": 1.5
},
"twobyone": {
"id": "twobyone",
"title": "2:1",
"value": 2
},
"square": {
"id": "square",
"title": "1:1",
"value": 1
},
"onebytwo": {
"id": "onebytwo",
"title": "1:2",
"value": 0.5
},
"twobythree": {
"id": "twobythree",
"title": "2:3",
"value": 0.6666666666666666
},
"threebyfour": {
"id": "threebyfour",
"title": "3:4",
"value": 0.75
},
"header-non-slide": {
"id": "header-non-slide",
"title": "Header",
"value": 2
},
"header": {
"id": "header",
"title": "Header Slideshow",
"value": 1.5
},
"NaN": {
"id": "NaN",
"title": "Frei",
"value": 0
}
},
"selectedRatio": "NaN",
"focusArea": null,
"coverAreas": null
}
},
"image": 5670
}
In the preview image, the area is shown correctly, but the "Free" button cannot be selected.
Files
Updated by Stephan Gruber 6 months ago
I can confirm this behavior.
The problem seems to be, that the class .active is only added to the first configured cropping variant.
The attached patch might not be the sexiest solution, but it solves the problem.
Updated by Gerrit Code Review 5 months ago
- Status changed from New to Under Review
Patch set 1 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84781
Updated by Garvin Hicking 5 months ago
Thank you, I could verify this behavior in v13 main. The provided patch was modified a bit, I'm not sure if it's due to the difference of v12 vs. v13.
Steps to reproduce:¶
- Using the ext:styleguide TCA tree
- Go into list view, pick "styleguide TCA demo > elements imagemanipulation", pick one of the records and edit it
- In the FormEngine view now scroll to the element "crop_5". This has "mobile" and "desktop" crop variants.
- Click on "Open Editor"
- Editor will open with the "mobile" cropVariant first
- Switch to "desktop" variant now
- Pick "free" as aspect ratio. Resize the cropping area.
- Note that "Selected size" remains empty!
- Click on "Accept" to save and close the modal
- Now again use "Open Editor"
- Go to "desktop" variant"
- See that no aspect ratio is selected (expected: "free" being selected)
- See that "Selected size" is still empty
Apply Gerrit Patch¶
- With the patch applied, following the same steps, the aspect ratio should remain locked to the selection
- Also the "selected size" should reveal the size of the cropping box of the current crop variant
Updated by Gerrit Code Review 5 months ago
Patch set 2 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84781
Updated by Gerrit Code Review 5 months ago
Patch set 3 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84781
Updated by Gerrit Code Review 5 months ago
Patch set 1 for branch 12.4 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/84963
Updated by Garvin Hicking 5 months ago
- Status changed from Under Review to Resolved
- % Done changed from 0 to 100
Applied in changeset 59191eb411cb4c715b487ed3649c67b9ca8435be.
Updated by 
.jpg){kind=link}