List-Formatting icon indicating copy to clipboard operation
List-Formatting copied to clipboard

Image - Gallery Sample

Open chris883773 opened this issue 1 year ago • 1 comments

Hello,

i am looking for a sample looks like this: image

I have a document library with only images. image

It is possible to write a json to create something like the sample picture?

chris883773 avatar Jul 15 '22 20:07 chris883773

@chris883773 You can create a Gallery view and test bellow formatting, the key to appear as you want it's define on the max width or max height to assume the size of the original images. Its important that you define a max that you manage the size of image, some can be huge...

Sample formatting:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "formatter": {
    "elmType": "div",
    "style": {
      "padding": "20px 5px "
    },
    "children": [
      {
        "elmType": "img",
        "attributes": {
          "src": "[$FileRef]"
        },
        "style": {
          "cursor": "pointer",
          "border-radius": "15px",
          "max-width": "200px",
          "max-height": "100px"
        }
      }
    ]
  }
}

aaclage avatar Jul 15 '22 22:07 aaclage