Stopping WYGWAM from assigning dimensions to images

11

8

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.

Mike Dexter

Posted 2013-04-05T07:48:25.197

Reputation: 564

Answers

19

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

Dylan

Posted 2013-04-05T07:48:25.197

Reputation: 979

This is briliant. Adding this removed all tags in early entries - didn't even need to open and resave old entries. Thank you. – CreateSean – 2015-05-25T16:26:33.073

3

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}

Paul Frost

Posted 2013-04-05T07:48:25.197

Reputation: 365

Great suggestion. :) – Nathan Pitman – 2015-09-24T14:25:23.413

2

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

Jérôme Coupé

Posted 2013-04-05T07:48:25.197

Reputation: 2 483

0

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!

Steven Hambleton

Posted 2013-04-05T07:48:25.197

Reputation: 26

0

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.

LucasCranac

Posted 2013-04-05T07:48:25.197

Reputation: 38

0

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.

aelvan

Posted 2013-04-05T07:48:25.197

Reputation: 317

This isn't what he meant. What he means is that Wygwam adds style="width: 80px; height: 40px;" to images. – Steven – 2013-04-05T11:56:32.090

Yes, I know. And the CE Image bulk tag removes that. And adding add_dims="no" to it also removes the width and height attributes if necessary. – aelvan – 2013-04-10T09:41:48.600