Image Tile

The Image Tile turns each row of a SharePoint list into a photo-first tile with the title laid over the image, so a list of visual items reads like a gallery instead of a table. It is built with a standard Microsoft List and a small piece of gallery view formatting JSON. Each tile fills with the picture and shows the title and a short caption in a soft gradient at the bottom, making any photo or visual collection easy to browse.

Author

SharePoint Maven

Built with

Lists

Features

Hyperlink Column, JSON, Single Line of Text Column

Common Use Cases

Photo gallery or album
Event highlights and recaps
Team or culture moments
Brand and campaign imagery
Property or product showcase
Portfolio or case-study gallery

Details

Design Pattern: Cards & Tiles
Format Scope: View

Required Columns

Display name	Column type	Internal name
Title	Single line of text	`[Title]`
Image Url	Hyperlink	`[ImageUrl]`
Caption	Single line of text	`[Caption]`

Prerequisites

Build a list with these columns before you paste the JSON.
Populate the list with data. Put a direct link to each picture in ImageUrl – for example an image in the Site Assets library.
Internal column names (in brackets) must match the JSON exactly.
Upload each image to Site Assets (or another library the client users can open), then copy the full https:// address from the browser address bar – do not type or guess the path.
A broken-image symbol usually means the URL, filename, path, extension, capitalization, or permissions are wrong, not the JSON – test the link in a private browser window signed in as a normal client user.

How to Apply JSON code

Create a Gallery view on the list (view dropdown at the top right, Create new view, set the layout to Gallery, then Create).
With the new gallery view open, open the view dropdown again and choose Format current view.
Switch to Advanced mode, paste the JSON below, and click Save.

JSON Code

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 220,
  "width": 240,
  "hideSelection": false,
  "formatter": {
    "elmType": "div",
    "style": {
      "position": "relative",
      "box-sizing": "border-box",
      "height": "100%",
      "width": "100%",
      "border-radius": "10px",
      "overflow": "hidden",
      "background-color": "#3b3a39"
    },
    "children": [
      {
        "elmType": "img",
        "attributes": {
          "src": "[$ImageUrl]",
          "alt": "[$Title]"
        },
        "style": {
          "position": "absolute",
          "top": "0",
          "left": "0",
          "width": "100%",
          "height": "100%",
          "object-fit": "cover"
        }
      },
      {
        "elmType": "div",
        "style": {
          "position": "absolute",
          "left": "0",
          "right": "0",
          "bottom": "0",
          "padding": "16px 14px 12px 14px",
          "background": "linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0.38) 58%, rgba(0,0,0,0))"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "font-size": "16px",
              "font-weight": "700",
              "color": "#ffffff"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "style": {
              "font-size": "12px",
              "color": "#f3f2f1",
              "margin-top": "2px",
              "display": "=if([$Caption] == '', 'none', 'block')"
            },
            "txtContent": "[$Caption]"
          }
        ]
      }
    ]
  }
}

Common Questions About the Image Tile

What is the Image Tile built with?

It is built with a standard Microsoft List (SharePoint list) and gallery view formatting expressed in JSON. There is no custom development, no SPFx solution, and no third-party tools. It is the kind of clean, maintainable formatting Greg Zelfond builds for teams that want a photo gallery without ongoing development overhead.

Where do the images come from?

Each picture comes from a column that stores the image URL, which the tile uses as the background. You upload the images somewhere SharePoint can reach, such as the Site Assets library, and paste each link into the ImageUrl column.

What columns does it need?

It uses three columns: a Title, an ImageUrl, and a Caption. The tile refers to each by its internal name, so the JSON and the columns must line up exactly – here those names are Title, ImageUrl, and Caption.

Does this design use any custom development or third-party tools?

No. It uses only out-of-the-box SharePoint view formatting, which Microsoft supports natively. That keeps it stable and easy to maintain, and nothing breaks when SharePoint is updated. Out-of-the-box is the only way Greg builds, so you can own and extend the design yourself for years.

If LookBook 365 is code-free and out-of-the-box, why does this example include JSON?

Because SharePoint formatting JSON is not custom code – it is a native configuration feature built into lists and libraries. It is declarative: it only describes how existing columns and views look, and cannot run scripts, reach external services, or change your data. Nothing is deployed and nothing breaks when Microsoft updates SharePoint, and you can edit or remove it anytime. That is why LookBook 365 treats it as out-of-the-box and low risk.

Can Greg build a view like this for our team?

Yes – this is exactly the kind of work Greg Zelfond does. As an independent SharePoint consultant and Microsoft MVP, he designs out-of-the-box list and library formatting like this so your team can read and maintain it without a developer. Reach out through the contact page to talk about your lists.