+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Adding custom thumbnails sizes for Videos and Images in Sitefinity

by Boyan Barnev

A couple of clients have shown interest in specifying a different size for the generated video thumbnails in Sitefinity.

In this post we're going to demonstrate how you can do this and a couple more useful things with the default thumbnail generation logic.

 

Out of the box when uploading a video we would grab a snapshot from the video and get an image based on the original video width and height.

From this image we generate two thumbnails - one with width 160 and another one with width 120. The 160 is the default one (actually it's a FirstOrDefault() call, we do not explicitly look for one with size 160).

What's the purpose of making two thumbnails?

Most of you might be aware of this, but for the ones who aren't I believe it'd be useful to mention that you can use the querystring parameter "size" when requesting any media content (Image, Video) thumbnail, for example:

http://localhost/videos/default-video-library/wildlife.wmv.tmb?Status=Master&sfvrsn=2&size=600

If there is a thumbnail matching the requested size it will be served automatically, which gives you the benefit of displaying automatically the stored version, instead of dynamically resizing the thumbnail on  each request.

So if we go back to the default logic after uploading the video we will be presented with a thumbnail of size 160, and we could also request if necessary its smaller version:

http://localhost/videos/default-video-library/wildlife.wmv.tmb?Status=Master&sfvrsn=2&size=120

 

If we request a non existing size, e.g. http://localhost/videos/default-video-library/wildlife.wmv.tmb?Status=Master&sfvrsn=2&size=12345

the default one (160) will be returned.

 

That being said you can take advantage of this feature and on each video or image upload generate a set of predefined thumbanil sizes which you can use depending on the desired scenario.

 

What's even more fun is that you can actually check for the MediaContent being uploaded - whether it's an Image or a Video and have separate thumbnail sizes and different logic for the two.

How can you achieve this? Pretty easily, the logic is implemented in our default provider for libraries - OpenAccessLibrariesProvider, which you can inherit from and override the GenerateThumbnails() method logic. Once you're done implementing the desired logic you can simply substitute the default provider by going to Administration->Settings->Advanced->Libraries ->Providers -> OpenAccessDataProvider and replace the value in the ProviderType to be the CLR type of your custom provider.

For the purposes of this blog post I've created a sample provider which demonstrates you how you can split your logic based on the MediaContent type, and generate several different thumbnail sizes:

public class OALPCustom : OpenAccessLibrariesProvider
   {
       protected override void GenerateThumbnails(Telerik.Sitefinity.Libraries.Model.MediaContent mediaContent, System.Drawing.Image img, string mimeType)
       {
           this.DeleteMediaThumbnails(mediaContent);
           if (string.IsNullOrEmpty(mimeType))
               mimeType = mediaContent.MimeType;
                 
           //Check for MediaContent type if you want different logic for Image or Video       
           if (mediaContent is Video)
           {
               //Store the custom thumbnail sizes in an array so you can pass them conveniently to the method
               //Please note that the first thumbnail will be the default one
               var sizes = new int[] { defaultThumbnailSize, additionalThumbnailSize600, additionalThumbnailSize120 };
               this.GenerateThumbnailsWithPredefinedSize(mediaContent, img, mimeType, sizes);
           }
 
           //If not a Video execute default logic
           else
           {
               base.GenerateThumbnails(mediaContent, img, mimeType);
           }
       }
 
       protected void GenerateThumbnailsWithPredefinedSize(Telerik.Sitefinity.Libraries.Model.MediaContent mediaContent, System.Drawing.Image img, string mimeType, int[] sizes)
       {
           foreach (var tmbSize in sizes)
           {
               var thumbnail = CreateThumbnail(tmbSize);
               using (var stream = new MemoryStream())
               {
                   thumbnail.MimeType = ImagesHelper.SaveImageToStream(
                       ImagesHelper.GenerateThumbnail(img, tmbSize),
                       stream,
                       mimeType, true);
                   thumbnail.Data = stream.ToArray();
               }
               thumbnail.Parent = mediaContent;
           }
            
       }
       # region Thumbnail Sizes
 
       private int defaultThumbnailSize = 800;
       private int additionalThumbnailSize600 = 600;
       private int additionalThumbnailSize120 = 120;
 
       #endregion
   }

As usual here's an accompanying video demonstrating the whole process of setting up the custom provider and using the newly generated thumbnails:

For your convenience I've attached the provider class to this blog post so you can directly plug it in your project and modify it as per your specific requirements. Hope you found today's post useful.

 

Any comments and suggestions are always welcome.

 

OpenAccessLibrariesProviderCustom 

5 comments

Leave a comment
  1. Steve Jul 18, 2012
    Why are we reinventing the wheel on this instead of using ImageResizer which allows for disk caching, etc?
  2. Michael Hallock Jul 18, 2012
    Note that this solution only works for videos for the automatically generated thumbnails on upload. The Silverlight based thumbnail selector will still generate these thumbnails at 120 pixels. Also, it doesn't appear that this method gets called when uploading videos of a different type than WMV.
  3. Michael Hallock Jul 18, 2012
    Just a clarification: The silverlight thumbnail selector passes in an image that is already resized to the small thumbnail size, so while you can upscale it, it will look like terrible and won't match your original. Also, it locks the aspect ratio to whatever the Telerik imposed video player size is, so if you upload a video at 640x360 or some other aspect ratio, it will readjust the video to 500x400 or whatever that size is, messing up the aspect ratio of both the video and the thumbnail anyway.
  4. Mihaela Aioanei Nov 05, 2012
    With the search engine crawlers getting smarter, video optimization will become a necessity. In a video chat meeting about video optimization, it was mentioned that these thumbs are very important in rising the interest of the public. You must chose a visible dimension and an intriguing image.
  5. Waqar Feb 08, 2013

    Hello Boyan,

    Provider given above is not working for Azure. 

    I configured Azure as Storage Provider for libraries and changed Images library provider as Azure, according to Sitefinity documentation. But now when I upload images in library, Sitefinity generates CDN URL (e.g. http://az98777.vo.msecnd.net/content/images-library/aa.jpg) for original image but for thumbnails it doesn't generate any CDN URL instead thumbnails are coming from WebRole( mean IIS).

    We need the solution when we upload any image to CDN, the Azure Storage Provider should generates required thumbnails images URL and upload them to configured Storage. Also images URL should support query string for different sizes of images as shown in above article.

    Please response ASAP. We have to live our website by Sunday.

    Thanks in advance.

    Leave a comment