ImageResize plugin support

[ItagMichael]

Currently, the CKEditor build that ships with this package doesn't have the ImageResize plugin included. This plugin allows for manual resize handles as well as scaling images to preset widths.

Obviously, this should not be a replacement for image transforms since we're just scaling images in CSS, but resizing images works well alongside the functionality of ImageStyle which is included by default since it appears in the same toolbar.

We may use ImageStyle to replicate (sparingly) floating images sometimes for clients and it is much less flexible without ImageResize.

[brandonkelly]

We just released CKEditor 3.4.0 with the ability to change the selected transform for inserted images:

It’s limited to the list of Available Transforms your field is configured with, as well as an “Original” option.

(We chose to go this route instead of pulling in the ImageResize plugin, as ImageResize only touches the <img>’s width attribute; it has no control over the loaded image size. Using transforms means the image will be served with the correct size in the first place.)

[rtrudel]

How to make this popover show ? It don't seem to appear out of the box.

[brandonkelly]

Are you on 3.4.0? Have you made any configuration changes that could be suppressing it? Any JS errors?

[rtrudel]

This has been solved automatically after a Craft update I guess, I just noticed. We'll never know ¯\_(ツ)_/¯

[mark-chief]

Sad the hear the imageResize plugin wasn't shipped, it's a super helpful tool for publishers to make small adjustments to images, quickly, where the image doesn't actually resize its not really an issue. Is there a way to install this manually instead? Thanks

[gjhead]

I agree. It's not the most ideal way to resize images but it does have a use case - especially when it comes to migrating large sites over to Craft 5. While I could understand keeping this feature off by default in Craft, I would prefer the option to turn it on manually until a better solution can be built in the CMS and editors trained on how to properly use it. @brandonkelly

[mark-chief]

In the meantime how can i get this dropdown to appear over my image? I have set a transform but im not seeing it.. craft 4.5.11.1 cke 3.6.0
thanks

[i-just]

@mark-chief by the looks of it, you already have something like this in your CKEditor config:

"image": {
  "toolbar": [
    "imageStyle:alignLeft",
    "imageStyle:alignCenter",
    "imageStyle:alignRight",
    "toggleImageCaption",
    "imageTextAlternative"
  ]
}

if you add "transformImage", to that list (and you have transforms defined in the Control Panel), the transforms dropdown should appear.

[mark-chief]

Hi @i-just , Thanks.. I have the transform set up and the cke config, but it's not actually doing anything when I select the transform from the dropdown and then save..

[brandonkelly]

@mark-chief We just released CKEditor 3.8.0 which now updates the image’s width and height attributes when a new transform is selected (#165).

[jamesevans1808]

I'm trying to set up the ck config to allow for the use of image transforms as mentioned above, but I get the warning in the console that the item "transformImage" for toolbar is unavailable (toolbarview-item-unavailable).

Could anyone please help? It'd be great to be able to resize images within the ckeditor. Thanks

EDIT: running Craft CMS 4.13.5, CKEditor 3.10.0, PHP 8.2.17

[i-just]

Did you select any available transforms for your CKEditor field(s) (control panel → Settings → Fields → your CKEditor field)?

[jamesevans1808]

I'd missed that part, I've done that and it's resolved my issue. Whoops! Thanks a bunch, @i-just !