View formattingSharePoint Online

Document Library Thumbnails

This sample demonstrates showing files in a document libary as preview images.

Get this format View on GitHub

Shared by Ravi Chandra
Updated Feb 2, 2019

Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Definition

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "a",
    "attributes": {
      "class": "ms-borderColor-neutralLight",
      "href": "[$FileRef]"
    },
    "style": {
      "float": "left"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
        },
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "flex-direction": "column",
          "align-items": "stretch",
          "padding": "1px",
          "margin": "10px",
          "max-width": "930px",
          "box-shadow": "2px 2px 4px darkgrey"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "=if([$ContentType]=='Document', @currentWeb + '/_layouts/15/getpreview.ashx?path='+[$FileRef], 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96/archive.png')"
            },
            "style": {
              "width": "auto",
              "height": "300px"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "[$FileName]",
                "style": {
                  "margin-bottom": "1px"
                },
                "attributes": {
                  "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-neutralSecondary"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "a",
    "attributes": {
      "class": "ms-borderColor-neutralLight",
      "href": "[$FileRef]"
    },
    "style": {
      "float": "left"
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
        },
        "style": {
          "display": "flex",
          "flex-wrap": "wrap",
          "flex-direction": "column",
          "align-items": "stretch",
          "padding": "1px",
          "margin": "10px",
          "max-width": "930px",
          "box-shadow": "2px 2px 4px darkgrey"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "=if([$ContentType]=='Document', @currentWeb + '/_layouts/15/getpreview.ashx?path='+[$FileRef], 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/96/archive.png')"
            },
            "style": {
              "width": "auto",
              "height": "300px"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "[$FileName]",
                "style": {
                  "margin-bottom": "1px"
                },
                "attributes": {
                  "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-neutralSecondary"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

.definition[hidden] { display:block !important; } .variant-chooser,[data-copy] { display:none; }All definitions are shown below. Select the code manually or download the JSON file.

From the contributor

How to use this sample

Summary

This sample demonstrates showing files in a document libary as preview images.

screenshot of the sample

View requirements

"Allow management of content types" is turned on under Library --> Advanced Settings.

The size of the tiles can be adjusted by changing the width and height values.

Sample

Solution	Author(s)
document-library-thumbnails.json	Ravi Chandra

Version history

Version	Date	Comments
1.0	February 02, 2019	Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.