Creating Thumbnail view for document libraries in sharepoint using JSLink

0
162
views

In this blog, i have explained how to show the documents in thumbnail view in sharepoint document libraries using JSLink,

Open sharepoint site

Create a Document library named “Thumbnail demo”

Click Create and Upload images into it

 

Let’s build the code

Create a Javascript source file to inject inside 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 document library look like this

After Inject JSLink into document library

 

Click on the Image to preview

Happy Sharepointing!….

 

Please follow and like us:
0

LEAVE A REPLY

Please enter your comment!
Please enter your name here