> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fetchski-attract.com/llms.txt
> Use this file to discover all available pages before exploring further.

# List images

> The images in the library, most recently updated first, a page at a time.

```ts TypeScript wrap theme={"dark"}
import { createSiteClient } from '@fetchski/attract-cms-sdk';

const site = createSiteClient();
const listMediaImages = await site.fetchskiMedia().listMediaImages();
```

```json 200 wrap theme={"dark"}
{
  "results": [
    {
      "_id": "clx8k2m0a0001abcd1234efgh",
      "slug": "image-team-at-work",
      "title": "Team at work",
      "alt": "Three people around a table with laptops",
      "folderPath": "Marketing/Team",
      "width": 2400,
      "height": 1600,
      "extension": "jpg",
      "bytes": 845210,
      "urls": {
        "original": "https://cdn.example.com/attachments/abc123-team-at-work.original.jpg",
        "max": "https://cdn.example.com/attachments/abc123-team-at-work.max.jpg",
        "full": "https://cdn.example.com/attachments/abc123-team-at-work.full.jpg",
        "two-thirds": "https://cdn.example.com/attachments/abc123-team-at-work.two-thirds.jpg",
        "one-half": "https://cdn.example.com/attachments/abc123-team-at-work.one-half.jpg",
        "one-third": "https://cdn.example.com/attachments/abc123-team-at-work.one-third.jpg",
        "one-sixth": "https://cdn.example.com/attachments/abc123-team-at-work.one-sixth.jpg"
      }
    }
  ],
  "page": 1,
  "perPage": 25,
  "total": 1
}
```

## In your app

A function makes the call on the client it is given, so your code passes the real one and a test passes a fake.

**1. Add the function**

```ts src/attract/list-media-images.ts theme={"dark"}
import type { SiteClient } from '@fetchski/attract-cms-sdk';

export async function listMediaImages(site: SiteClient) {
  return site.fetchskiMedia().listMediaImages();
}
```

**2. Call it**

A script makes the client once and calls the function:

```ts scripts/list-media-images.ts theme={"dark"}
import { createSiteClient } from '@fetchski/attract-cms-sdk';
import { listMediaImages } from '../src/attract/list-media-images.ts';

const site = createSiteClient();
console.log(await listMediaImages(site));
```

```bash Terminal theme={"dark"}
node --env-file=.env scripts/list-media-images.ts
```

A route handler, a job or a queue worker calls it the same way.

Use an image’s slug to reference it in an MDX blog import.

> [accordion] Optional parameters
>
> One object, e.g. `listMediaImages({ q })`; leave out the optional fields.
>
> **q** `string | null | undefined`
>
> **Optional.** Leave it out (or pass `null`) and it isn’t sent: the site’s default applies. Words matched against each image’s title, alt text and other text: any of the words matches, best match first.
>
> **folder** `string | null | undefined`
>
> **Optional.** Leave it out (or pass `null`) and it isn’t sent: the site’s default applies. A media folder ID: only what is in that folder.
>
> **includeSubfolders** `boolean | null | undefined`
>
> **Optional.** Leave it out and the site uses `true`. With `folder`: include its subfolders too.
>
> **limit** `number | null | undefined`
>
> **Optional.** Leave it out and the site uses `25`. Items per page: 1 to 100, 25 when left out (a value outside is brought into that range, never refused).
>
> **page** `number | null | undefined`
>
> **Optional.** Leave it out and the site uses `1`. Page number, from 1.

