SOLVED

Custom thumbnail images with a fallback to default ones

Copper Contributor

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 thumbnail (e.g. images and some 3D formats) but for some, I have uploaded an image. I'm struggling to set up the SharePoint view so that it would show this custom image, and if it is missing, fall back to a default thumbnail (if available). 

 

By applying the following code snippets to a "Thumbnail" column I can make either the thumbnails show or the custom images, but not together in wished the logic. Could there be a bug? Or does anyone know a workaround for this? 


Thanks in advance for any help and hints. 


------------------------------------------------------------------------------------------------

 

Here are my trials:

Test A) WORKS AS EXPECTED - the custom image is shown
(Note: only one out of the 6 files in the folder have a custom image uploaded):

 

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

 

gretesh_0-1691161105543.png

Test B) WORKS AS EXPECTED - default thumbnails are shown

(Note: all 6 files have default thumbnails/previews):

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "img",
  "attributes": {
    "src" : "@thumbnail.small”
  }
}

 

gretesh_1-1691161330382.png

Test C) WORKS AS EXPECTED - print a div with either "uploaded" or "default" text

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent" : "=if(@currentField, 'uploaded', 'default')"
}

 

gretesh_2-1691161410726.png

Test D) DOESN'T WORK - show either uploaded or default thumbnail

 

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

 

gretesh_3-1691161500526.png

Test E) DOESN'T WORK - print a div with text field. If the IF-statement includes anything currentField related (e.g. serverRelativeUrl), the previously working conditional doesn’t catch the “default” case anymore:

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent" : "=if(@currentField, @currentField.serverRelativeUrl, 'default')"
}

 

gretesh_4-1691161727996.png

 

6 Replies

@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)"
  }
}

 


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.

 

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: 

gretesh_2-1691403263064.png

 

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: 

gretesh_0-1691402946036.png

 

best response confirmed by gretesh (Copper Contributor)
Solution

@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

ganeshsanap_0-1691404851626.png


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.

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)"
  }
}

 

gretesh_0-1691407215236.png

 

@ganeshsanap @gretesh ; Did you ever figure out how to have this update work in the Tiles view too? Your assistance worked great on the list view for the specific column, but need help on the tiles view.

@wlauritson 

 

I used the snippet @ganeshsanap suggested and with this, the thumbnails I set up back then show up both in list and tiles mode.

 

{
  "$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"
      }
    }
  ]
}

 

Now trying adding new thumbnails both in a new folder (to test the json snippet) and in the old folder, but uploading doesn't seem to work anymore (the image gets uploaded but after I close the grid view, the uploaded image blob is shown broken - "file not found"). So I cannot test whether the old snippet still works as expected with any new uploads. 

 

1 best response

Accepted Solutions
best response confirmed by gretesh (Copper Contributor)
Solution

@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

ganeshsanap_0-1691404851626.png


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.

View solution in original post