3

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?

4

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.

  • This is the right answer! – manish_s Mar 2 '16 at 5:57
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.

  • Yes, this was part of the Picture module implementation. – vintorg Nov 13 '13 at 21:02
1

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.

  • That doesn't help, because it only hardcodes the height and width in the HTML, which is not responsive. I need the images to scale based on CSS. – vintorg Sep 21 '13 at 8:03
  • @vintorg I updated my answer. – Bala Sep 21 '13 at 8:13
  • It doesn't appear I can set height/width percentages with this module. – vintorg Sep 21 '13 at 8:17
  • Sorry, check this Adaptive Image Styles (ais) module, again i updated the answer, you can integrate with WYSIWYG module. – Bala Sep 21 '13 at 8:19
  • My problem isn't with the content rendering. I add the CSS class to the image and it renders fine after I'm done editing. I just need a reponsive solution for images while I'm editing. – vintorg Sep 21 '13 at 8:24
-2

I was able to do this with the Picture module.

  • 2
    Can you expand a little on how this module helped solve your problem? – mpdonadio Oct 26 '13 at 21:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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