Tuesday, 5 August 2014
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 :
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 :
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.</p> <p>This is where the CID TBB
TBB will generate the appropriate CID URI in the web application when the
Component Template is published.</p> <p>Let’s say you have the following
img element in your Component Template :
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 :
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.