Skip to main content

Handling images and on the fly re-sizing in DD4T

When it comes with DD4T we have plenty of control on the data and we can decided on how we wanted the page to be rendered.
The traditional approach of having difference size of same image is replaced in DD4T to have one single image and generate the thumbnail on the fly. In this approach, we will have only one image published in tridion, and rest will be created on the fly based on the request.

Just by adding below configuration on the web.config modules session will enable this feature
<modules runAllManagedModulesForAllRequests="true">
  <add name="BinaryModule" 
       type="DD4T.Web.Binaries.BinaryDistributionModule" />
 </modules>
The BinaryDistributionModule process the request as below
  1. Process the Binary Request
  2. Check if the file is already in the file system.
    1. If file is available compare the last published date of the binary against the broker.
    2. If the file is updated, update the existing file in the file system.
    3. If the file is removed, delete the existing file in the file system.
  3. If the file is not there in the file system.
    1. Query the broker and create the file on local file system
  4. Deliver the file.

The below Html helper method helps to generate thumbnails as below.
<img src="@Model.Fields["image"].LinkedComponentValues[0].Multimedia.Url.ResizeToWidth(150)" />
<img src="@Model.Fields["image"].LinkedComponentValues[0].Multimedia.Url.ResizeToWidthAndHeight(150,150)" />
This will generate the images as
<img src=" /images/sample_image_tcm4-102_w150.jpg" />
<img src=" /images/sample_image_tcm4-102_w150_h150.jpg" />

The width and height feature has a bug in the framework, you can extract the BinaryDistributionModule and BinaryFileManager Class from the DD4T.Web project and bit customization on the method "private string StripDimensions(string path, out Dimensions dimensions)" will solve the issue, This method can be found in BinaryFileManager.cs. Update this method as in below would work for both width and height.

private string StripDimensions(string path, out Dimensions dimensions)
{
Regex re = new Regex(@"_(w(\d+))?(_h(\d+))?\.");
if (re.IsMatch(path))
{
dimensions = new Dimensions();
var match = re.Match(path);
var dim = match.Groups[2].ToString();
if (!String.IsNullOrEmpty(dim))
{
dimensions.Width = Convert.ToInt32(dim);
}
dim = match.Groups[4].ToString();
if (!String.IsNullOrEmpty(dim))
{
dimensions.Height = Convert.ToInt32(dim);
}
return re.Replace(path, ".");
}
dimensions = null;
return path;
}
Later update the web.config to use the updated custom Binary Module, instead of default one,

Comments

Popular posts from this blog

Localization in Umbraco, Item Page field localization

Umbraco is one of the most deployed Web Content Management Systems on the Microsoft stack. It's in the top five most popular server applications and among the ten most popular open source tools in general. You can directly download and start using it from http://www.umbraco.com If you have not used the application yet, its always worth trying it once. I am sure you will love it. Well, for the first time users, Umbraco provide step by step instruction for initial set up, once you are done you can use some sample template or create a blank website. To know more on umbraco, Please refer below links http://our.umbraco.org/wiki/how-tos/a-complete-newbie's-guide-to-umbraco http://umbraco.com/help-and-support/video-tutorials/getting-started?freeVideos=1 http://our.umbraco.org/wiki/how-tos/getting-started-with-umbraco-what-is-next-after-you-install http://our.umbraco.org/wiki/install-and-setup ,  I have created a blank website, Now we will go step by step. Fi...

pjax with MVC, and form post like pjax

Last weekend I was working on a interesting project, and came across an interesting JavaScript library called pjax. More information on pjax: https://github.com/defunkt/jquery-pjax/ http://pjax.heroku.com/ pjax loads HTML from your server into the current page without a full reload. It's ajax with real permalinks, page titles, and a working back button that fully degrades, It just enhances the browsing experience. I just loved the way we could use it with MVC; Below code sample explains how we could use the same with MVC. Clientside code would look as below: Since the Form post is not handled with pjax, we can do a work around as below. Updated _ViewStart.cshtml as below: @{ if (Request.Headers["X-PJAX"] != null || Request.Headers["AJAX-FORM"]!=null) { Layout = "~/Views/Shared/_PjaxLayout.cshtml"; } else { Layout = "~/Views/Shared/_Layout.cshtml"; } } _PjaxLayout.cshtml ...

Why not to have a static const in c#

This is just a thought, that I was thinking why can't we have a constant with static in C#, and the answer is 'NO'; That we cannot have a static constant; e.g: I created a class as below: public class Constants1 { public const string Const1 = "Hello"; public const string Const2 = "World"; public static string Static1 = "Hello Static"; } When we compile the program into IL, the C# compiler does a magic in IL, that the constants converts into static literals, of course it has to, that's why we are able to access the constants as Constants1.Const1