Stopping WYGWAM from assigning dimensions to images

Question

Is it possible to stop WYGWAM from putting dimensions on images as inline styles. We want the images to be responsive.

Thanks for any advice.

Answer 1

You need to create a custom config file for CKEditor that redefines how HTML is generated for images. Create a JavaScript file called something like 'ckeditor_config.js' and then set Wygwam to use it. You can do this by adding an advanced setting to your Wygwam editor configuration. Add the 'customConfig' setting and enter the path to the JavaScript file you just created. It will look like:

/javascripts/ckeditor_config.js

Enter the following code into the config file. The code is from the CKEDITOR - prevent adding image dimensions as a css style question on Stackoverflow. I've modified it slightly, so that the dimensions aren't added as attributes on the image.

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;
            }
        }
    });
});

Answer 2

Following on from Aelvan's answer here is the code I use to automatically resize images in Wygwam fields and remove the dimensions. It also stops them adding stupidly large images. It requires CE Image, but why wouldn't you have that installed anyway?

{exp:ce_img:bulk max="300" crop="no" allow_scale_larger="no" add_dims="no" attributes='style="float: right; margin-left:2%;"'}
{wygwam_field name}
{/exp:ce_img:bulk}

Answer 3

For responsive websites, I generally have had better luck defining separate fields for images. It gives you better control than letting people include images and other media directly in WYSIWYG fields, especially with RWD.

Back to your question, I believe it can be done relatively easily at the CK Editor level, not in Wygwam. Here is a post on stackexchange you can inspire yourself from. Basically you have to use CK Editor's Data Processor and HTML Parser filters. Just a bit of Javascript to write. Not really complicated.

EDIT: Seeing what Dylan posted, you could also just remove the style attribute altogether, if all you need is a bare img tag.

    CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // Remove style attribute from images
                if (element.name == 'img') {
                    delete element.attributes.style;
                }

                return element;
            }
        }
    });
});

Answer 4

I don't think it's possible to do in WYGWAM itself. But you can use the CE Image bulk tag and/or EZ Image Resize to fix this in your templates. And you have the added benefit of being able to set a maximum width/height to save filesize.

Answer 5

As long as your uploaded image isn't too big then you can set the height and width to 100%. Seems to work well for me!

Answer 6

There is a rather ugly UX issue with completely removing the style property.

The user gets confused since the dimensions are there to set and since it's a WYIWYG editor rightfully expects some correlation between his editing and the final layout, yet we take that away.

Even worse we prevent the user from setting image sizes completely.

A common issue with users is that they have no concept of image preparation. So they are not going to use Photoshop or some other tool to properly size, crop, color correct, etc their images.

They go into Wygwam like they go into Word and start messing things up.

So the proper solution is one where we obey the sizes they set as long as they don't exceed the parent element's sizes - in other words they stay in control but we prevent the layout from falling apart when - only when - their size exceeds the parent element's size.

this inline code:

style="width:530px; heigt:320px;"

should become like this:

style="max-width:530px; max-height:320px; width:100%; height:auto;"

instead of the complete removal of the whole style attribute.

I run a function after the page load that replaces the inline style attribute.

function replaceStyle() {
var imageStyle = $(this).attr('style');
imageStyle = imageStyle.replace('width', 'max-width');
imageStyle = imageStyle.replace('height', 'max-height');
imageStyle = imageStyle + ' width:100%; height:auto;';
$(this).removeAttr('style').attr('style', imageStyle);
}

$('img').each(replaceStyle);

but obviously it'd be better to implement this idea in a CKEditor custom_config.js, or better yet if CKEditor would use this idea by default but that's beyond my Javascript skills.