0 comments on “Responsive Images and Sitecore”

Responsive Images and Sitecore

responsive

By February 2018 Australians already spent more than double the amount of time on smartphones than on their desktop1. With the greater variety of devices consumers use to access sites, it’s important to serve images which appropriately cater to those devices.

“Responsive images” describes a technique where an image is served to the browser depending (usually) on the width of the browser window. Desktop browsers would generally receive a larger version of the image with a greater download size, and mobile devices a smaller version better suiting the smaller display size of the device and being quicker to download.

One of our clients has a Sitecore 7.2 site which uses both MVC and legacy code in ASP.NET WebForms. The legacy code had multiple ways of handling image resizing, mostly inline HTML hard coding of dimensions. My aim was to provide a single C# library function that could work both with legacy code and new development and allow consistent results.

imagetag

In the newer part of the website, the designer had used a JavaScript based image processor which would allow the browser to determine the optimal resolution of the image required and only request an appropriately sized image from the server.

As you can see from the above HTML sample each image tag has multiple URLs in the data-srcset attribute. From this list the JavaScript library determines the optimal size for the image, based on device and browser size, and only requests that version of the image from the server.

Sitecore provides a tool to provide the resized image files based on the request URL and also caches these resized images. We created a helper function that could take a Sitecore image as input and return all of the URLs representing valid image sizes as a delimited string. The valid sizes are determined by a setting in a config file. This return value is used to populate the data-srcset attribute of our img.

ImageCodeSample

Sitecore 7.5 and beyond require a hash code to be added to the URL2 to prevent Denial of Service attacks by making numerous requests for images of various sizes. Because our new helper function now provides a centralised and configurable way to deliver the required URL string, this will be quite easy to change after the upgrade.

References

  1. http://www.nielsen.com/au/en/press-room/2018/february-2018-digital-ratings.html
  2. http://www.seanholmesby.com/images-not-resizing-in-sitecore-7-5-sitecore-8-0/
0 comments on “Resolve RTE responsive image issue”

Resolve RTE responsive image issue

PIC-Responsive_Web_DesignRecently I found an issue with the Sitecores rich text editor causing responsive images to not size correctly. Whenever an image is edited in Sitecores Rich Text Editor (Even if no height or width has been touched) then it adds:

style="height: 123px; width: 123px;"

Before edit:

<img alt="" height="123" width="123" src="~/media/123" />p>

After edit:

<img alt=""  
src="~/media/123;h=123&w=123" style="height: 123px; width: 123px;" />p>

The problem is that the style height and width added by Sitecore messes with the responsiveness of the image.

Solution:

The best way to remove those attributes in a consistent fashion is to strip the attributes on render of the image by overriding this default pipeline: Sitecore.Pipelines.RenderField.GetImageFieldValue.

Implementation:

First add the following class to your solution:

namespace Custom.Business.SC.Extensions.Pipelines.RenderField
{
    using System;

    using HtmlAgilityPack;

    using Sitecore;
    using Sitecore.Diagnostics;
    using Sitecore.Pipelines.RenderField;

    /// <summary>Class that renders a rich text field with removed image dimensions.</summary>
    public class GetFieldValue : Sitecore.Pipelines.RenderField.GetFieldValue
    {
        /// <summary>The process method.</summary>
        /// <param name="args">The render field arguments.</param>
        public new void Process(RenderFieldArgs args)
        {
            base.Process(args);

            // Do not modify output if the field is not a rich text field,
            // or if the page is in page editor mode
            if (args.FieldTypeKey != "rich text" || string.IsNullOrEmpty(args.FieldValue) || Context.PageMode.IsPageEditorEditing)
            {
                return;
            }

            // stripping dimension attributes from images
            Profiler.StartOperation("Stripping dimension attributes from image field: " + args.FieldName);
            args.Result.FirstPart = this.StripImageDimensions(args.Result.FirstPart);
            Profiler.EndOperation();
        }

        /// <summary>The strip image dimensions.</summary>
        /// <param name="text">The text.</param>
        /// <returns>The <see cref="string"/>.</returns>
        private string StripImageDimensions(string text)
        {
            if (string.IsNullOrWhiteSpace(text))
            {
                return text;
            }

            var outText = text;
            try
            {
                var doc = new HtmlDocument();
                doc.LoadHtml(outText);
                this.StripAttribute(doc, "width");
                this.StripAttribute(doc, "height");
                this.StripAttribute(doc, "style");
                outText = doc.DocumentNode.WriteContentTo();
            }
            catch (Exception)
            {
            }

            return outText;
        }

        /// <summary>The strip attribute.</summary>
        /// <param name="doc">The doc.</param>
        /// <param name="attribute">The attribute.</param>
        private void StripAttribute(HtmlDocument doc, string attribute)
        {
            // HtmlAgilityPack returns null instead of an empty collection when the query finds no results.  
            var nodes = doc.DocumentNode.SelectNodes(string.Format("//img[@{0}]", attribute));
            if (nodes == null || nodes.Count.Equals(0))
            {
                return;
            }

            foreach (var node in nodes)
            {
                node.Attributes[attribute].Remove();
            }
        }
    }
}

Patch in the following config:

<?xml version="1.0" encoding="utf-8" ?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
            <sitecore>
              <pipelines>
                <renderField>
                  <processor type="Custom.Business.SC.Extensions.Pipelines.RenderField.GetFieldValue,     Custom.Business"
                    patch:instead="*[@type='Sitecore.Pipelines.RenderField.GetImageFieldValue, Sitecore.Kernel']" />
                </renderField>
              </pipelines>
            </sitecore>
    </configuration>