# Media pack

Photos, video and music: galleries, players and full-size views.

Added with: `npx prongs add media` · Profile: [UI](https://www.prongs.dev/docs/intents/ui.md) · Intents: [6](#intents) · Domains: [`action.*`](https://www.prongs.dev/docs/intents/action.md) [`nav.*`](https://www.prongs.dev/docs/intents/nav.md) [`layout.*`](https://www.prongs.dev/docs/intents/layout.md) [`media.*`](https://www.prongs.dev/docs/intents/media.md) [`dialog.*`](https://www.prongs.dev/docs/intents/dialog.md)

## Adding it

```bash
npx prongs add media
```

Copies the 6 intents below into your registry, skipping any it already has, and regenerates `PRONGS.md`. A “not for” line that points at an intent your registry does not have is left out.

## Intents

### [`action.*`](https://www.prongs.dev/docs/intents/action.md) Action

| Intent | Status | Use it for |
|---|---|---|
| [`action.skip`](https://www.prongs.dev/docs/intents/action/skip.md) | `<button>` | Moves to the next or previous item in a sequence someone steps through: the next track, the previous episode, the next photo in a dialog.media |

### [`nav.*`](https://www.prongs.dev/docs/intents/nav.md) Navigation

| Intent | Status | Use it for |
|---|---|---|
| [`nav.dot`](https://www.prongs.dev/docs/intents/nav/dot.md) | `<a>` | Shows which item of a set is open, and opens that one, when the items have no titles: the photos in a dialog.media, the slides of a carousel. Pass current on the one shown, and a label like "Photo 2 of 5" |

### [`layout.*`](https://www.prongs.dev/docs/intents/layout.md) Layout

| Intent | Status | Use it for |
|---|---|---|
| [`layout.overlay`](https://www.prongs.dev/docs/intents/layout/overlay.md) | `<div>` | Controls placed over a photo or video, like the arrows in a dialog.media, kept readable on any image |

### [`media.*`](https://www.prongs.dev/docs/intents/media.md) Media

| Intent | Status | Use it for |
|---|---|---|
| [`media.artwork`](https://www.prongs.dev/docs/intents/media/artwork.md) | `<img>` | The cover art of something people play, read or watch: an album, a book, a film poster. Taller than it is wide |
| [`media.enlarged`](https://www.prongs.dev/docs/intents/media/enlarged.md) | `<img>` | A photo shown as large as fits, in a frame of one fixed size so flipping between photos never moves anything: the photo in a dialog.media, edge to edge on its side. On small screens it is a square across the full width |

### [`dialog.*`](https://www.prongs.dev/docs/intents/dialog.md) Dialog

| Intent | Status | Use it for |
|---|---|---|
| [`dialog.media`](https://www.prongs.dev/docs/intents/dialog/media.md) | `<dialog>` | Shows one photo or video large over the dimmed page, with its details beside it: who posted it, the caption, comments. A click outside closes it. On small screens it fills the screen, the photo between its title and its details |

## Next to the starter

The starter intents this pack’s intents are told apart from. Each pack intent’s page says when to use which.

| Intent | Use it for | Resolves to |
|---|---|---|
| [`media.image`](https://www.prongs.dev/docs/intents/media/image.md) | An image that illustrates content or is the content: an article cover, a screenshot, a product photo, a logo, cover art | `<img>` |
| [`dialog.task`](https://www.prongs.dev/docs/intents/dialog/task.md) | A focused task that blocks the page until done or dismissed: edit settings, compose | `<dialog>` |
| [`layout.actions`](https://www.prongs.dev/docs/intents/layout/actions.md) | Commands side by side: a form’s buttons, a dialog’s choices | `<div>` |
| [`action.submit`](https://www.prongs.dev/docs/intents/action/submit.md) | Does what a form, dialog or step exists for: send, save, create, confirm, next, pay. Pass verb="save", "create", "pay"... to name it for analytics. | `<button>` |
| [`nav.paging`](https://www.prongs.dev/docs/intents/nav/paging.md) | One link in a layout.pager below a long list or table: a page number, Previous or Next. Pass current on the page shown | `<a>` |

## For registry authors

**Pack intent.** `prongs add media` puts the media pack’s intents in your registry. They are then yours like the starter intents: rename, restyle and add to them, and see them with `prongs add gallery`.