Tuesday, 5 August 2014

Contextual Image Delivery - JavaScript and TBB Open Source Integrations.

I'm really happy to share with you today a couple of Contextual Image Delivery (CID) integrations that we've made available on github. Both of these help with generating CID URLs - i.e. URLs to images that have been optimised for the current user. By releasing as open source we are also able to show by example and allow you to extend as you desire.

Image Optimisation with JavaScript

First, let's look at the JavaScript CID library. The readme covers much of this, but in summary, this JavaScript library demonstrates how you can make use of CID to optimise images purely on the client side, for example enhancing your RWD usage. Let's say you have an img on your page like :

<img src="http://www.mysite.com/my/image.jpg" 
    data-cid-rule="/scale/200" />

Where this data-cid-rule may have been set dynamically on the client side. Read Transforming Images in the CID documentation for details on the CID rules supported. You can then convert all such img elements to use CID URLs with :

<script type="text/javascript" src="js/context-image.min.js"></script>
<script type="text/javascript">
window.onload = function () {
    Context.optimize();
}
</script>

In this example this would convert the img element above to :

<img src="/t/scale/200/http/www.mysite.com/my/image.jpg" />

You could combine this with libraries like Unveil or Lazy Load to ensure that only the optimised version of the image is loaded - as opposed to the original which would add to the general page weight of the page.

Image Optimisation in Component Templates via the CID TBB

Now you can also do this technique on the server side - see example using TCDL tags - or even just straight C# / Java in your web application, getting the context properties from the ADF claim store. However, one thing you will find is that if you tried to use TCDL tags directly in the img src attribute of your Tridion Component Template. If you do this then the Link Resolver Template Building Block (TBB) will not map the URI of the media to a physical URI in your web application when the template is published.

This is where the CID TBB comes into play. Just like the JavaScript image URI manipulation this CID TBB will generate the appropriate CID URI in the web application when the Component Template is published.

Let's say you have the following img element in your Component Template :

<img src="@@Component.Fields.BannerImage@@" 
    data-cid-rule="/scale/<tcdl:eval 
    expression='browser.displayWidth'/>/source"
    (other HTML arguments) />

With the TBB Installed and configured using the SDL Tridion Template Builder, and assuming that @@Component.Fields.BannerImage@@ gets resolved to /my/image.jpg by the Link Resolver then this img element will be converted to the following when the template is published :

<img src="/t/scale/<tcdl:eval 
    expression='browser.displayWidth'/>/my/image.jpg" />

When the template is rendered in the web application then the eval expression would be evaluated for the given context. Note that if you are publishing a JSP or .NET environment then the tcdl:eval element would be published to either a JSP tag or server control respectively.

Thanks and if you've got any queries please get in touch.

3 comments:

  1. Nice, so we have "bake" on publish and "fry" in delivery (even client-side) options.

    I've seen my colleagues come up with an approach, but thoughts or recommendations on "SEO friendly" URLs? We were discussing if customers might want to avoid the parameters (e.g. scale/200 in URLs, so maybe some type of routing rules?

    Good point on how to publish DCPs--REL become even more relevant for contextual web development. :-)

    I was going to point out this TRex question, but looks like you already got it. Thanks, Ian!
    http://tridion.stackexchange.com/a/7416/46

    ReplyDelete
  2. The URLs are designed to be edge cache friendly - hence why they have the parameters in the URL. I don't think image URL naming makes much of an SEO difference - see http://webmasters.stackexchange.com/questions/36434/what-should-filenames-and-urls-of-images-contain-for-seo-benefit - however you can rename the image in the URL, e.g. /scale/100x100/context.sdl.com/img/snow.jpg/to/water-tower-in-reading-with-snow.jpg, which does help if the image was to be downloaded (e.g. for a wallpaper).

    ReplyDelete


  3. افضل شركة نقل اثاث بالمدينة المنورة تساعدك على نقل اثاثك بامان فلا داعى للقلق مع افضل شركة نقل اثاث بجدة

    عزيزى العميل انت من محبى التنقل باستمرار بالتالى انت بحاجة ماسة وضروية الى الاستعانة بالمختصين في نقل العفش خاصة ارخص شركة نقل اثاث بالرياض لان الاستعانة باى من عمالة الشوارع الغير مدربة والتي لا تمتلك خبرة كافية في نقل العفش او الحفاظ علية وليس هذا فقط فقد يؤدى الاستعانة بعمالة الشوارع الى حدوث حالة فقدان وتكسير للاثاث بالتالى التاثير الضار عليك عزيزى العميل

    لا تقلق مطلقاً الان بشأن نقل اي منقولات خاصة بك طالما استعنت بشركة الاول لـ نقل الأثاث في الرياض وخارج الرياض فنحن ليس الوحيدون ولكننا متميزون عن اى مؤسسة أخرى داخل وخارج الدمام وشهرتنا كافضل شركة نقل عفش بينبع
    نقل اثاث بجدة

    ReplyDelete