How to scale uploaded image in ckeditor

Question

I am using CKEditor, and am having a problem with the scaling of the images during edit. When I upload and insert them into my editor, if the image is very large, it displays that way in the editor, making it very hard on the user.

I have formats defined for these image styles, which set the class attribute to a CSS class.

Is there a way to get images in the editor to adhere to the CSS of their format, so the page layout during edit resembles what it will look like after being saved?

Answer 1

In the latest version of the ckeditor library there is the new Enhanced Image plugin. This plugin allows you to resize the inline image by dragging the image corner. Go to ckeditor building website ( http://ckeditor.com/builder) and select the Enhanced Image plugin (image2) and also deselect the standard Image plugin from the build.

Answer 2

You can solve this by creating a custom CSS file for CKEDITOR.

Upload the custom CSS file wherever you want to house it, such as your theme folder.

Add to the custom CSS file definitions for your image classes or data attributes which are used for your rendered pages.

Example: /sites/all/themes/THEMENAME/css/editor.css

img.class-small {
  width: 100px;
  height: auto;
}      

[data-picture-align="right"] {
  float: right;
}

[data-picture-group="medium"] {
  max-width: 310px;
  height: auto;
}

Go to admin/config/content/ckeditor and edit the relevant profile.

Open the CSS area and select "Define CSS" and then enter the path to the CSS file you created. eg. "/sites/all/themes/THEMENAME/css/editor.css"

Now when you are in the editor itself the editor will reference that custom CSS file and draw the image as you have designated it. You can mimic all the same responsive styles by using responsive CSS for your editor the same as you use for your site.

Answer 3

Image Resize Filter is the easiest end-user solution for resizing inline images. Check out this video demo.

Image Resize Filter makes it easy to resize images, especially when combined with a WYSIWYG editor such as tinyMCE or CKeditor. Users never have to worry about scaling image sizes again, just insert an image and set it's height and width properties in HTML (this is done automatically by WYSIWYG editors) and the image is resized on output to match the HTML.

Features:

• Automatically resizes both local and (optionally) remote images.
• Optionally create a link to full size images from the resized inline versions.
• Prevents inline "hot linking" of images from other sites by storing them locally.
• Adds height and width attributes to inline images when your users are too lazy to add them.

And

For responsive image , use Adaptive Image Styles (ais) module

Integration with the WYSIWYG module, Ability to choose which images are adaptive on an image by image basis.

Answer 4

I was able to do this with the Picture module.