Views: 9420
Number of votes: 2
Average rating:

Automatically change images in a responsive design to scale

A lot of new sites uses responsive design. The key feature with this of course that the web page scale to the current view port of the device a user is using.  Images and other elements are often set to width:100% in the css. The problem that we then have to solve is to return to the user a images that is in the correct size in pixels.

I have wrote a concept around this based on the current alloy template site.

First of all I want to change all images that are returned from a request. I wrote my self a module ChangeImageSource  that I can add in the master page like this.

MasterPage.master
<asp:ContentPlaceHolder ID="MainContentRegion" runat="server">
    <div id="MainBodyArea">
        <Itera:ChangeImageSource runat="server" ID="ChangeImageArea">
            <asp:ContentPlaceHolder ID="MainBodyRegion" runat="server">
                <div id="MainBody">
                    <AlloyTech:MainBody runat="server" />
                </div>
            </asp:ContentPlaceHolder>
        </Itera:ChangeImageSource>
    </div>
    <div id="SecondaryBodyArea">
        <Itera:ChangeImageSource runat="server" ID="ChangeImageSource1" AddBox="border">
            <asp:ContentPlaceHolder ID="SecondaryBodyRegion" runat="server">
                <div id="SecondaryBody">
                    <EPiServer:Property PropertyName="SecondaryBody" EnableViewState="false" runat="server" />
                </div>
            </asp:ContentPlaceHolder>
        </Itera:ChangeImageSource>
    </div>
</asp:ContentPlaceHolder>

This module replace every images inside its content with a reference to a empty images, and add the original image in a new attribute called orgsrc.

<img orgsrc="/PageFiles/5/Desert.jpg" alt="" 
src="/Itera.ResponsiveResize/ZeroSize.png" class="scaleImage">

The code that replace all images in a given tag is done like this using HtmlAgilityPack

protected override void Render(HtmlTextWriter writer)
{
    if (this.Page.Request["dontChangeImages"] == null)
    {
        StringBuilder sb = new StringBuilder();
        StringWriter sw = new StringWriter(sb);
        HtmlTextWriter htw = new HtmlTextWriter(sw);
        base.Render(htw);

        string content = sb.ToString();
        //writer.Write("content length=" + content.Length);
        HtmlDocument doc = new HtmlDocument();
        doc.LoadHtml(content);
        var images = doc.DocumentNode.SelectNodes("//img[@src]");
        if (images != null)
        {
            foreach (HtmlNode image in images)
            {
                HtmlAttribute src = image.Attributes["src"];

                image.Attributes.Add("orgsrc", src.Value);
                src.Value = "/Itera.ResponsiveResize/ZeroSize.png";
                if (image.Attributes["width"] != null)
                {
                    image.Attributes.Remove("width");
                }
                if (image.Attributes["height"] != null)
                {
                    image.Attributes.Remove("height");
                }
                if (image.Attributes["class"] == null)
                {
                    image.Attributes.Add("class", AddClass);
                }
                else
                {
                    image.Attributes["class"].Value = image.Attributes["class"].Value + " scaleImage";
                }
                if (!string.IsNullOrEmpty(AddBox))
                {
                    var newNode = HtmlNode.CreateNode("<div class='" + AddBox + "'>" + image.OuterHtml+ "</div>");

                    image.ParentNode.ReplaceChild(newNode, image);

                }
            }
        }
        writer.Write("<div id='" + UnikID + "'>");
        writer.Write(doc.DocumentNode.OuterHtml);
        writer.Write("</div>");
        writer.Write("<div id='Log" + UnikID + "'></div>");
               
    }
    else
    {
        base.Render(writer);
    }
}

Then the module add some JavaScript that after the page is loaded find all images in the current zone and uses JQuery to find the current width in pixels and change the image source to a reference to a scaled images with the correct width. And if the pages is resized it will change the images. To save some cpu, it will use a images that is round up to the next hundred. The actually resizing of the pictures can be done with a lot of different te4chinces , but this demo uses ImageResizer

$(document).ready(function () {
    $('#133d8cb8fb224834bbfdde298adbec25 img').each(function (i) {

        if (!$(this).attr('orgsrc')) {
            var img = $(this).attr('src');
            $(this).attr('orgsrc', img);
        }
        ResizeImageWith100Procent133d8cb8fb224834bbfdde298adbec25($(this));
    });
});

