0

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.

See full size image

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

See minimized image

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?

2
  • 1
    when i resize the image via drag there is still height and width added. so whats the point on this? By resizing you're saying you want the image to be a particular size, ckeditor is just honouring that. The CSS which overrides it and makes it 'responsive' is a separate thing. You can't really have it both ways...imagine if your stylesheet didn't have the usual img { width: 100%; height: auto } in it, and you'd resized the image via ckeditor. You'd be pretty annoyed if the width/height attributes were missing right?
    – Clive
    Oct 11, 2017 at 9:59
  • @Clive yes ofcourse you are right. but is there a solution for display the images smaller inside the editor then their actual width are? because it is rendered correctly on the finished site (with a 300px width).
    – Gabbax0r
    Oct 11, 2017 at 11:44

2 Answers 2

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.

1
  • works fine with custom module and ckeditor hook. thanks alot.
    – Gabbax0r
    Oct 12, 2017 at 6:27
0

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.