SharePoint Events list tiles view JSON format with image

Question

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

Answer 1

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.