File Preview Thumbnail (Column Formatting)
Overview
- Shows a small inline file preview beside each file name
- Uses the native filepreview element, so thumbnails come straight from SharePoint
- Files without a preview fall back to a file-type icon
- Keeps the familiar list view while adding a visual cue
- Applied as column-formatting JSON on the Name column, so it changes nothing about the files
- Works on any document library
Common Use Cases
- Document libraries with mixed content
- Image and design libraries
- Report and deck libraries
- Contract repositories
- Knowledge bases
- Any library where a visual cue helps
How to Apply JSON Formatting
1. Open your document library (or create one and upload a few files).
2. On the Name column, open the column header menu, choose Column settings, then Format this column.
3. Switch to Advanced mode, paste the JSON below, and click Save.
JSON Code – Select, Copy and Paste
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"display": "flex",
"align-items": "center"
},
"children": [
{
"elmType": "div",
"style": {
"position": "relative",
"width": "36px",
"height": "36px",
"flex-shrink": "0",
"margin-right": "10px"
},
"children": [
{
"elmType": "filepreview",
"attributes": {
"src": "@thumbnail.medium"
},
"style": {
"width": "36px",
"height": "36px",
"border-radius": "4px",
"border": "1px solid #edebe9",
"box-sizing": "border-box",
"display": "=if([$File_x0020_Type] == 'pdf' || [$File_x0020_Type] == 'doc' || [$File_x0020_Type] == 'docx' || [$File_x0020_Type] == 'xls' || [$File_x0020_Type] == 'xlsx' || [$File_x0020_Type] == 'ppt' || [$File_x0020_Type] == 'pptx' || [$File_x0020_Type] == 'png' || [$File_x0020_Type] == 'jpg' || [$File_x0020_Type] == 'jpeg' || [$File_x0020_Type] == 'gif' || [$File_x0020_Type] == 'bmp' || [$File_x0020_Type] == 'tif' || [$File_x0020_Type] == 'tiff', 'block', 'none')"
}
},
{
"elmType": "div",
"style": {
"width": "36px",
"height": "36px",
"border-radius": "4px",
"box-sizing": "border-box",
"background-color": "#ffffff",
"border": "1px solid #edebe9",
"display": "=if([$File_x0020_Type] == 'pdf' || [$File_x0020_Type] == 'doc' || [$File_x0020_Type] == 'docx' || [$File_x0020_Type] == 'xls' || [$File_x0020_Type] == 'xlsx' || [$File_x0020_Type] == 'ppt' || [$File_x0020_Type] == 'pptx' || [$File_x0020_Type] == 'png' || [$File_x0020_Type] == 'jpg' || [$File_x0020_Type] == 'jpeg' || [$File_x0020_Type] == 'gif' || [$File_x0020_Type] == 'bmp' || [$File_x0020_Type] == 'tif' || [$File_x0020_Type] == 'tiff', 'none', 'flex')",
"align-items": "center",
"justify-content": "center"
},
"children": [
{
"elmType": "span",
"style": {
"font-size": "9.5px",
"font-weight": "700",
"letter-spacing": "0.3px",
"line-height": "16px",
"padding": "0 7px",
"border-radius": "4px",
"background-color": "=if([$File_x0020_Type] == '', '#fff3cf', if([$File_x0020_Type] == 'zip', '#fff4ce', if([$File_x0020_Type] == 'txt', '#eaf2fb', if([$File_x0020_Type] == 'csv', '#e7f3e8', '#f3f2f1'))))",
"border": "=if([$File_x0020_Type] == '', '1px solid #e4b647', if([$File_x0020_Type] == 'zip', '1px solid #f0dfa0', if([$File_x0020_Type] == 'txt', '1px solid #b9d7f0', if([$File_x0020_Type] == 'csv', '1px solid #b7dfba', '1px solid #d2d0ce'))))",
"color": "=if([$File_x0020_Type] == '', '#7a5c00', if([$File_x0020_Type] == 'zip', '#8a6d00', if([$File_x0020_Type] == 'txt', '#0b5cab', if([$File_x0020_Type] == 'csv', '#0b6a0b', '#605e5c'))))"
},
"txtContent": "=if([$File_x0020_Type] == '', 'DIR', toUpperCase([$File_x0020_Type]))"
}
]
}
]
},
{
"elmType": "span",
"style": {
"font-size": "13px",
"color": "#242424"
},
"txtContent": "[$FileLeafRef]"
}
]
}Common Questions About the File Preview Thumbnail
What is the File Preview Thumbnail built with?
It is built with a standard SharePoint document library and a small piece of column-formatting JSON that uses the native filepreview element on the Name column. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want a more visual list without ongoing development overhead.
How is this different from the Thumbnail Gallery?
The Thumbnail Gallery turns the whole library into a grid of large preview tiles. The File Preview Thumbnail keeps the normal list view and just adds a small preview beside each name, which is handy when you still want the list layout and its columns.
Does this design use any custom development or third-party tools?
No. It uses only out-of-the-box SharePoint column formatting, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.
If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?
Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how existing columns and views look, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.
What happens for files that cannot be previewed?
SharePoint shows a file-type icon in place of the preview, so the row still looks complete. The preview appears automatically for supported formats like Office files, PDFs, and images.
Can Greg build this for our library?
Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your library.
