How to create thumbnail/preview of any document or Image or Video in SharePoint

Hi Friends,

In this post, we are going to learn how to generate a thumbnail/preview of any Document or Video or Image in SharePoint.

Recently I came across a requirement to show some document links on a page but the links should be the thumbnail of the document instead of a plain text(document title). Please find the below approach I followed to achieve this.

getpreview.ashx is a http handler used to generate thumbnail/preview of any document(word,pdf, ppt etc.,), Image and Video which resides in SharePoint.

If you observe in SharePoint search results, when we mouse over on the search results we get a preview of that item. This is actually happening through http handler getpreview.ashx

This handler expects a parameter called “path” which expects absolute path of the doc/image/video. Please find the below sample URLs to generate the thumbnail.

Image:

https://yoursite.com/_layouts/15/getpreview.ashx?path=https://yoursite.com/PublishingImages/abcd.jpg

Document:

https://yoursite.com/_layouts/15/getpreview.ashx?path=https://yoursite.com/PublishingImages/Document/abcd.doc

Video:

https://yoursite.com/_layouts/15/getpreview.ashx?path=https://yoursite.com/PublishingImages/videos/abcd.mp4

This handler has also expects a parameter called “resolution” which has a predefined values 1, 2, 3 etc., for different resolutions of previews/Thumbnails. Please find the below sample URLs with different resolutions

https://yoursite.com/_layouts/15/getpreview.ashx?resolution=1&path=https://yoursite.com/PublishingImages/abcd.jpg

https://yoursite.com/_layouts/15/getpreview.ashx?resolution=2&path=https://yoursite.com/PublishingImages/abcd.jpg

Hope this helps…

RELATED POST: Image Renditions in SharePoint 2013

How to use Image Renditions in SharePoint

Hi Friends,

In this post we are going to learn What are the Image Renditions and how we can use it in SharePoint.

Image renditions helps to display a single image into various sizes based on our needs. Apart from choosing size, it also allows you to crop the image while adding it to the publishing page.

So based on our needs, we can display abcd.jpg as Logo, Banner and Thumbnail etc., This technique helps in reducing the size of the file that is downloaded to the client, which then improves site performance. You can find some of the ways to improve SharePoint site speed and performance here.

The other advantage if you notice, we need not to create different sized images i.e., one for logo, one for thumbnail etc.,. With Image renditions we can display a single image into multiple sizes.

Below are the prerequisites for using Image Renditions 

•  Publishing Site
• BLOB Caching enabled(Follow this link on how to configure BLOB cache and its uses)

Please find the below steps on how we can configure Image Renditions.

1.     Go to the top-level site of the publishing site collection.

2.    Choose the Settings icon. On the Site Settings page, in the Look and Feel section,  choose Image Renditions.

3.    This will show you list of available Image Renditions available on this site. We can  modify the existing one, Or we can even create our own based on required dimensions.

          4.       ID indicates the RenditionID. We will be using this RenditionID as a parameter to                       specify the dimensions of an image we need.

         5.       If we want to construct image URL directly from the RenditionID, we just need to                  add it as a  Query String.

Examples: If we want display abcd.jpg as 100*100 on a page, then my image source URL will be “abcd.jpg?RenditionID=1”

If we want display abcd.jpg as 200*200 on a page, then my imgage source URL will be “abcd.jpg?RenditionID=2”

        6.       If we want to insert the image in the page content then follow the below steps. 

a)     Edit the page and place the cursor in the Page Content field.

b)    From the Ribbon Insert tab, choose Picture, and then choose From    SharePoint.

c)     Select the image that you want to add to the page and then choose Insert. The image will be displayed at full size.

d)    Next on the Design tab, in the Select group, choose Pick Rendition, and then select an  image rendition whichever required. That’s it, the image will display according to the size  specified for the image rendition.

Hope this helps... 

How to Add a Favicon to a SharePoint Site or any regular website

In this post we are going to Add a Favicon to a SharePoint Site or any regular website.

A favicon is an image(.ico extension) associated with a particular Web page or a complete Web site. Favicon (pronounced fav-eye-con) is short for 'Favorites Icon.'

In Internet Explorer the Favicon is displayed on the Address bar and in the Tab.

Below are the steps to achieve this.

Step1:

Create a .ico image file with the below link by uploading your Logo.

http://tools.dynamicdrive.com/favicon/

Once the .ico file is created save it as favicon.ico and make sure it is of 16*16 Pixels.

Step2:

Adding the favicon reference to our website.

Add the below reference in the <head> section of your master page so that favicon will be displayed across the website. Or if you want to show it on particular page only, then add it to respective page itself.

<link rel="shortcut icon" href="your_path_to_favicon/favicon.ico" type="image/vnd.microsoft.icon" />

In Sharepoint to achieve the same we can use either the above code snippet or we can make use of below Sharepoint control SPShortcutIcon.

<SharePoint:SPShortcutIcon ID="SPShortcutIcon1" runat="server" IconUrl="/_layouts/images/favicon.ico"/>

You can give the IconUrl reference by placing the image either in the 14 hive or in the Image Library of your site collection. Both will workout.

Hope this helps...