SharePoint Events list tiles view JSON format with image

Edwin Wong 0 Reputation points
2024-06-28T06:08:21.02+00:00

Hi,

According to the PNP list-formatting page https://github.com/pnp/List-Formatting/tree/master/view-samples/event-tiles, I can customize it with JSON. However, how can I include the event page image on it? What variable should I use for the img src?

Thanks!

Edwin

User's image

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,108 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Emily Du-MSFT 43,421 Reputation points Microsoft Vendor
    2024-06-28T10:19:38.4+00:00

    To show a picture in the gallery view of event list, first you need to store the image in the event list.

    Here are reference codes to show image in the gallery view.

    1.Add an image column in the list.

    2.Add following codes into example codes you provided. 

    {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-previewColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-imageContainer"
                },
                "children": [
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-bgColor-neutralLight sp-card-imagePreviewBackground"
                    },
                    "children": [
                      {
                        "elmType": "img",
                        "style": {
                          "display": "=if([$Photo] == '', 'none', '')"
                        },
                        "attributes": {
                          "src": "=getThumbnailImage([$Photo], 400, 400)",
                          "class": "sp-card-imagePreview"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },

    Reference:
    https://manueltgomes.com/microsoft/sharepoint/image-not-showing-in-the-gallery-view/

    Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.

    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.