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.

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": "300",
  "width": "300",
  "hideSelection": true,
  "formatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "align-items": "stretch",
      "margin-bottom": "16px",
      "min-width": "150px",
      "justify-content": "space-around",
      "padding": "5px"
    },
    "customRowAction": {
      "action": "defaultClick"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "95%",
          "height": "92%",
          "box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024",
          "overflow": "hidden",
          "border-radius": "2px",
          "padding-left": "16px",
          "padding-top": "16px"
        },
        "attributes": {
          "class": "ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "div",
                "children": [
                  {
                    "elmType": "img",
                    "style": {
                      "display": "block",
                      "border-radius": "50%",
                      "margin-bottom": "25px",
                      "text-align": "center"
                    },
                    "attributes": {
                      "src": "=getUserImage([$FotoE.email], 'M')"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "text-align": "center"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "color": "#333333",
                      "font-size": "16px",
                      "font-weight": "600"
                    },
                    "txtContent": "[$field_1]"
                  },
ETC..

 

SharePoint Online
  • ganeshsanap's avatar
    ganeshsanap
    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.

  • ganeshsanap's avatar
    ganeshsanap
    MVP
    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