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

var cssId = 'myCss';
if (!document.getElementById(cssId)) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.id = cssId;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/design.css';
    link.media = 'all';
    head.appendChild(link);
}

Create a function to override the document library template

(function() {
    //Create a variable named overridectx
    var overrideCtx = {};
    //Get the document library template form overrideCtx
    overrideCtx.Templates = {}
    //Set the custom header for the document library template
    overrideCtx.Templates.Header = "<div>";
    //Get the item template structured rendered from the function thumbnailtemplate()
    overrideCtx.Templates.Item = thumbnailtemplate;
    //Set the custom footer for the document library template
    overrideCtx.Templates.Footer = "<div>";
    // This line of code tell TemplateManager that we want to change all HTML for item row render
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
This
function provides the rendering logic

function thumbnailtemplate(ctx) {
    console.log(ctx);
    //Get the url of image form the document library
    var fileUrl = ctx.CurrentItem.FileRef;
    //Get the title of the item from the document library
    var titleInfo = ctx.currentItem.Title;
    // Return whole item html
    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>";
    return html;
}

Full code

// Declare the css from the reference
var cssId = 'myCss';
if (!document.getElementById(cssId)) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.id = cssId;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://sharepointtechie.sharepoint.com/sites/appnfc/SiteAssets/design.css';
    link.media = 'all';
    head.appendChild(link);
}
(function() {
    var overrideCtx = {};
    overrideCtx.Templates = {}
    overrideCtx.Templates.Header = "<div>";
    overrideCtx.Templates.Item = thumbnailtemplate;
    overrideCtx.Templates.Footer = "<div>";
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
// This function provides the rendering logic
function thumbnailtemplate(ctx) {
    console.log(ctx);
    var fileUrl = ctx.CurrentItem.FileRef;
    var titleInfo = ctx.CurrentItem.Title;
    // Return whole item html
    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>";
    return html;
}

Finally, the document library looks like this.

 
After injecting JSLink into a document library.

 

Click on the image to preview.

 

Happy SharePointing!....