Buttons for setting image width to e.g. 50%, 75%, 100%

[Reinmar]

In addition to the manual image resizing or as an alternative to it we can introduce a set of buttons which could be placed in the image toolbar and would allow to quickly change the width of an image to a predefined set of options.

E.g.

ClassicEditor.create( element, {
     image: {
          sizes: [ '50%', '75%', '100%' ],
          toolbar: [ 'textAlternative', '|', 'fullImage', 'sideImage', '|', 'imageSize50%', 'imageSize75%', 'imageSize100%' ],


          // or a dropdown:
          toolbar: [ 'textAlternative', '|', 'fullImage', 'sideImage', '|', 'imageSize' ]
     }
} )

This will be a nice extension of the image styles. By image styles you will control e.g. alignment and margins. And the size could be controlled by using the predefined options.

This way the developer will have control over what kind of images can be created (the content will be consistently styled), but the user will have more than one option of how wide the image should be.

---

If you'd like to see this option implemented please react with 👍 to this ticket.

[jodator]

It looks like linked to the #5197.

[oleq]

FYI: I'd see this implemented as a drop-down (to avoid bloating the image toolbar) but with individual buttons also available via component factory so if an integrator wants the buttons inline in the toolbar they'll be able to do this (similar to individual heading or highlight buttons that we already offer).

[Reinmar]

I reported a natural followup for this issue: #7560 – a ticket about cleaning up and clarifying the available options.