> For the complete documentation index, see [llms.txt](https://docs.notionapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.notionapps.com/how-to-guides/media-gallery.md).

# Media Gallery

## Media Gallery

### Media Gallery

Display Notion **Files & media** as a thumbnail **Media Gallery** on Details — tap a thumb to open a larger lightbox view.

{% hint style="info" %}
**What changed**\
A new view component, **Media Gallery**, is preferred for Notion `files` properties. It shows a multi-image grid with lightbox. Uploading still uses existing Create/Update file/image components — Media Gallery is for viewing.
{% endhint %}

***

#### What you get

| Capability     | Maker setup                               | End-user result               |
| -------------- | ----------------------------------------- | ----------------------------- |
| Thumbnail grid | Add **Media Gallery**, bind files field   | Row/grid of image thumbs      |
| Lightbox       | Automatic                                 | Tap a thumb for a larger view |
| Multi-file     | Notion files property with multiple items | All images shown when present |

![Details with Media Gallery thumbnails](https://iili.io/Cwe3bnI.png)

***

#### Before you start

* A Notion **Files & media** property with at least one image on a sample page
* A Details screen for that database
* **Reload Data** if the property was just added

***

#### Step 1 — Add Media Gallery

1. Open the Details screen.
2. **Add component** → **Media Gallery**.
3. Bind it to the files/media property (for example **Photos**).
4. Place it where you want media to appear (often near the top of Details).

***

#### Step 2 — Preview with real files

1. Select a record that has images attached in Notion.
2. Confirm thumbnails appear in builder preview.
3. Tap a thumbnail (where supported in preview) to confirm lightbox behavior.
4. **Publish** and verify on the live app.

![Details layout including Media Gallery](https://iili.io/Cwe3QuR.png)

***

#### Checklist

* [ ] Media Gallery bound to a files property
* [ ] Sample record has images in Notion
* [ ] Thumbnails show in preview and published app
* [ ] Non-image files degrade gracefully (no crash)

***

#### Troubleshooting

| Symptom            | Likely cause                       | Fix                                        |
| ------------------ | ---------------------------------- | ------------------------------------------ |
| Empty gallery      | No files on the page / wrong field | Attach files in Notion; re-bind field      |
| Broken thumb       | Expired Notion file URL            | Reload Data / reopen record                |
| Cannot upload here | By design                          | Use Create/Update file or image components |

***

#### Related reading

* [Board layouts and Details polish (overview)](https://docs.notionapps.com/guides/board-layouts-and-details-polish)
* [20 Jul 2026 Release](https://docs.notionapps.com/release-notes/20-jul-2026-release)

## Builder options at a glance

This guide teaches a focused maker workflow. For the full screen option inventory (What it does / How to use / Why) and annotated builder screenshots, use the matching **Types of Screens** guide:

* Data screens: [List (View Items)](https://docs.notionapps.com/screens-and-components/types-of-screens/list-view-items), [Details](https://docs.notionapps.com/screens-and-components/types-of-screens/details-view-one-item), [Form (Add Item)](https://docs.notionapps.com/screens-and-components/types-of-screens/add-new-item-form), [Form (Update One Item)](https://docs.notionapps.com/screens-and-components/types-of-screens/form-update-one-item), [List (Update Items)](https://docs.notionapps.com/screens-and-components/types-of-screens/update-items-form), [Content](https://docs.notionapps.com/screens-and-components/types-of-screens/content)
* Everyday chrome / Queue & activity: see the [Types of Screens](https://docs.notionapps.com/screens-and-components/types-of-screens) index
* Automation native screens: [Native Automation Screens](https://docs.notionapps.com/screens-and-components/types-of-screens/native-automation-and-operational-screen-guides)

### Recommended defaults

* Change one option family at a time, then publish and test on phone and desktop.
* Prefer screen-level settings in Content / Behaviour / Appearance before custom CSS/JS.
* Keep public access and navigation visibility intentional on every screen you link from this guide.