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.
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 :
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.
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.