Forum Discussion
SPO board view not displaying card image preview on page load
My team is moving away from Trello and onto SharePoint lists for the customizations and automaton M365 has. We use these lists/boards for tracking, scheduling, and content development.
I'm setting up board views for the team to mimic the Trello experience (Kanban board view). I’d like the cards to have a small thumbnail image at the top from a column called “image”. The rest of the card will contain various metadata. The current issue I’m running into is displaying an image thumbnail at the top of the card the card. When a user goes to the default list view (board), the image thumbnails don't appear right away. They appear as below:
What the user has to do is change the list view to All items, then go back to the Board view and the thumbnails appear. See below:
Cards with thumbnails
The SPO gallery view doesn’t have this issue, it loads image thumbnails on page load but the gallery just isn’t in the Kanban board view that I’m looking for.
I’ve searched everywhere to try and solve this but can’t seem to find out why the board view thumbnails won't generate or show on initial page load. Is this a JSON coding issue, caching issues, or does SPO not have this ability yet? Anyone have any ideas?
Here's the JSON for the view
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
"height": 391,
"width": 254,
"hideSelection": false,
"fillHorizontally": true,
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-container"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-defaultClickButton"
},
"customRowAction": {
"action": "defaultClick"
}
},
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-previewColumnContainer"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-imageContainer"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-neutralLight sp-card-imagePreviewBackground"
},
"children": [
{
"elmType": "img",
"style": {
"display": "=if([$image] == '', 'none', '')"
},
"attributes": {
"src": "=getThumbnailImage([$image], 500, 400)",
"title": "[$image.fileName]",
"class": "sp-card-imagePreview"
}
},
{
"elmType": "svg",
"style": {
"display": "=if([$image] == '', '', 'none')"
},
"attributes": {
"preserveAspectRatio": "none",
"viewBox": "0 0 210 105",
"class": "sp-card-defaultImage ms-bgColor-themeLighter"
},
"children": [
{
"elmType": "path",
"attributes": {
"id": "sp-card-defaultImage-path1",
"d": "M0 25.7896L126.5 53.8817L96 105H0V25.7896Z"
}
},
{
"elmType": "path",
"attributes": {
"id": "sp-card-defaultImage-path2",
"d": "M96 105L158.7 0H204C207.314 0 210 2.68629 210 6V105H96Z"
}
}
]
},
{
"elmType": "svg",
"style": {
"display": "=if([$image] == '', '', 'none')"
},
"attributes": {
"class": "sp-card-defaultImageOverlay",
"viewBox": "0 0 40 40"
},
"children": [
{
"elmType": "path",
"attributes": {
"id": "sp-card-defaultImageOverlay-path1",
"d": "M 4 4 H 37 V 37 H 4 L 4 4"
}
},
{
"elmType": "path",
"attributes": {
"id": "sp-card-defaultImageOverlay-path2",
"d": "M24.17 21.151L21.66 24.741L17.54 19.191C17.3322 18.914 17.0062 18.751 16.66 18.751C16.3137 18.751 15.9877 18.914 15.78 19.191L9.20997 28.051C8.97126 28.3786 8.93818 28.813 9.12453 29.173C9.31088 29.533 9.68465 29.7567 10.09 29.751H29.91C30.3085 29.7562 30.6769 29.5396 30.866 29.1887C31.0551 28.8378 31.0335 28.411 30.81 28.081L26 21.151C25.7991 20.8407 25.4546 20.6533 25.085 20.6533C24.7153 20.6533 24.3709 20.8407 24.17 21.151Z"
}
},
{
"elmType": "path",
"attributes": {
"id": "sp-card-defaultImageOverlay-path3",
"d": "M28 15.751C29.3807 15.751 30.5 14.6317 30.5 13.251C30.5 11.8703 29.3807 10.751 28 10.751C26.6193 10.751 25.5 11.8703 25.5 13.251C25.5 14.6317 26.6193 15.751 28 15.751Z"
}
},
{
"elmType": "path",
"attributes": {
"id": "sp-card-defaultImageOverlay-path4",
"d": "M4.5 37.251H35.5C36.3284 37.251 37 36.5794 37 35.751V4.75098C37 3.92255 36.3284 3.25098 35.5 3.25098H4.5C3.67157 3.25098 3 3.92255 3 4.75098V35.751C3 36.5794 3.67157 37.251 4.5 37.251ZM4 4.75098C4 4.47483 4.22386 4.25098 4.5 4.25098H35.5C35.7761 4.25098 36 4.47483 36 4.75098V35.751C36 36.0271 35.7761 36.251 35.5 36.251H4.5C4.22386 36.251 4 36.0271 4 35.751V4.75098Z"
}
}
]
}
]
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "test title"
},
{
"elmType": "p",
"attributes": {
"title": "[$Title]",
"class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
"role": "heading",
"aria-level": "3"
},
"txtContent": "=if ([$Title] == '', '–', [$Title])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer",
"id": "Duedate-attachments"
},
"style": {
"display": "flex"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-card-displayColumnContainer"
},
"style": {
"width": "100px"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Due_x0020_date.DisplayName]"
},
{
"elmType": "p",
"attributes": {
"title": "=if ([$Due_x0020_date.displayValue] == '', '–', [$Due_x0020_date.displayValue])",
"class": "ms-fontColor-neutralPrimary sp-card-content "
},
"txtContent": "=if ([$Due_x0020_date.displayValue] == '', '–', [$Due_x0020_date.displayValue])"
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-lastTextColumnContainer"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label"
},
"txtContent": "[!Attachments.DisplayName]"
},
{
"elmType": "div",
"attributes": {
"class": "=if([$Attachments] == '1', 'ms-fontColor-neutralPrimary sp-card-content sp-card-attachmentsContainer', 'ms-fontColor-neutralPrimary sp-card-content ')"
},
"children": [
{
"elmType": "p",
"attributes": {
"title": "=if ([$Attachments] == '1', [$Attachments], '')",
"class": "=if ([$Attachments] == '1', 'sp-card-attachmentsIcon', 'sp-card-attachmentsEmptyText')",
"iconName": "=if ([$Attachments] == '1', 'Attach', '')"
},
"txtContent": "=if ([$Attachments] == '1', '', '–')"
}
]
}
]
}
]
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-TextColumnContainer"
},
"children": [
{
"elmType": "div",
"style": {
"display": "=if([$Labels] == '', 'none', '')"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "ms-fontColor-neutralSecondary sp-card-label sp-card-boldText"
},
"txtContent": "[!Labels.DisplayName]"
},
{
"elmType": "div",
"attributes": {
"class": "sp-card-content sp-card-formatterRef"
},
"children": [
{
"columnFormatterReference": "[$Labels]"
}
]
}
],
"attributes": {
"class": "sp-card-displayColumnContainer"
}
}
]
}
]
}
]
}
}
- This seems to be a pretty common issue - just Googling "Sharepoint thumbnail issue" yields a ton of complaint threads.
In terms of "why" it's happening, it sounds like a case of "lazy loading" - the page isn't showing everything the second you open it in order to speed up the appearance of a loaded page. It's trying to prioritize what it thinks you want to see. If that's the case, you could try editing the JSON to remove/modify elements related to lazy loading (if you can identify them).
Since changing to the gallery then back to Kanban makes the images appear, it seems the most likely reason why this is happening.
This isn't ideal, but maybe there are third-party apps or add-ins that offer better/different Kanban board views. Finding one that works for you and using it might solve the problem.
In terms of thumbnail image formats, you could also try reducing the size of each thumbnail to get them as small as possible.
Actually, instead of linking directly to full-size images in your JSON you could generate small thumbnail versions and use those in the board view instead.
Anything like that to reduce the page load time should help. Good luck!
