ckeditor
Limiting image resize
Is this a bug report or feature request?
🆕 Feature request
💻 Version of CKEditor
CKEditor v5 @ 12.4.0
📋 Steps to reproduce
During the course of ckeditor/ckeditor5#5167 a suggestion of limiting image resize appeared.
It make sense to expose this feature in the image configuration.
- Is there a need to limit both min and max value?
- UX: How user should be hinted that limit has been reached and further resizing won't change the size?
If you'd like to see this feature implemented, add 👍 to this post.
I was looking for a solution for this because there is little value of increasing the width of an image beyond its intrinsic size, at least in our use case. A simple yet elegant solution is to apply a max-width attribute with a matching pixel size. This will cause the resize operation to stop at the defined limit regardless of how far the handle is being “dragged”.
In terms of UX the resizing will simply stop at some point and is something I have observed before. I don’t think that there needs to be some special hint because the user can observe the behavior and draw a conclusion. You could always add another tooltip along the indicator for the dimensions that will inform the user that the maximum width has been reached.
In case someone else comes across this issue, this is how I solved this by enforcing the max-width of resizable images:
https://github.com/WoltLab/editor/blob/1b0af7fe54e26d70d87a792a174c8c68a98f6416/plugins/ckeditor5-woltlab-image/src/woltlabimage.ts#L54-L91
There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.
In terms of UX, keep in mind to disable the buttons for predefined widths (resizeOptions) when they exceed the intrinsic size of the image.
There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.