| WYSIWYG |

Image size behaviour in CKEditor

With CKEditor 4.6, we changed the behavior of the CKEditor image size management.

In older versions, it was possible to reset the display width and height of an image manually. Unfortunately, CKEditor did not only add width="x" height="y" attributes, but furthermore set also inline styles (style="width:x px; height:y px"), so the images appeared always in the manually added size. This breaks responsive web design, because you are not able to set the image according to the real display width/height, and therefore we decided to remove the image size styles.

To show images in a certiain size, please use classes. An example how to do this can be found in most latest templates, e.g. in the editor.css and (if necessary) the frontend stylesheet there are class definitions like this:

img.picfull {width:100%; height:auto;} img.pic2left {float:left; width:49%; margin: 3px 1% 2px 0; height:auto;} img.pic2right {float:right; width:49%; margin: 3px 0 2px 0.5%; height:auto;} img.pic3left {float:left; width:32%; margin: 3px 1.5% 2px 0; height:auto;} img.pic3right {float:right; width:32%; margin: 3px 0 2px 0.3%; height:auto;} img.pic4left {float:left; width:24%; margin: 3px 1% 2px 0; height:auto;} img.pic4right {float:right; width:24%; margin: 3px 0 2px 0.5%; height:auto;}

(code by © Chio / beesign.com)

So that means, simply add one of the classes above in the Image / Advanced / Stylesheet classes dialogue of the CKE, and your image will be displayed accordingly.

If this does not work for you nevertheless, you can restore the former behavior by simply removing the following lines from the /modules/ckeditor/ckeditor/config.js:

CKEDITOR.on('instanceReady', function (ev) { ev.editor.dataProcessor.htmlFilter.addRules( { elements: { $: function (element) { // Remove width and height style rules from images if (element.name == 'img') { var style = element.attributes.style; if (style) { // Get the width from the style. var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style), width = match && match[1]; // Get the height from the style. match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style); var height = match && match[1]; if (width) { element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, ''); } if (height) { element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, ''); } } } if (!element.attributes.style) delete element.attributes.style; return element; } } }); });

Please note that if you are using the developer edition of CKE, you have to remove the lines from modules/ckeditor_dev/wb_config/wb_config.js too.