Forum Discussion

gretesh's avatar
gretesh
Copper Contributor
Aug 04, 2023

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

 

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”
  }
}

 

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

 

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

 

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 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 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.

    • gretesh's avatar
      gretesh
      Copper Contributor

       

      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: 

       

      • 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.

Resources