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.

6 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
  4. By releasing as open source we are also able to show by example and allow you to extend as you desire.learn web deisgn

    ReplyDelete
  5. Here's How You Can Hire A Home Cleaning Support For The First Time

    Two Bettys Green Washing Service provides top quality eco-friendly cleaning assistance. BA HOME CLEANING is preferable to the common cleaning lady you will discover on Craigslist. If you don't think its fair to pay these people for what they do, then DON'T شركة تنظيف شقق بالرياض DO IT! Professional services: Each franchisee is definitely professionally trained and will always do a quality job. To begin with your generalizing and stereo typing of individuals working in this industry is clearly based on ignorance and not fact.

    Need a spotless living space without so much as a speck of dust? A شركة تنظيف منازل شرق الرياض and maid services pro will help you decide if there are extra jobs you need done, such as refrigerator cleaning, and how many hours of help you will have to get your house ship shape. Just reach out if we can do anything to help make sure your cleaning is successful. I have been using Marin House Cleaning for a number of years.

    If they were a private nurse, I doubt they would earn that little, as you are comparing apples with oranges - a cleaner working in an office building for a company that supplies all materials and covers overheads is different شركة تنظيف منازل بالرياض from a cleaner cleaning your house or running their own business. View Open Housekeeper Jobs Near You - View job postings and details about each position, then contact the homes or businesses that most interest you.

    Right now, because my customers work very difficult to cover my services, I really do extra issues for them, occasionally. Our washing formulas are created in-house using 100 % natural ingredients صيانة مكيفات such as for example vinegar and baking soda. Arrived on time and did good work. That's also why I love BA HOME CLEANING whose website obviously use each item within their online estimate device!

    All my homes are normally "ready" for me, & if not, I work arpund items or let items go. I work quickly, never taking breaks nor do I talk on mobile phone as I work. If you don't like how someone cleans your house, either تنظيف المسابح البلاستيكيه do it yourself or find someone that will do it for what you need to pay. We've gone to great lengths to ensure that you and your home are completely safe and secure when you choose Mopify as your home cleaning service.

    ReplyDelete
  6. Would like to compliment the writer for writing this divine article
    responsive wordpress website

    ReplyDelete