Formatting the image picker panel with JSON view formatting

[matt howell]

I'm using the organizational assets option to provide users a central repo of approved images to use on their sites. For pages we offer a banner image and optimized thumbnail and on smaller screens, each banner and thumb occupy one row in the image picker panel making it easier to select the right file. On larger screens, the panel is wider and the images get mixed up as you can see:

Smaller screen:

Larger screen:

The panel displays whatever the default view of the library is so I've tried various different JSON view formatting methods to restrict the size of the images. The view is in Gallery mode so should I use the tile formatter, or a plain list formatter? Neither has worked so far. 

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
    "tileProps": {
      "hideSelection": false,
      "hideListHeader": true,
      "width": "1204",
      "height": "",
      "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "ms-borderColor-neutralLight"
    },
    "style": {
      "flex-direction": "column",
      "align-items": "stretch",
      "box-sizing": "border-box",
      "border-width": "0px",
      "border-left-width": "0px",
      "border-style": "solid",
      "max-width": "120px",
                  "height":""
    },
    
        
            "children": [
              {
                "elmType": "div",
                "style": {
                  
                },
                "attributes": {
                  "class": "ms-NewsPinningItemImage"
                },
                "children": [
                  {
                    "elmType": "img",
                    "attributes": {
                      "src": "[$ImagePath]"
                      
                    },
                    "style": {
                      "border": "1px solid #808080"
                      
                    }
                }
                ]
            }
        ]
    }
    }  
}    

[#2]

@matt howell You need to apply the JSON in All Documents > Tiles view. 

I have formatted the image tile using SharePoint default "Design mode" and saved view. Here's how it works in "Your Organization" pane while editing the page: 

---

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.

[#3]

Could you elaborate on what you did here? By "SharePoint default "Design mode"" do you mean editing the "document card view"? Is what you're showing in the screenshot an image? Currently I'm restricting the width of the panel in wider screens to force 2 columns in the panel by adding a media query via a custom css file.
if possible I'd like to format the view so the additional css isn't needed.

[#4]

@matt howell Here are the steps I followed:

1. From assets library, click on "Switch view options" dropdown, select "Tiles": 
2. Again click on switch view option dropdown and select "Format current view"
3. Select all options like below image & then click "Edit card" 
4. Select the fields you want to show on card & click "Save": 
5. The changes will be reflected automatically while adding images on site pages. If you want to change the UI of card, you can customize JSON using "Advanced mode".

---

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.

[#5]

Ok I thought that's what you were doing. That doesn't help in this case because I need to show 2 items adjacent to each other (banner and thumb) so I was looking for a JSON view formatting approach.