How to fix and format an image column with preview in Microsoft Lists and SharePoint

By João Ferreira Oct 26, 2023 Formatting 2 Comments

One of the first column formatting samples I did for SharePoint and Microsoft Lists was a lightbox to preview the image stored in the Image field, this way the user is able to see the picture in high resolution without the need to download it or open it in another tab.

This sample is available in the PnP GitHub repo and had several revisions, unfortunately all of them stopped working as some of the image field properties are no longer there. Thankfully there is a new method to get thumbnails from the image that can be used to replace the old properties.

If you were using the original sample and it suddenly no longer works for new images added to the list you must check if you have one of the following definitions to define the source:

• serverRelativeURL
  

  

• thumbnailRender
  

  

If you see this in your code simply delete the src value and replace it by the following function

"src": "=getThumbnailImage(@currentField, 400, 200)"

This function returns a URL pointing to image for the current column with preferred size, the code above results in a URL pointing to an image with 400 width and 200 height.

In the following animation you can see how this column formatting looks with the changes already applied, if you want to use it with your own Image fields I’m also providing a short sample that you can use as a starting point.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "=if(@currentField,'block','none')",
    "max-width": "64px",
    "max-height": "64px",
    "overflow": "hidden",
    "margin": "8px auto -3px -4px",
    "cursor": "pointer"
  },
  "attributes": {
    "title": "@currentField.fileName"
  },
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "=getThumbnailImage(@currentField, 64, 64)"
      },
      "customCardProps": {
        "formatter": {
          "elmType": "div",
          "style": {
            "padding": "8px",
            "background-color": "white"
          },
          "children": [
            {
              "elmType": "img",
              "attributes": {
                "src": "=getThumbnailImage(@currentField, 500, 500)",
                "title": "@currentField.fileName"
              },
              "style": {
                "background-color": "#e6e6e6"
              }
            }
          ]
        },
        "openOnEvent": "click",
        "directionalHint": "rightCenter",
        "isBeakVisible": true,
        "beakStyle": {
          "backgroundColor": "white"
        }
      }
    }
  ]
}