Forum Discussion

Copper Contributor

Aug 04, 2023

Solved

Custom thumbnail images with a fallback to default ones

Hi all, I want to set up my SharePoint view (first the List, later also the Tiles view) so that it would show thumbnails for each file and folder. Some files in the folders already show a default...

SharePoint Online

ganeshsanap

Aug 07, 2023

gretesh Seems like Thumbnail is kind of reserved/default column name in SharePoint libraries. Try using this JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "=getThumbnailImage([$Thumbnail], 50, 50)"
      },
      "style": {
        "display": "=if([$Thumbnail.serverRelativeUrl]=='', 'none', 'block')",
        "height": "50px"
      }
    },
    {
      "elmType": "img",
      "attributes": {
        "src": "@thumbnail.small"
      },
      "style": {
        "display": "=if([$Thumbnail.serverRelativeUrl]=='', 'block', 'none')",
        "height": "50px"
      }
    }
  ]
}

For safer side, I will suggest you to create a Image column with different name (say CustomThumbnail) and then use JSON like below in Image column:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "=getThumbnailImage([$CustomThumbnail], 50, 50)"
      },
      "style": {
        "display": "=if([$CustomThumbnail.serverRelativeUrl]=='', 'none', 'block')",
        "height": "50px"
      }
    },
    {
      "elmType": "img",
      "attributes": {
        "src": "@thumbnail.small"
      },
      "style": {
        "display": "=if([$CustomThumbnail.serverRelativeUrl]=='', 'block', 'none')",
        "height": "50px"
      }
    }
  ]
}

I have tested both the JSON and working fine for me.

Output:

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

ganeshsanap

MVP

Aug 07, 2023

gretesh Are you using SharePoint Image column for custom thumbnail/image?

Try using this JSON:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "img",
  "attributes": {
    "src": "=if([$Thumbnail.serverRelativeUrl], getThumbnailImage([$Thumbnail], 100, 100), @thumbnail.small)"
  }
}

Where Thumbnail is the internal name of your custom image column. You can get the internal name of your column by following this article: How to find the Internal name of columns in SharePoint Online?

Or use this:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "img",
  "attributes": {
    "src": "=if([$Thumbnail.serverRelativeUrl]!='', getThumbnailImage([$Thumbnail], 100, 100), @thumbnail.small)"
  }
}

gretesh
Copper Contributor
Aug 07, 2023

Thanks for your tips, ganeshsanap
Unfortunately, your suggested snippets still don't allow me to display both, the custom uploaded images and the default thumbnails (as fallback). Somehow, the "else"-clause doesn't seem to get executed, both of your snippets from above give the following result:

Could there be a bug in how the JSON is interpreted?

FYI, yes, the column that I have named "Thumbnail" is of type of Image:
- ganeshsanap
  MVP
  Aug 07, 2023
  gretesh Seems like Thumbnail is kind of reserved/default column name in SharePoint libraries. Try using this JSON:
  
  { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "children": [ { "elmType": "img", "attributes": { "src": "=getThumbnailImage([$Thumbnail], 50, 50)" }, "style": { "display": "=if([$Thumbnail.serverRelativeUrl]=='', 'none', 'block')", "height": "50px" } }, { "elmType": "img", "attributes": { "src": "@thumbnail.small" }, "style": { "display": "=if([$Thumbnail.serverRelativeUrl]=='', 'block', 'none')", "height": "50px" } } ] }
  
  For safer side, I will suggest you to create a Image column with different name (say CustomThumbnail) and then use JSON like below in Image column:
  
  { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "children": [ { "elmType": "img", "attributes": { "src": "=getThumbnailImage([$CustomThumbnail], 50, 50)" }, "style": { "display": "=if([$CustomThumbnail.serverRelativeUrl]=='', 'none', 'block')", "height": "50px" } }, { "elmType": "img", "attributes": { "src": "@thumbnail.small" }, "style": { "display": "=if([$CustomThumbnail.serverRelativeUrl]=='', 'block', 'none')", "height": "50px" } } ] }
  
  I have tested both the JSON and working fine for me.
  
  Output:
  Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.
  - gretesh
    Copper Contributor
    Aug 07, 2023
    Thanks a lot for the quick reply, ganeshsanap! Using the if-clause only for the display settings solved it for me 🙂 I'll use this as a workaround.
    
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    For the record, my original issue doesn't seem to be related to the fact that the column was called "Thumbnail". At least using the older snippets on a new column called "Test" (type "Image") didn't solve the issue:
    { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "img", "attributes": { "src": "=if([$Test.serverRelativeUrl]!='', getThumbnailImage([$Test], 100, 100), @thumbnail.small)" } }