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/