SharePoint List - Gallery View - open directly

Question

Hello, Is it possible that clicking on the whole map (or on the image) opens the respective link? At the moment only the single element opens.

Answer 1

Hi @Martin, Heidi (SE GP T SP PS) ,

You can try this:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "hideSelection": true,
  "formatter": {
    "elmType": "div",
    "children": [
      {
        "elmType": "a",
        "style": {
          "position": "absolute"
        },
        "attributes": {
          "target": "_blank",
          "href": "[$Link]"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "[$Picturelink]"
            },
            "style": {
              "height": "200px",
              "width": "200px"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "width": "300px",
          "height": "10px",
          "padding-top": "250px"
        },
        "children": [
          {
            "elmType": "span",
            "txtContent": "[$Title]",
            "style": {
              "width": "30px",
              "height": "10px"
            }
          }
        ]
      }
    ]
  }
}

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Hi @Martin, Heidi (SE GP T SP PS) ,

First of all, please allow me to confirm with you, do you want to jump when you click on the entire image? If yes, you can refer to the method:

This is the list I used to test:

This is the JSON code used to view formatting:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "hideSelection": true,
  "width": "100px",
  "height": "100px",
  "formatter": {
    "elmType": "div",
    "children": [
      {
        "elmType": "a",
        "style": {
          "position": "absolute"
        },
        "attributes": {
          "target": "_blank",
          "href": "[$Link]"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "[$Picturelink]"
            },
            "style": {
              "height": "300px",
              "width": "300px"
            }
          }
        ]
      }
    ]
  }
}

This is the result:

Or, your requirement is to click the icon in the picture, and then you will jump to the corresponding link?

If yes, this is customization. The Q&A forum is currently dedicated to troubleshooting. For customization services, I suggest you go to the Partner Center to obtain the corresponding services.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.