$(window).resize(function () {
    $('#log133d8cb8fb224834bbfdde298adbec25').append('<div>resize finished</div>');
    $('#133d8cb8fb224834bbfdde298adbec25 img').each(function (i) {
        if ($(this).attr('orgsrc')) {
            ResizeImageWith100Procent133d8cb8fb224834bbfdde298adbec25($(this));
        }
    });

});
function ResizeImageWith100Procent133d8cb8fb224834bbfdde298adbec25(obj)
{
    var orgsrc = obj.attr('orgsrc');
    var width = obj.width();

            width /= 100;
            width = Math.ceil(width);
            width *= 100;
            if (obj.attr('src').indexOf('width_' + width) == -1) {
                obj.attr('src',  orgsrc + '?width=' + width );
               
            }
}
image
<img orgsrc="/PageFiles/5/Desert.jpg" alt=""
src="/PageFiles/5/Desert.jpg?width=500" class="half100Procent scaleImage"> <img orgsrc="/PageFiles/5/product3Prev.png" alt="prevproduct1"
src="/PageFiles/5/product3Prev.png?width=200" class="border scaleImage">
image
image
<img orgsrc="/PageFiles/5/Desert.jpg" alt=""
src="/PageFiles/5/Desert.jpg?width=400" class="border scaleImage">
image
<img orgsrc="/PageFiles/5/product3Prev.png" alt="prevproduct1"
src="/PageFiles/5/product3Prev.png?width=400" class="border scaleImage">

What you need to do is to unzip the file and add the dll’s from the project to your bin folder, and

change the web.config to use ImageResizer.

Then you need to add the web control in the master page

 

Have added a working web.config and a working master.page from the

alloy project along with the zip of the project

Download here

    (By Frederik Vig , 14 August 2012 20:44, Permanent link)

    Won't this result in a lot of unnecessary requests to the server? First for the the empty image and then again after you replace it with JS with the new image. Also this won't work without JS and search engines won't be able to index the images.

    Not an easy problem to solve responsive images :)

    (By Anders Hattestad , 14 August 2012 20:56, Permanent link)

    The empty picture could be resolved using css and a bas64 encoded images.
    It will of course not work without JS :)

    Its also just a consept, and one could return the normal images first, than change it after

    (By Alexander Haneng , 14 August 2012 23:26, Permanent link)

    There really isn't a good solution for responsive images at the moment. Waiting for CSS Bandwidth Media Queries.

    (By Anders Hattestad , 14 August 2012 23:42, Permanent link)

    Not sure I really agree with you on this Alexander. This consept shows that you can replace images after they are loaded based on css % sizes.
    What more to the mix will CSS Bandwith Media Queries add?

    (By Johan Kronberg , 15 August 2012 11:40, Permanent link)

    I like! But the src-attributes in markup should contain the smallest version.

    (By Anders Hattestad , 15 August 2012 12:13, Permanent link)

    That is of course easy to do :)

    One could use a small images that will be displayed enlarged, and after page load the images will be replaced with an correct image

    (By Anders Hattestad , 17 August 2012 09:42, Permanent link)

    For futher reference
    W3C Launches Responsive Images Community
    http://filamentgroup.com/lab/w3c_responsive_imgs_group/
    http://www.w3.org/community/respimg/
    https://github.com/scottjehl/picturefill
    https://github.com/filamentgroup/Responsive-Images

    Which responsive images solution should you use?
    http://css-tricks.com/which-responsive-images-solution-should-you-use/

    Responsive IMGs — Part 1
    http://blog.cloudfour.com/responsive-imgs/

    Responsive IMGs Part 2 — In-depth Look at Techniques
    http://blog.cloudfour.com/responsive-imgs-part-2/

    (By Kristofer Månsson , 20 August 2012 14:26, Permanent link)

    Just one thing about the javascript. Its better to use a event listener on window.load instead of document.ready since document.ready fires when html is loaded, not content.

    (By Pelle Bjerkestrand , 20 August 2012 14:49, Permanent link)

    Data-attributes are perfect for storing URLs to images with different resolutions (until there is a real/native implementation, of course): http://jsfiddle.net/pellebjerkestrand/B2C46/

    The src attribute can be filled with the smallest image or, if you for example put the viewport width in a cookie, the most appropriate image for the view.

  Please login to post a comment