> [accordion] Returns
>
> A `ListMediaImagesResponse`. A page of images. Read its properties (`listMediaImages.results`): each says whether the site always sends it. The example answer is the site’s wire JSON: some keys differ from the property names (`_id` → `id`, `two-thirds` → `twoThirds`, `one-half` → `oneHalf` …).
>
> **results** `readonly MediaImage[]`
>
> **Always sent.** A list of `MediaImage`.
>
> **MediaImage**
>
> One image from the Images library.
>
> **id** `string | null`
>
> **Always sent, can be `null`.** The image’s document ID (aposDocId).
>
> **slug** `string | null`
>
> **Always sent, can be `null`.** Reference an image in an MDX import by it.
>
> **title** `string | null`
>
> **Always sent, can be `null`.** Its title.
>
> **alt** `string`
>
> **Always sent.** Alt text; empty when none is set.
>
> **folderPath** `string | null`
>
> **Always sent, can be `null`.** The media folder it sits in.
>
> **width** `number | null`
>
> **Always sent, can be `null`.** Pixels.
>
> **height** `number | null`
>
> **Always sent, can be `null`.** Pixels.
>
> **extension** `string | null`
>
> **Always sent, can be `null`.** File extension, e.g. `jpg`.
>
> **bytes** `number | null`
>
> **Always sent, can be `null`.** Size of the original file.
>
> **urls** `MediaImageUrls`
>
> **Always sent.** A `MediaImageUrls`. A URL per rendered size.
>
> **MediaImageUrls**
>
> **original** `string`
>
> **Sometimes sent:** `undefined` when the site leaves it out. Format: an absolute URL.
>
> **max** `string`
>
> **Sometimes sent:** `undefined` when the site leaves it out. Format: an absolute URL.
>
> **full** `string`
>
> **Sometimes sent:** `undefined` when the site leaves it out. Format: an absolute URL.
>
> **twoThirds** `string`
>
> **Sometimes sent:** `undefined` when the site leaves it out. Format: an absolute URL.
>
> **oneHalf** `string`
>
> **Sometimes sent:** `undefined` when the site leaves it out. Format: an absolute URL.
>
> **oneThird** `string`
>
> **Sometimes sent:** `undefined` when the site leaves it out. Format: an absolute URL.
>
> **oneSixth** `string`
>
> **Sometimes sent:** `undefined` when the site leaves it out. Format: an absolute URL.
>
> **page** `number`
>
> **Always sent.**
>
> **perPage** `number`
>
> **Always sent.**
>
> **total** `number`
>
> **Always sent.** Every match, across all pages.

