Sitecore: Remove Height and Width Attributes on Images Using MVC helper

When you render an image using Sitecore MVC field helper, Sitecore retrieves the height and width attribute with the IMG tag.

Example - Sitecore Field helper
@Html.Sitecore().Field("ImageFieldName", item)

The result
<img src="/-/media/images/content/teasers/upstream.ashx?h=242&la=en&w=376" width="376" height="242">

The problem is that Height and Width attributes can override the CSS of the website since they are embedded as inline styles, this will break a responsive UI.

Sitecore is very flexible. We can override this behavior by creating a new pipeline that removes the "height" and "width" attributes, then patch it after GetImageFieldValue pipeline.

This is the code for the pipeline:

public class ImageFieldSizeAttributesRemover  
    {
        public void Process(RenderFieldArgs args)
        {
            if (args.FieldTypeKey != "image")
                return;

            string imageTag = args.Result.FirstPart;
            imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+height\s*=\s*\S+", "$1", RegexOptions.IgnoreCase);
            imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+width\s*=\s*\S+", "$1", RegexOptions.IgnoreCase);
            imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+responsive\s*=\s*\S+", "$1", RegexOptions.IgnoreCase);
            args.Result.FirstPart = imageTag;

        }
    }

Then we need to register the pipeline above.

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">  
  <sitecore>
    <pipelines>
      <renderField>
        <processor
            patch:after="*[@type='Sitecore.Pipelines.RenderField.GetImageFieldValue, Sitecore.Kernel']"
            type="YourAssembly.Pipelines.ImageFieldSizeAttributesRemover, YourAssembly"/>
      </renderField>
    </pipelines>
  </sitecore>
</configuration>

Remove Attributes with certain class
If we want to keep Sitecore works as it is, and remove the size attributes on specific images. We can add a simple logic in the pipeline above to check if the Image has a certain class.

Sitecore MVC Helper will be like this:
@Html.Sitecore().Field("ImageFieldName", item, new {@class = "image-removed-sizes"})

public class ImageFieldSizeAttributesRemover  
    {
        public void Process(RenderFieldArgs args)
        {
            if (args.FieldTypeKey != "image")
                return;

            if (args.Result.FirstPart.Contains("image-removed-sizes"))
            {
                string imageTag = args.Result.FirstPart;
                imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+height\s*=\s*\S+", "$1", RegexOptions.IgnoreCase);
                imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+width\s*=\s*\S+", "$1", RegexOptions.IgnoreCase);
                imageTag = Regex.Replace(imageTag, @"(<img[^>]*?)\s+responsive\s*=\s*\S+", "$1", RegexOptions.IgnoreCase);
                args.Result.FirstPart = imageTag;
            }

        }
    }

Using Glass Mapper
If you are using Glass Mapper, you don't need to worry about the height and width attributes, Glass mapper won't render the attributes by default http://www.glass.lu/Blog/ImageParameters

Sitecore Web Forms
If you want to do the same thing with Sitecore web forms, go and check this link: http://www.mikkelhm.dk/archive/removing-width-and-height-tags-from-fieldrenderer-and-scimage/

Menu