SharePoint Fotogalerie mit Vorschaubildern für Bilder und Ordner, Likes mit Herzen ❤️

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 260,
  "width": 300,
  "hideSelection": true,
  "fillHorizontally": true,
  "formatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-direction": "column",
      "justify-content": "space-between",
      "height": "100%",
      "border": "1px solid #e0e0e0",
      "border-radius": "6px",
      "overflow": "hidden",
      "box-shadow": "0px 4px 6px rgba(0,0,0,0.1)",
      "padding": "0",
      "margin": "0"
    },
    "children": [
      {
        "elmType": "button",
        "style": {
          "all": "unset",
          "cursor": "pointer",
          "display": "block",
          "height": "200px",
          "width": "100%",
          "overflow": "hidden",
          "padding": "0",
          "margin": "0"
        },
        "customRowAction": {
          "action": "defaultClick"
        },
        "children": [
          {
            "elmType": "img",
            "attributes": {
              "src": "=if([$File_x0020_Type] == '', if([$FolderPreview.serverRelativeUrl] != '', [$FolderPreview.serverRelativeUrl], 'https://DEINSHAREPOINT.sharepoint.com/sites/Events/SiteAssets/FotoOrdner.png'), @thumbnail.512x432)",
              "alt": "Preview Image"
            },
            "style": {
              "height": "100%",
              "width": "100%",
              "object-fit": "cover",
              "border": "0",
              "padding": "0",
              "margin": "0"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "justify-content": "space-between",
          "align-items": "center",
          "padding": "10px",
          "background-color": "#f4f4f4"
        },
        "children": [
          {
            "elmType": "div",
            "txtContent": "[$Title]",
            "style": {
              "font-weight": "bold",
              "text-align": "left",
              "flex-grow": "1"
            }
          },
          {
            "elmType": "div",
            "style": {
              "display": "=if([$File_x0020_Type] == '', 'none', 'flex')",
              "align-items": "center",
              "gap": "5px"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "cursor": "pointer",
                  "color": "=if(indexOf([$LikedBy.email], @me) == -1, 'gray', 'red')"
                },
                "attributes": {
                  "iconName": "=if(indexOf([$LikedBy.email], @me) == -1, 'Heart', 'HeartFill')"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "LikesTotal": "=if(indexOf([$LikedBy.email], @me) == -1, Number(length(appendTo([$LikedBy], @me))), Number(length(removeFrom([$LikedBy], @me))))",
                    "LikedBy": "=if(indexOf([$LikedBy.email], @me) == -1, appendTo([$LikedBy], @me), removeFrom([$LikedBy], @me))"
                  }
                }
              },
              {
                "elmType": "div",
                "txtContent": "=if([$LikesTotal] > 0, [$LikesTotal], '')",
                "style": {
                  "font-size": "14px",
                  "font-weight": "bold",
                  "color": "gray"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}