Responsive images

Jul 2, 2015 at 12:18 AM
What, if anything, is the best way to include "responsive" coding when inserting images
Jul 2, 2015 at 1:03 AM
Remove the width and height when inserting the image. I do it from the image dialog box. After selecting the image and it populates the width and height, just remove both. If your skin is responsive it should work fine.
Jul 2, 2015 at 2:39 AM
Yes, I appreciate that.

What I want is for the CKEditor to do this work for me. This site is managed by somewhat non-technical users, so I don't want them to have to be editing HTML. I need to modify the editor to NOT insert height and width, either with a height= construct or a style construct.
Jul 2, 2015 at 3:24 AM
I agree. I would love to see this as an option in settings.
Jul 9, 2015 at 10:21 AM
Try the following solution Create a custom js file and paste the js code ..
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // Output dimensions of images as width and height
                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;
            }
        }
    });
});
then save it to any file you want and upload it to the Home folder of your dnn portal by default "../Portals/0" You need to upload it via the dnn file manager, or sync the folder after you upload it.

To make sure the file shows up js extensions needs to be set as allowed file extension in the host settings.

Then you can open the Editor Provider Settings under Custom JS File you can select the js file. Then Clear the browser cache reload the editor and width and height style properties from the img tags are being removed.
Jul 9, 2015 at 2:58 PM
Thank you!