> [accordion] Errors
>
> Nothing to catch: the SDK retries what is safe, and throws the rest as the classes below; catch only what you want to react to (see [Errors and testing](https://docs.fetchski-attract.com/typescript/errors.md)).
>
> **AuthenticationFailed** `401`
>
> The API key is missing, malformed, unknown, disabled, expired or archived, or a request its signing mode requires to be signed is not.
>
> **Retried first:** No. **Read:** `siteMessage`, `errorName`, `data`.
>
> **Forbidden** `403`
>
> The API key lacks the scope this route needs, is used from outside its allowlist, or the caller is anonymous.
>
> **Retried first:** No. **Read:** `siteMessage`, `errorName`, `data`.
>
> **RateLimited** `429`
>
> The key used up its reads-per-minute limit. Still, after the client’s own waits and retries.
>
> **Retried first:** Yes: the client waits `Retry-After` (1 s when absent; over 60 s it gives up at once) and retries, up to `retries` times (2 by default). **Read:** `retryAfter` (seconds, or null), `siteMessage`.
>
> **SiteError** `5xx`
>
> The site failed (or something in front of it did). Its logs say why.
>
> **Retried first:** A 502, 503 or 504: yes, after 0.5 s then 1 s. A 500: no. **Read:** `siteMessage`, `errorName`, `data`.
>
> **SiteUnreachable** `no answer`
>
> No answer: DNS, a refused connection, TLS, or the timeout (15 s per attempt by default).
>
> **Retried first:** Yes, after 0.5 s then 1 s. **Read:** `reason`, `neverConnected`.
>
> **RequestNotSent** `not sent`
>
> The client refused to send it (e.g. a path segment of `..`); the site never saw it.
>
> **Retried first:** No. **Read:** `reason` (what to change).
>
> **SiteRequestFailed** `any other`
>
> Any other status, or a success whose JSON doesn’t match this SDK version’s types (update the SDK).
>
> **Retried first:** No. **Read:** `reason`, `status`.
>
> **UnknownSite** `setup`
>
> `sites.forSite('acme')` named a slug your sites (`createSiteClients()`) don’t have.
>
> **Retried first:** No: nothing was sent. **Read:** `message`, `slug`.
>
> **SiteConfigurationError** `setup`
>
> The client’s settings are wrong: no `FETCHSKI_ATTRACT_URL` (or `baseUrl`), or a malformed API key.
>
> **Retried first:** No: nothing was sent. **Read:** `message` (what to fix).

## Behavior

* **Access:** an API key with `images:read` — or `media:all`, or `admin:all` — or any signed-in CMS user (who sees only what they may view). Anonymous callers get 403.
* **Retries:** a read is safe to repeat: the client retries it on no answer, a 502/503/504 and a 429.
* **Timeout:** 15 s per attempt by default; raise `timeout` (milliseconds) on the client for longer.
* **Paging:** one page per call. To walk them all, use `listMediaImagesAll()` (see More examples): it asks for the next page as you iterate, and stops once `page` × `perPage` reaches `total`.

## More examples

`listMediaImagesAll()` takes `listMediaImages()`’s arguments except `page`.

```ts Every page wrap theme={"dark"}
import { createSiteClient } from '@fetchski/attract-cms-sdk';

const site = createSiteClient();
for await (const mediaImage of site.fetchskiMedia().listMediaImagesAll()) {
  console.log(mediaImage); // the next page is fetched as you iterate
}
```

## Test it

It calls the function above with a fake client: the fake answers every call with a valid example, so nothing leaves your machine and no settings or key are needed. Run it with `node --test`.

```ts tests/fetchskiMedia-listMediaImages.test.ts theme={"dark"}
import { test } from 'node:test';
import { fakeSite } from '@fetchski/attract-cms-sdk/testing';
import { listMediaImages } from '../src/attract/list-media-images.ts';

test('fetchskiMedia.listMediaImages', async () => {
  const site = fakeSite();
  await listMediaImages(site);
  site.assertCalled('fetchskiMedia.listMediaImages');
});
```

**Answer with your own values:** fake `fetchskiMedia.listMediaImages` with a `sequence()` of pages, each `factories.ListMediaImagesResponse({...})`, and walk `listMediaImagesAll()`.

```ts tests/fetchskiMedia-listMediaImages-answer.test.ts theme={"dark"}
import assert from 'node:assert/strict';
import { test } from 'node:test';
import { factories, fakeSite, sequence } from '@fetchski/attract-cms-sdk/testing';

test('fetchskiMedia.listMediaImages answers your values', async () => {
  const site = fakeSite({
    'fetchskiMedia.listMediaImages': sequence(
      factories.ListMediaImagesResponse({ page: 1, perPage: 1, total: 2 }),
      factories.ListMediaImagesResponse({ page: 2, perPage: 1, total: 2 })
    )
  });
  const walked: unknown[] = [];
  for await (const mediaImage of site.fetchskiMedia().listMediaImagesAll()) {
    walked.push(mediaImage);
  }
  assert.equal(walked.length, 2);
});
```

To fake `listMediaImagesAll()`, answer `fetchskiMedia.listMediaImages` (the walk calls it page by page): a `sequence()` of answers for several pages.

## Related

> [card] [List videos](https://docs.fetchski-attract.com/typescript/reference/fetchski-media/list-media-videos.md)
>
> `site.fetchskiMedia().listMediaVideos()`

> [card] [Get one image](https://docs.fetchski-attract.com/typescript/reference/fetchski-media/get-media-image.md)
>
> `site.fetchskiMedia().getMediaImage()`

> [card] [Get one video](https://docs.fetchski-attract.com/typescript/reference/fetchski-media/get-media-video.md)
>
> `site.fetchskiMedia().getMediaVideo()`

> [card] [GET /fetchski-media/images](https://docs.fetchski-attract.com/api-reference/fetchski-media/list-images.md)
>
> The endpoint this calls, in the API reference: the HTTP request and answer, and every rule the site checks.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.