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

# Get Thumbnail Representation

export const MultiRelatedLinks = ({sections = []}) => {
  if (!sections || sections.length === 0) {
    return null;
  }
  return <div className="space-y-8">
      {sections.map((section, index) => <RelatedLinks key={index} title={section.title} items={section.items} />)}
    </div>;
};

export const RelatedLinks = ({title, items = []}) => {
  const getBadgeClass = badge => {
    if (!badge) return "badge-default";
    const badgeType = badge.toLowerCase().replace(/\s+/g, "-");
    return `badge-${badge === "ガイド" ? "guide" : badgeType}`;
  };
  if (!items || items.length === 0) {
    return null;
  }
  return <div className="my-8">
      {}
      <h3 className="text-sm font-bold uppercase tracking-wider mb-4">{title}</h3>

      {}
      <div className="flex flex-col gap-3">
        {items.map((item, index) => <a key={index} href={item.href} className="py-2 px-3 rounded related_link hover:bg-[#f2f2f2] dark:hover:bg-[#111827] flex items-center gap-3 group no-underline hover:no-underline border-b-0">
            {}
            <span className={`px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-wide flex-shrink-0 ${getBadgeClass(item.badge)}`}>
              {item.badge}
            </span>

            {}
            <span className="text-base">{item.label}</span>
          </a>)}
      </div>
    </div>;
};

export const Link = ({href, children, className, ...props}) => {
  const localizedHref = localizeLink(href);
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

<RelatedLinks
  title="REQUIRED GUIDES"
  items={[
{ label: translate("List All Representations for File"), href: "/guides/representations/list-all-representations", badge: "GUIDE" },
{ label: translate("Request Desired Representation"), href: "/guides/representations/request-a-representation", badge: "GUIDE" },
{ label: translate("Download File Representation"), href: "/guides/representations/download-a-representation", badge: "GUIDE" }
]}
/>

A thumbnail is a small image, either as `.png` or as `.jpg` that can be used in
an application as a representation of the file, for example as a placeholder for
a link that downloads or previews the file.

All thumbnail representations except `1024x1024` and `2048x2048` PNGs are
generated upon uploading the source file to Box.

<Warning>
  An deprecated way to get a thumbnail for a file is using the
  <Link href="/guides/representations/thumbnail">thumbnail API</Link>.
</Warning>

## The process

To get a thumbnail representation follow the following steps

* <Link href="/guides/representations/list-all-representations">List all representations</Link>
* <Link href="/guides/representations/request-a-representation">Request a thumbnail</Link> by passing the `x-rep-hints`-header for the desired thumbnail format and size, for example `[jpg?dimensions=32x32]`.
* <Link href="/guides/representations/download-a-representation">Download the thumbnail</Link> by calling the `url_template`, replacing the `{+asset_path}` with an empty string.

<Warning>
  Sometimes the thumbnail can not be created directly. Instead,
  the API will return a `HTTP 202` with a `location` response header.
  The location is for a temporary image that can be used while the thumbnail
  is being generated.
</Warning>

A retry-after response header is also provided to present you with an
estimated amount of seconds before retrying this endpoint.

## Examples

The following a some example `x-rep-hints`-header values

| `x-rep-hints: [jpg?dimensions=32x32]` |
| ------------------------------------- |
| Returns a `32x32` JPEG thumbnail      |

| `x-rep-hints: [jpg?dimensions=32x32][jpg?dimensions=1024x1024]` |
| --------------------------------------------------------------- |
| Returns `32x32` and `1024x1024` JPEG thumbnails                 |

| `x-rep-hints: [jpg?dimensions=32x32][png?dimensions=2048x2048]` |
| --------------------------------------------------------------- |
| Returns a `32x32` JPEG and a `2048x2048` PNG thumbnail          |

| `x-rep-hints: [jpg?dimensions=2048x2048,png?dimensions=2048x2048]`                                                                                                     |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Returns a `2048x2048` JPEG or a `2048x2048` PNG thumbnail, returning the first representation that is available. If neither is available it returns no representations |

## Supported file sizes

The following formats and sizes of thumbnails are available.

| File Type | Dimensions                                                         |
| --------- | ------------------------------------------------------------------ |
| JPG       | `32x32`, `94x94`, `160x160`, `320x320`, `1024x1024`, `2048x2048`\* |
| PNG       | `1024x1024`\*, `2048x2048`\*                                       |

Some restrictions apply to the sizes marked as `*`.

## File size restrictions

### JPEG `2048x2048`

The JPEG `2048x2048` size is only available when the
original file is a JPEG. We recommend either requesting a PNG or both a PNG
and a JPEG for this dimension.

### Video files

JPEG `2048x2048`, PNG `2048x20148` and PNG `1024x1024` representations are not
available for video files.

### Original file size

Thumbnails are not scaled up. If the original file size of the file uploaded to
Box is smaller than the representation dimensions, the resulting thumbnail is
capped at the size of the original file.

## Supported file types

At this time the following file types are supported.

| File Type | File Extensions                                                                                                                                                 |
| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Documents | `doc`, `docx`, `gdoc`, `gsheet`, `gslide`, `gslides`, `odp`, `ods`, `odt`, `pdf`, `ppt`, `pptx`, `rtf`, `wpd`, `xls`, `xlsm`, `xlsx`, `key`, `pages`, `numbers` |
| Images    | `ai`, `bmp`, `dcm`, `dicm`, `eps`, `gif`, `idml`, `indd`, `indt`, `inx`, `jpeg`, `jpg`, `png`, `ps`, `psd`, `svg`, `svs`, `tif`, `tiff`, `tga`                  |
| Audio     | `aac`, `aifc`, `aiff`, `amr`, `au`, `flac`, `m4a`, `mp3`, `ogg`, `ra`, `wav`, `wma`                                                                             |
| Video     | `3g2`, `3gp`, `avi`, `m2v`, `m2ts`, `m4v`, `mkv`, `mov`, `mp4`, `mpeg`, `mpg`, `ogg`, `mts`, `qt`, `wmv`                                                        |

<Warning>
  For **document** file types the representation returned will be a placeholder
  icon and not an actual thumbnail.
</Warning>

<RelatedLinks
  title="RELATED APIS"
  items={[
{ label: translate("Get file information"), href: "/reference/get-files-id", badge: "GET" }
]}
/>

<RelatedLinks
  title="RELATED GUIDES"
  items={[
{ label: translate("Get PDF Representation"), href: "/guides/representations/pdf", badge: "GUIDE" },
{ label: translate("Supported File Types"), href: "/guides/representations/supported-file-types", badge: "GUIDE" }
]}
/>