Prevent Width\Height styles when resizing image in RTE

Question

When inserting Images into RTE content, images are rendered as this:

<img src="-/media/AS15F536E453B97C2GJI6901F55GG.ashx?h=857&amp;w=1523" height="857" width="1523" />

This works fine with responsive design. However, if I resize the image inside the RTE the image tags gets rendered as this:

<img style="height: 857px; width: 1523px;" src="-/media/AS15F536E453B97C2GJI6901F55GG.ashx?h=857&amp;w=1523" height="857" width="1523" />

(adding the style="width...;height...")

This prevents the images from working properly in responsive cases.

If I remove the styles manually, everything remains fine. So how can I prevent the RTE from adding these styles?

Sitecore 8.1

Answer 1

Out of the box, you cannot prevent this. It's just the way the RTE works in Sitecore.

Fortunately you can work around this issue, but it's a fairly involved process. It involves:

• Parsing the RTE html for <img> elements with a style attribute, then removing width and height
• Optionally hooking into the Sitecore renderField pipeline and run the above mentioned parser on fields of type rich text
• Optionally hooking into the <saveRichTextContent> pipeline and run the above mentioned parser. I prefer this option.
• Patching in your new modifications.

Eric Stafford has a complete writeup of this process on: Handling Images on a Responsive Sitecore Implementation

Answer 2

You could tie into the saveRichTextContent Pipeline. You could then parse the html that has been entered, and find all the images and strip out the width and height, which is a good practice if you have a responsive site.

Patch:

<configuration>
    <sitecore>
        <pipelines>
            <saveRichTextContent>
                <processor type="Component.Pipelines.FormatImagesRichText, Component"></processor>
            </saveRichTextContent>
        </pipelines>
    </sitecore>
</configuration>

Then the source of the pipeline would look like this:

namespace Component.Pipelines 
{
    public class FormatImagesRichText
    {
        public void Process(SaveRichTextContentArgs args)
        {
            args.Content = FormatImages(args.Content);
        }

        private string FormatImages(string content)
        {
            var doc = new HtmlDocument();
            doc.LoadHtml(content);

            if (doc == null || !doc.DocumentNode.InnerHtml.Contains("img"))
                return content;

            foreach (var img in doc.DocumentNode.Descendants("img"))
            {
                // Remove Image Width/Height Information
                HtmlNode imgNode = img;
                imgNode.Attributes.Remove("height");
                imgNode.Attributes.Remove("width");
            }

            return doc.DocumentNode.OuterHtml;
        }
    }
}

Edit: As an added note, if you are using a frontend system, such as Bootstrap, you can also add any relevant classes as follows:

foreach (var img in doc.DocumentNode.Descendants("img"))
{
    // Remove Image Width/Height Information
    HtmlNode imgNode = img;
    imgNode.Attributes.Remove("height");
    imgNode.Attributes.Remove("width");

    if(imgNode.Attributes.Any(a => a.Name == "class"))
    {
        imgNode.Attributes["class"].Value += " img-fluid";
    }
    else
    {
        imgNode.Attributes.Add("class", "img-fluid");
    }
}