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
  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!....