Format an image column with preview in Microsoft Lists and SharePoint

By João Ferreira Jan 24, 2021 Microsoft Lists, SharePoint 1 Comment

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.

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

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

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.