Responsive images in CKeditor

Solution, anyone? Thanks ;-)

Well, not quite a solution but a workaround. If you still have "plain text" type enabled or if you click on the "Source" button on your editor, you can MANUALLY remove the height and width styles from the img tag in the source code. (I know... super not optimal).

I think CKEditor generates height and width as a "style" attribute instead of using the height and width attributes, so you should see something like:
<img src='...' style='height: XXpx; width; YYpx' />

And you should be able to get away with removing the style attribute and values (style='height: XXpx; width; YYpx' ) and saving the source, so it looks more like:
<img src='...' />

To my knowledge, there is no way to disable the automatic adding of the style attribute with height/width values generated from the native image dimensions.

Good luck! And if you DO find a way to disable this behavior, let us know!

So, this is a big problem for a client that I'm working with who needs to be able to insert images inline via CKeditor. But the site's responsive, and the inline images placed via CKeditor are not responsive, due to the fact that CKeditor puts the image width and height in an inline CSS style attribute instead of in its proper HTML width and height attributes. I did a bunch of research, and it looks like people are not happy with CKeditor about this all over the interwebs. Here's the main issue on this: https://dev.ckeditor.com/ticket/5547

And in the last comment on that issue, two weeks ago, someone posted that there's a plugin filter to fix this now, here: http://ckeditor.com/addon/image2

You need to be using CKeditor 4.3 to use it, so I guess we'll try upgrading to 4.3 and adding this plugin. I will try to report back.

Yep, this plugin totally fixed it on our site. I blogged about it here: http://devcollaborative.com/ckeditor-responsive-images

hanpersand,

Can you rundown how you added the plugin to Drupal? It's not working for me.

So I added the plugin, but now the CKEditor Media plugin doesn't work.

I can't fathom how someone could make such a stupid decision on the CKEditor side, and instead of patching it they release a plugin that breaks a ton of stuff.

@korven, are you sure you're using CKEditor 4.3 instead of 4.2 or lower? That's important.

My colleague did the upgrade, but as far I as I know, she simply replaced 4.2 with 4.3, and added the plugin. And we cleared the caches like three times.

Good luck.

@hanpersand

We are using CKEditor 4.3.2

After installing the image2 plugin We had tons of issues with dependencies (having to install other plugins), I think it was 2 additional plugins that had to be added by trial and error.

Then, once there were no JS errors it turned out the image2 plugin breaks compatibility with the Insert module, for which we rely to actually insert the images.

Is it possible to downgrade to CKEditor 4.2 to fix this?

A little CSS workaround that works for me:

.field-body img[style] {
width:auto !important;
height:auto !important;
}

So you w'ont have to do it one image at a time :)

On newer versions of CK you can use the "Advanced Content Filter" to disallow this. Add this to your config.js and it will remove width x height from image popup as well as scrub off those directives on next save:

config.disallowedContent = 'img{width,height};';

http://docs.ckeditor.com/#!/guide/dev_disallowed_content

#10 by Dhaupin was the closest answer. However, for our particular Drupal installation CKEditor 4.5, the disallowed code only worked if it was inside sites/all/modules/ckeditor/ckeditor.config.js. It did not work in sites/all/modules/ckeditor/ckeditor/config.js.

Also, we put the download from ckeditor.com into sites/all/libraries by accident. Instead, make sure the "ckeditor" download is actually at sites/all/modules/ckeditor/ckeditor.

Don't know if this can help, but I am using CKeditor 4.5.3 (but not Drupal ...) and was wondering how to not have those width and height automatically after an image selection.
After a few breakpoints, I managed to find an option :
config.image_prefillDimensions = false;

Hope it helps !

Thanks @brice-t, this pointed me to the right direction:
config.image2_prefillDimensions = false;
since I'm using the image2 plugin with ckeditor 4.5.4

My solution, thanks to @brice-t, doesn't hack any contrib library, I've just used an alter function.
I'm using:
- CKEditor 4.6.1.580bcaf
- Wysiwyg: 7.x-2.3
- IMCE: 7.x-1.10

and my alter function is:

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function my_module_alters_wysiwyg_editor_settings_alter(&$settings, $context) {
  // Determines whether dimension inputs should be automatically filled
  // when the image URL changes in the Image plugin dialog window.
  // @see http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-image_prefillDimensions
  $settings['image_prefillDimensions'] = false;
}

Recently I have downloaded ckeditor 4.8.0 with "Enhanced image" which is called "image2" , and try to insert image inside the ckeditor , everything is ok .

Responsive images works well for me .

1- download ckeditor 4.8.0 full edition with "Enhanced Image"
2- unzip it to the ckeditor inside library folder(sites/all/library)
3- go to the content and edit a node
4- insert image
5- in the image property dialog box

don't set width and height

.

Done !

Hello,

I have a question which I think is to do with is topic. Please correct me if not.

I would like to be able to make images that are uploaded to the body in ck-editor responsive with a "img-responsive" class that is provided by the the that I am using (Boostrap). This would make my users life so much easier as currently we have to go into source and add the class to figure and width 100% to the image.

This is what the result looks like in source :

<img alt="This is the image that I browsed" class="img-responsive" data-align="center" data-caption="This is an image of a thing that is interesting" data-entity-type="file" data-entity-uuid="aef36450-8277-4321-8801-05c36a9156d6" src="/sites/default/files/inline-images/948x457.png" style="width : 100%" />

This is turn renders the folowing html in the page :

<figure role="group" class="img-responsive align-center">
  <img alt="This is the image that I browsed" data-entity-type="file" data-entity-uuid="aef36450-8277-4321-8801-05c36a9156d6" src="/sites/default/files/inline-images/948x457.png" style="width : 100%">
  <figcaption>This is an image of a thing that is interesting</figcaption>
</figure>

I am wondering of there is a configuration for CKeditor or image upload that could allow the user to just say "I want this image to be responsive" and add the apporpriate class?

I've been testing things and with the theme I am using "img-responsive" does work if you put the class on the image but don't add the caption. So it appears that when the page is rendered the class is moved up form the <img> tag to the <figure> tag. Can Anybody explain to me why it does this?

Thankyou for your help

Hi, I see this solution for making Images responsive: https://gist.github.com/fabiomaggio/c2f4b84756cb4d82c0ae
but where to insert this code within drupal CKeditor please?

Thanks for your reply in advance!
Greetings, Martijn

Hi, I am using CKEDITOR without Wysiwig module. I tried this custom module solution (Comment#14) with information from https://www.drupal.org/project/ckeditor/issues/1968600

<?php
/**
 * Implements hook_ckeditor_settings_alter().
 */
function MYMODULE_ckeditor_settings_alter(&$settings) {  <==== MYMODULE is custom_responsive_ckeditor.module for me.
  // Remove the width and height from images within Ckeditor
  // Determines whether dimension inputs should be automatically filled
  // when the image URL changes in the Image plugin dialog window.
  // @see http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-image_prefillDimensions
  $settings['image_prefillDimensions'] = false;
}

This alter is now inside Ckeditor drupal module. But I still see width and height attributes around my images within Ckeditor edit window. Do I do something wrong?

greetings and thanks for your reply in advance, Martijn