Forum Discussion

Peki72's avatar
Peki72
Copper Contributor
Aug 17, 2023

How to center the profile picture on my Sharepoint list gallery view card?

Dear community, I have a Sharepoint List in Gallery view with JSON-formatting. I have only one issue is that my profile picture isn't aligned center! Everything else is only not my profile picture. ...
  • ganeshsanap's avatar
    Aug 18, 2023

    Peki72 Try removing the "display": "block" styling added for your img element in the JSON.

     

    Here's the working JSON in my case without display styling for the img element: 

     

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
      "height": 150,
      "width": 254,
      "hideSelection": false,
      "fillHorizontally": true,
      "formatter": {
        "elmType": "div",
        "attributes": {
          "class": "sp-card-container"
        },
        "style": {
          "text-align": "center"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-defaultClickButton"
            },
            "customRowAction": {
              "action": "defaultClick"
            }
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-displayColumnContainer"
                },
                "style": {
                  "text-align": "center"
                },
                "children": [
                  {
                    "elmType": "p",
                    "attributes": {
                      "title": "[$Title]",
                      "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent",
                      "role": "heading",
                      "aria-level": "3"
                    },
                    "style": {
                      "text-align": "center"
                    },
                    "txtContent": "=if ([$Title] == '', '–', [$Title])"
                  }
                ]
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-previewColumnContainer"
                },
                "style": {
                  "text-align": "center"
                },
                "children": [
                  {
                    "elmType": "div",
                    "children": [
                      {
                        "elmType": "img",
                        "style": {
                          "border-radius": "50%",
                          "margin-bottom": "25px",
                          "text-align": "center"
                        },
                        "attributes": {
                          "src": "=getUserImage([$PersonColumn.email], 'M')"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    }

     

    Output


    Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

Resources