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 () {

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@@" 
    (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.