visually resize images when uploaded inline in ckeditor

Question

is there a way to resize images after uploaded in the inline ckeditor?

if i have a big picture 2000x2000 and upload it (not via IMCE) to the editor, the image is huge and it is displayed in full size.

i have to scroll to left and down and drag the resize button multiple time until i get the result i can work with.

i miss the settings dialogue from D7 where i can define an image size upon upload. i cannot find any extension and i read many discussions that the D8 ckeditor has a lot less functions than in D7. i read about the reason is responsive design but when i resize the image via drag there is still height and width added. so whats the point on this?

Answer 1

There's a pretty simple solution, but it does feel a bit hack-y.

1. Add a CSS file to a module/theme with contents like

   img { max-width: 200px; height: auto; }
   

2. Implement hook_ckeditor_css_alter() to get that CSS file loaded in the WYSIWYG iframe:

   function hook_ckeditor_css_alter(array &$css, Editor $editor) {
     $css[] = drupal_get_path('module', 'mymodule') . '/css/mymodule-ckeditor.css';
   }
   

Once that's up and running images in the WYSIWYG should be constrained in width to whatever you set in the CSS file. You might need to resort to !important, depending on what other styles are already active; it'll need some tweaking no doubt.

Answer 2

If your html contains a style attribute e.g.it will block the resizing of an image.

<img src="image.jpg" style="width:300px;height:200px;" />

Remove the style attribute to make sure resizing works. Searched a very long time for this!