In a previous post, I explained how you can use the DD4T.Web library to serve binary files (like images, documents, etc) directly from the broker database. This was done with the BinaryDistributionModule.

There is an additional benefit to reap from this: the BinaryDistributionModule is able to resize your images on the fly. Here’s how.

Let’s say that you have a JPG image published to the broker database, with the URL  /images/ouroffice_tcm3-4954.jpg. If you use a browser to request this image, the binary data is extracted from the broker database by the module, and stored on the file system. You should see something like this:

Now when you request the URL /images/ouroffice_tcm3-4954_w150.jpg, this is what you get:

You may be thinking “that’s easy, they simply uploaded a smaller version into Tridion”. But a look at the URL reveals that this cannot be the case: the URI (the ‘3-4954’ bit) is the same, which means that there is only one image in the CMS. Actually, all that’s different between those URLs is the string “_w150” at the end of the filename, right before the file extension.

Substitute for variants

The traditional approach to having thumbnail versions of images is by creating a variant in your template code. But that doesn’t make much sense with DD4T. An implementation using this framework hardly touches Tridion templates at all, and instead focuses completely on the web application. Hence it made sense to implement ‘thumbnailing’ on the web application side as well.

So how does this work in a Razor view? Let’s first look at the typical way to display an image:

<img src="@Model.Fields["image"].LinkedComponentValues[0].Multimedia.Url" />

The Multimedia.Url property contains the (local) url of the image you’re trying to show, e.g.  /images/ouroffice_tcm3-4954.jpg. Somehow we need to insert this ‘_w150’ string into this. Fortunately DD4T offers a helper method which comes to the rescue:

<img src="@Model.Fields["image"].LinkedComponentValues[0].Multimedia.Url.ResizeToWidth(150)" />

When this snippet is requested by the browser, it looks like this:

<img src=" /images/ouroffice_tcm3-4954_w150.jpg" />

Besides ResizeToWidth there is also a ResizeToHeight and even ResizeToWidthAndHeight, which takes two integers as parameters.

A new feature in DD4T is the Web library (DD4T.Web.dll). It contains some functions that are useful in any .NET web site, whether they use MVC or not. It offers – for example – a way to serve binaries (images, PDFs, etc) straight out of the broker database.

Why would you want to do that, might you ask? Of course, Tridion has been used for ages to deliver binaries directly to the file system. Binaries are rarely dynamic in nature, so storing them as static files is actually a good idea!

Well, yes and no. Yes, storing binaries on the file system is great for performance, but it has a big downside: you cannot just plug in a new server into your web farm anymore, since it would not contain these binary files. Also, your developers who are so used to running the entire web app from within their IDE, would miss out on the images if they are only published to a central presentation environment.

If you work with DD4T, that does not mean you MUST serve the binary files from the broker database. It is okay  to serve them from the file system as well!

 

Serving binaries with the BinaryDistributionModule

The DD4T.Web library contains a BinaryDistributionModule. Purpose of this HttpModule is to make sure the requested binary is available on the file system, so IIS can serve it. Here’s how it works:

• If the binary is not on the file system, it is retrieved from the broker database and stored as a file
• If the binary is already on the file system, the timestamp of the file is compared against the last publish date of the binary in the broker database. If the file is stale, it is replaced. If the binary is no longer present in the broker, the file is removed (resulting in a 404, which is what you would expect if you attempt to view a file which has been unpublished).

To configure the BinaryDistributionModule, add the following XML code to the system.webServer node in your Web.config:

<modules runAllManagedModulesForAllRequests="true">
  <add name="BinaryModule" 
       type="DD4T.Web.Binaries.BinaryDistributionModule" />
 </modules>