Adding custom thumbnails sizes for Videos and Images in Sitefinity

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:

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