Adding custom thumbnails sizes for Videos and Images in Sitefinity

Adding custom thumbnails sizes for Videos and Images in Sitefinity

July 18, 2012 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

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 

progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments
Comments are disabled in preview mode.
Topics
 
 
Latest Stories in
Your Inbox
Subscribe
More From Progress
New_Mobile_Dev_Ebook_Progress_Website_Thumbail
The New Mobile Development Landscape
Download Whitepaper
 
IDC Spotlight Sitefinity Thumbnail
Choosing the Right Digital Experience Platform to Improve Business Outcomes
Download Whitepaper
 
TheFastestWayToBuildMobileAppsArtboard-2
The Fastest Way to Build Mobile Apps With Cloud Data
Watch Webinar