Creating Thumbnail View For Document Libraries In SharePoint Using JSLink

In this blog, I have explained how to show the documents in thumbnail view in SharePoint document libraries using JSLink.

Open a SharePoint site.

Create a Document library named "Thumbnail demo".

 

Click "Create" and upload images to it.

 

Let's build the code.

Create a JavaScript source file to inject into the SharePoint document library.

Declare the CSS from the reference

  1. var cssId = 'myCss';  
  2. if (!document.getElementById(cssId)) {  
  3.     var head = document.getElementsByTagName('head')[0];  
  4.     var link = document.createElement('link');  
  5.     link.id = cssId;  
  6.     link.rel = 'stylesheet';  
  7.     link.type = 'text/css';  
  8.     link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/design.css';  
  9.     link.media = 'all';  
  10.     head.appendChild(link);  
  11. }  

Create a function to override the document library template

  1. (function() {  
  2.     //Create a variable named overridectx  
  3.     var overrideCtx = {};  
  4.     //Get the document library template form overrideCtx  
  5.     overrideCtx.Templates = {}  
  6.     //Set the custom header for the document library template  
  7.     overrideCtx.Templates.Header = "<div>";  
  8.     //Get the item template structured rendered from the function thumbnailtemplate()  
  9.     overrideCtx.Templates.Item = thumbnailtemplate;  
  10.     //Set the custom footer for the document library template  
  11.     overrideCtx.Templates.Footer = "<div>";  
  12.     // This line of code tell TemplateManager that we want to change all HTML for item row render  
  13.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);  
  14. })();  
  15. This  
  16. function provides the rendering logic  
  17.   
  18. function thumbnailtemplate(ctx) {  
  19.     console.log(ctx);  
  20.     //Get the url of image form the document library  
  21.     var fileUrl = ctx.CurrentItem.FileRef;  
  22.     //Get the title of the item from the document library  
  23.     var titleInfo = ctx.currentItem.Title;  
  24.     // Return whole item html  
  25.     var html = "<div class='responsive'><div class='gallery'><a target='_blank' href='" + fileUrl + "'><img src='" + fileUrl + "' width='300' height='200'></a><div class='desc'>" + titleInfo + "</div> </div></div>";  
  26.     return html;  
  27. }  

Full code

  1. // Declare the css from the reference  
  2. var cssId = 'myCss';  
  3. if (!document.getElementById(cssId)) {  
  4.     var head = document.getElementsByTagName('head')[0];  
  5.     var link = document.createElement('link');  
  6.     link.id = cssId;  
  7.     link.rel = 'stylesheet';  
  8.     link.type = 'text/css';  
  9.     link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/design.css';  
  10.     link.media = 'all';  
  11.     head.appendChild(link);  
  12. }  
  13. (function() {  
  14.     var overrideCtx = {};  
  15.     overrideCtx.Templates = {}  
  16.     overrideCtx.Templates.Header = "<div>";  
  17.     overrideCtx.Templates.Item = thumbnailtemplate;  
  18.     overrideCtx.Templates.Footer = "<div>";  
  19.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);  
  20. })();  
  21. // This function provides the rendering logic  
  22. function thumbnailtemplate(ctx) {  
  23.     console.log(ctx);  
  24.     var fileUrl = ctx.CurrentItem.FileRef;  
  25.     var titleInfo = ctx.CurrentItem.Title;  
  26.     // Return whole item html  
  27.     var html = "<div class='responsive'><div class='gallery'><a target='_blank' href='" + fileUrl + "'><img src='" + fileUrl + "' width='300' height='200'></a><div class='desc'>" + titleInfo + "</div> </div></div>";  
  28.     return html;  
  29. }  

Finally, the document library looks like this.

 
After injecting JSLink into a document library.

 

Click on the image to preview.

 

Happy SharePointing!....