SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Changing Image Hyperlink Standard Behavior

If you click on an image in a SharePoint list, the image is displayed as a preview. This formatter changes the standard behavior in which a link from another column is used. In this way, a click on the image has the same behavior as if the link had been clicked directly.

Get this format View on GitHub

Shared by Hagen Deike
Updated Nov 21, 2024

Changing Image Hyperlink Standard Behavior formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "margin": "auto",
    "padding-top": "10px",
    "padding-bottom": "10px"
  },
  "children": [
    {
      "elmType": "a",
      "attributes": {
        "href": "[$Link]",
        "target": "_blank",
        "title": "[$Link.desc]"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "=getThumbnailImage(@currentField,64,64)",
            "alt": "@currentField.filename"
          },
          "style": {
            "border-radius": "6px"
          }
        }
      ]
    }
  ]
}
View sourceLink to this definitionimage-hyperlink.json

From the contributor

How to use this sample

Summary

If you click on an image in a SharePoint list, the image is displayed as a preview. This formatter changes the standard behavior in which a link from another column is used. In this way, a click on the image has the same behavior as if the link had been clicked directly.

screenshot of the sample

View requirements

  • A column of type image containing this column formatter
  • A hyperlink column (Internal Name: Link) that contains the target link.

Sample

Solution Author(s)
image-hyperlink.json Hagen Deike (@samurai@sueden.social)

Version history

Version Date Comments
1.0 November 21, 2024 Initial release
1.1 November 21, 2024 Using columns link description instead of title

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

  • Change the Image size on line 21
  • To remove rounded corners, remove the image style on line 24-26
  • Padding between the rows can be tweaked on line 6 & 7
  • Choose how the link opens in the browser on line 14. "_blank" for new window/tab, or "_self" for the same window.