Thumbnail Gallery (View Formatting)
Overview
- Renders each file as a preview tile using the SharePoint Gallery layout
- Shows the actual thumbnail of documents and images
- Files without a preview fall back to a file-type icon automatically
- The file name sits beneath each tile
- Applied as gallery view formatting JSON, so it changes nothing about the files
- Works on any document library
Common Use Cases
- Image and photo libraries
- Design and brand asset libraries
- Presentation and report libraries
- Marketing collateral
- Document showcases
- Any visual file collection
How to Apply JSON Formatting
1. Open your document library and add a few files.
2. Create a Gallery view on the library (view dropdown at the top right, Create new view, set the layout to Gallery, then Create).
3. With the new gallery view open, open the view dropdown again and choose Format current view.
4. 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/tile-formatting.schema.json",
"height": 178,
"width": 205,
"hideSelection": false,
"formatter": {
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"box-sizing": "border-box",
"height": "100%",
"border": "1px solid #e1dfdd",
"border-radius": "12px",
"overflow": "hidden",
"background-color": "#ffffff",
"box-shadow": "0 2px 8px rgba(0,0,0,0.08)"
},
"children": [
{
"elmType": "div",
"style": {
"height": "122px",
"width": "100%",
"background-color": "#f5f5f5",
"display": "flex",
"align-items": "center",
"justify-content": "center",
"box-sizing": "border-box",
"padding": "8px",
"border-bottom": "1px solid #edebe9"
},
"children": [
{
"elmType": "div",
"style": {
"height": "96px",
"width": "170px",
"display": "flex",
"align-items": "center",
"justify-content": "center",
"overflow": "hidden",
"border-radius": "8px",
"background-color": "#ffffff"
},
"children": [
{
"elmType": "filepreview",
"attributes": {
"src": "@thumbnail.medium"
},
"style": {
"width": "170px",
"height": "96px",
"object-fit": "contain"
}
}
]
}
]
},
{
"elmType": "div",
"style": {
"font-size": "13px",
"font-weight": "600",
"color": "#242424",
"padding": "10px 12px",
"line-height": "18px",
"white-space": "nowrap",
"overflow": "hidden",
"text-overflow": "ellipsis",
"text-align": "center",
"background-color": "#ffffff"
},
"txtContent": "[$FileLeafRef]"
}
]
}
}Common Questions About the Thumbnail Gallery
What is the Thumbnail Gallery built with?
It is built with a standard SharePoint document library and gallery view formatting expressed in JSON, using SharePoint’s native file thumbnails. 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 visual library without ongoing development overhead.
Where do the thumbnails come from?
SharePoint generates a preview thumbnail for supported file types, and the tile shows it directly. For files that do not have a preview, a clear file-type icon is shown instead, so every tile still looks complete.
Does this design use any custom development or third-party tools?
No. It uses only out-of-the-box SharePoint view 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.
Which files get a real preview?
Common Office documents, PDFs, and images get a generated thumbnail. Some less common formats do not, and those fall back to a file-type icon – the gallery handles that automatically without any blank tiles.
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.
