Format an image column with preview in Microsoft Lists and SharePoint

Microsoft Lists and SharePoint lists now include a column type dedicated exclusively to images that allows a user to upload an image directly to the form and displays a small thumbnail of the image in the list view.

This was a massive improvement when compared with the classic hyperlink/picture column type and in this article, I will show you how to take the new Image column type to the next using column formatting.

Custom column formatting Microsoft Lists and SharePoint

Having to click in a list image to open it in a new tab is quite annoying and will send the user away form the list context. To avoid it, the following code generates a popup with the real image that is shown in the context of the list when the user hovers it.

How to format an image column type

To implement the formatting in any Image column type you must to do the following:

  1. Click in the arrow next to the column name
  2. Expand the column settings and click in the format this column
    Custom column formatting Microsoft Lists and SharePoint
  3. In the format column pane paste the JSON code below
    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
      "elmType": "img",
      "attributes": {
        "src": "@currentField.serverRelativeUrl"
      },
      "style": {
        "width": "42px",
        "padding": "5px"
      },
      "customCardProps": {
        "formatter": {
          "elmType": "div",
          "style": {
            "padding": "15px 45px 15px 15px"
          },
          "children": [
            {
              "elmType": "img",
              "attributes": {
                "src": "@currentField.serverRelativeUrl"
              },
              "style": {
                "width": "600px",
                "padding": "5px"
              }
            }
          ]
        },
        "openOnEvent": "hover",
        "directionalHint": "rightCenter",
        "isBeakVisible": true,
        "beakStyle": {
          "backgroundColor": "white"
        }
      }
    }
    
  4. Click save
    Custom column formatting with preview Microsoft Lists and SharePoint

To test your new formatting all you have to do is hover the image in the list as shown in the following animation.

Custom column formatting with preview for Microsoft Lists and SharePoint

Adjustments to the JSON format

Column formatting is a combination of JSON and HTML that creates custom HTML structures to render the values in columns, this particular example has 2 images and makes use of the custom card property.

The first image is used to display the thumbnail in the column itself and has a width of 42px, while the second image is used to display the preview inside the card and has a width of 600px.

The following list of properties is formatting the card that is configured to be displayed on hover, on the right side and with a beak visible; in the following list you have the cart properties and next to the name of the property you have all the options you can use to format your card.

  • “openOnEvent”: “hover | click”
  • “directionalHint”: “topCenter | bottomCenter | leftCenter | rightCenter”
  • “isBeakVisible”: true | false

Adjust it to your own needs and enjoy the formatting for the modern image column type.


One Response to “Format an image column with preview in Microsoft Lists and SharePoint”

  1. Julien

    January 25, 2021

    Thanks for sharing!! Keep going!

    Reply

Leave a Reply


I've been working with Microsoft Technologies over the last ten years, mainly focused on creating collaboration and productivity solutions that drive the adoption of Microsoft Modern Workplace.