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 “Sitecore 7.5 highlights”

Sitecore 7.5 highlights

MongoMemeHi, welcome to my Sitecore 7.5 highlights.

This blog post is intended for those of you who would like a high level overview of Sitecore 7.5, need a reminder or have not had the time to investigate this release. At the bottom of this post is a list of useful resources related to Sitecore 7.5.

Highlights

  1. Sitecore 7.5 = Sitecore 7.2 + xDB.
  2. xDB (Experience Database) is the new name for the Analytics database.
  3. New Contact entity allows tracking an individual across devices, visits and cookies.
    • Requires some sort of mechanism of identifying the user( login, form submission, checkout etc)
  4. New scalable analytics data architecture
    • Session DB (private and shared) (inProc, Sql or Mongo)
    • Collection DB i.e. xDB (Mongo)
    • Reporting DB (SQL)
  5. Experience profile (xFile) i.e the contact
  6. xDB Cloud
    • Sitecores cloud hosting offering for xDB
    • Pricing based on numbers of stored contacts.
  7. Mongo DB
    • Data stored in documents not tables
    • Collections of documents rather than tables with rows.
    • Scales horizontally not vertically
    • Data stored in BSON binary Json
  8. Upgrade key points
    • Analytics API has many small changes
    • Migration of data from Analytics DB to xDB i.e. SQL to Mongo
    • Review of hosting structure to suit xDB.
  9. Other name changes:
    • Customer Engagement Platform = Sitecore Experience Platform (Sitecore XP)
    • Digital Marketing System (DMS) = Experience Marketing
    • Email Campaign Manger = Email Experience Manager
    • Engagement Analytics = Experience Analytics
    • Adaptive Print Studio = Print Experience Manger
    • Engagement Automation = Experience Automation

Sitecore 7.5 Resources