Learn how to create a custom JSON formatted column that shows a thumbnail preview of a file in a SharePoint library
JSON formatting
When storing a file in a SharePoint library, a thumbnail preview of the file is available.
We can use that thumbnail to show a preview of the file, using JSON formatting.
Step 1
Create a new text column called File preview
Insert the following code into Column setting -> Format this column
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "=if([$File_x0020_Size] == '0' || [$ContentType] == 'Folder', 'none', 'flex')"
},
"children": [
{
"elmType": "div",
"style": {
"margin-left": "25px"
},
"attributes": {
"iconName": "FileImage",
"class": "ms-font-xl"
},
"customCardProps": {
"openOnEvent": "hover",
"formatter": {
"elmType": "div",
"style": {
"width": "450px",
"height": "600px"
},
"children": [
{
"elmType": "img",
"style": {
"width": "100%",
"height": "98%"
},
"attributes": {
"src": "=@thumbnail.440x590",
"alt": "File thumbnail"
}
}
]
},
"directionalHint": "rightCenter",
"isBeakVisible": true
}
}
]
}
You can adjust the width/height of the customcardprop (the popup) if you like.
You can also adjust the icon by replacing FileImage.
You can find more columns here