Sitefinity ASP.NET CMS - Content Management System

KB Article

Home >  Support >  Knowledge Base >  KB Article
How to autoresize images for the Image & Documents module (Sitefinity 3.2 SP1) - ID#952
Rating:
Last Modified: 4/4/2008
Related categories: Modules;

Article information

Article relates to

Sitefinity 3.2 SP1 

Created by

 Vassil Daskalov


Sometimes there are situations when you would like to set additional adjustments to items before or after they are stored in the database. Sitefinity provides two events for the Generic Content based modules suitable for such scenarios. These are the Executed and Executing events. Note that they are static and you would not need an instance of a specific manager to use them.

A good example for using one of these events is when restricting the size of the image items you are uploading inside the Images & Documents module. As we know, photo cameras make really big images with a lot of info on them. In most cases, though, we do not need that much information. It would be rather annoying to view such images as we should use the browser scrolls in order to take a look at the whole image. Perhaps reducing the images to 900x500 proportions would be quite enough.

To achieve the desired behavior, you should do the following:

1. Subscribe from the Global.asax Application_Start event to the static Executing event of the LibraryManager manager like this: 

void Application_Start(object sender, EventArgs e)   
{  
    Telerik.Libraries.LibraryManager.Executing += new EventHandler<Telerik.ExecutingEventArgs>(LibraryManager_Executing);  
}  
 
void LibraryManager_Executing(object sender, Telerik.ExecutingEventArgs args)  
{  
    //The code continues here   
}  
 

2.  In the LibraryManager_Executing event, you first need to assure that the event is not fired after deletion of an item as the modification in this case would be illogical. Afterwards, load the item that has just been saved via the ExecutingEventArgs parameter:

if (args.CommandName != "DeleteContent")     
{     
    if (args.CommandArguments is Telerik.Cms.Engine.IContent)     
    {     
        Telerik.Cms.Engine.IContent currentItem = ((Telerik.Cms.Engine.IContent)args.CommandArguments);     
    
        //The code continues here     
    }     
}   

3. You should assure that the content load is a browseable image, that is, it should have one of the following extensions: .jpg, .jpeg, .gif or .png. Now get the item’s width and height and check if they are larger than the 900x500 dimensions:

if (Telerik.Cms.Engine.ImagesHelper.IsBrowserImage(currentItem))  
{  
    long width = 0;  
    long height = 0;  
 
    object o2 = currentItem.GetMetaData("Width");  
    if (o2 != null)  
        width = Convert.ToInt64(o2);  
 
    o2 = currentItem.GetMetaData("Height");  
    if (o2 != null)  
        height = Convert.ToInt64(o2);  
 
    if (width > 900 || height > 500)  
    {  
        //The code continues here  
    }  
}  
 

4. In this case you should instantiate a System.Drawing.Image object and call the Telerik.Cms.Engine.ImagesHelper.GenerateThumbnail() method. This method has three overloads. The one used here generates a new image with the given width and height with proportional dimensions and creates that image only if its width or height is larger than the parameters given to the function:

System.Drawing.Image img = System.Drawing.Image.FromStream(new System.IO.MemoryStream(currentItem.Content as byte[]));     
img = Telerik.Cms.Engine.ImagesHelper.GenerateThumbnail(900, 500, img, truetrue);     
                             
//The code continues here   

5. Afterwards, you should save the newly generated image to a memory stream. Set the Content property of the item’s object to the stream content and finally update Width, Height and Size meta fields.

System.IO.MemoryStream stream = new System.IO.MemoryStream();  
Telerik.Cms.Engine.ImagesHelper.SaveImageToStream(img, stream, currentItem.MimeType);  
currentItem.Content = stream.GetBuffer();  
currentItem.SetMetaData("Size", ((byte[])currentItem.Content).Length);  
currentItem.SetMetaData("Width", img.Width);  
currentItem.SetMetaData("Height", img.Height);  
 

Finally, the whole code needed is contained in the Global.asax file and looks like the one below:

void Application_Start(object sender, EventArgs e)   
{  
    Telerik.Libraries.LibraryManager.Executing += new EventHandler<Telerik.ExecutingEventArgs>(LibraryManager_Executing);  
}  
 
void LibraryManager_Executing(object sender, Telerik.ExecutingEventArgs args)  
{  
    if (args.CommandName != "DeleteContent")  
    {  
        if (args.CommandArguments is Telerik.Cms.Engine.IContent)  
        {  
            Telerik.Cms.Engine.IContent currentItem = ((Telerik.Cms.Engine.IContent)args.CommandArguments);  
 
            if (Telerik.Cms.Engine.ImagesHelper.IsBrowserImage(currentItem))  
            {  
                long width = 0;  
                long height = 0;  
 
                object o2 = currentItem.GetMetaData("Width");  
                if (o2 != null)  
                    width = Convert.ToInt64(o2);  
 
                o2 = currentItem.GetMetaData("Height");  
                if (o2 != null)  
                    height = Convert.ToInt64(o2);  
 
                if (width > 900 || height > 500)  
                {  
                    System.Drawing.Image img = System.Drawing.Image.FromStream(new System.IO.MemoryStream(currentItem.Content as byte[]));  
                    img = Telerik.Cms.Engine.ImagesHelper.GenerateThumbnail(900, 500, img, truetrue);  
 
                    System.IO.MemoryStream stream = new System.IO.MemoryStream();  
                    Telerik.Cms.Engine.ImagesHelper.SaveImageToStream(img, stream, currentItem.MimeType);  
                    currentItem.Content = stream.GetBuffer();  
 
                    currentItem.SetMetaData("Size", ((byte[])currentItem.Content).Length);  
                    currentItem.SetMetaData("Width", img.Width);  
                    currentItem.SetMetaData("Height", img.Height);  
                }  
            }  
        }  
    }  
}  

Article Comments

James TheGeek, 4/3/2008
Great!!! This will make my life much easier. I did find two issues: 1) If you are coping the code from each "section (1, 2, 3) etc, you need to correct an issue in #2. Telerik.Cms.Engine.IContent currentItem = ((Telerik.Cms.Engine.IContent)args.CommandArguments); - one of the ( is missing. The full code at the bottom is correct. 2) After I upload the photo, it does handle the resize correctly, but under "Details - height/width" the old image size is listed rather than the new image size. Again - thanks for the great work. I do have another question - how can I sort my images using the documents/images module to display in the order that I want them to? Right now, if I am working in a gallery, I have to name the file something like Photo A, Photo B, etc. Please advise.

Romi Pierre, 4/28/2008
Formidable! Merci

Alexander Resnik, 10/24/2008
It does not work for me. May be I already use Sitefinity 3.5. I have used Visual Studio to debug and seen - event handler was add in Application_Start successfully. But it was never fired - I have a breakpoint there. Image was not resized, sure. Please can you help me Thanks Alex

Telerik Admin, 10/29/2008
Please open a new support ticket and send us your global.asax file. We will inspect it and will get back to you as soon as possible.


Please Sign In to rate this article or to add it to your favorites.