> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.signoffkit.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.signoffkit.com/_mcp/server.

# Photos and video

> Where SignOff Kit photos come from, how credits work, using your own Unsplash key, the optional hero video, and what happens when photos can't load.

The `signoff-photos` skill fills your page's photo slots with real photos that fit the subject and palette. You don't need a key, and the agent never asks you for one.

## Where photos come from

* **SignOff Kit Free:** credited Unsplash photos, fetched through SignOff Kit's shared Unsplash service and hotlinked from `images.unsplash.com`, as Unsplash's guidelines require.
* **SignOff Kit:** Unsplash first, then Pexels or Pixabay if Unsplash is rate limited or down. The service picks the source for you. Unsplash and Pexels photos are hotlinked; Pixabay photos are downloaded into the site's `img/` folder, because Pixabay doesn't allow permanent hotlinking.

For each slot, the skill searches from the slot's subject and keywords, ranks the results by how well they match your palette, orientation and subject, avoids repeating a photo already on the page, and prefers a different photographer for each slot. It sizes every photo with a responsive `srcset` from 480 to 1920 pixels wide.

## Credits

The skill adds one credit line to the footer, such as "Photos by X and Y on Unsplash", with links to each photographer. Credits never sit on top of a photo. It also writes `photos.json` and a `## Photos` section in `HANDOFF.md` that lists every photographer, photo page and source, so your client knows where each image came from.

## Using your own Unsplash key

This is opt-in. Set `UNSPLASH_ACCESS_KEY` on your computer and say yes when the agent asks whether to use your own key (or run `photos.mjs` with `--own-key`). If you don't have a key, you can get one at [https://unsplash.com/developers](https://unsplash.com/developers), or simply carry on with the shared service.

## When photos can't load

If photos can't be fetched, for example because you're offline, the build still finishes. The empty slots get tidy placeholders, and the agent tells you in one line at handoff that the photo step can be run again. Run it again once you're online to fill them. The skill never switches to another image source without asking you.

In Codex, photos need network access in the sandbox. If the agent mentions it, add `[sandbox_workspace_write]` with `network_access = true` to `~/.codex/config.toml`, restart Codex and run the photo step again.

## Your own photos

Have photos of your own? Say so in the intake, and the agent skips the photo step for those slots.

## Hero video (SignOff Kit)

If your brief asks for motion in the hero, the `signoff-video` skill searches Pixabay clips through the SignOff Kit video service, with no key needed. You check the clips by eye, and once you pick one, it copies a 720p/540p MP4 and a poster still into `site/media/`, so nothing is hotlinked. The video plays muted on a loop and shows the poster instead when reduced motion is on. If video can't load, your hero keeps its photo.