# Parts (/themes/sdk/reference/media/parts)

```ts
import { … } from '@poltura/theme-sdk/media';
```

## `MediaImage` [#mediaimage]

A responsive image in every format the browser takes, with blur-up and broken-link recovery.

```ts
MediaImage(props: MediaImageProps): ReactElement
```

**Props:** [`MediaImageProps`](/themes/sdk/reference/media/types#mediaimageprops)

**Example**

```tsx
import { MediaImage } from '@poltura/theme-sdk/media';

export function Hero({ image }: { image: string }) {
  return <MediaImage image={image} role='hero' priority sizes='100vw' />;
}
```

## `MediaPlaceholder` [#mediaplaceholder]

The neutral drawing shown where an image is not chosen yet.

```ts
MediaPlaceholder(props: MediaPlaceholderProps): ReactElement
```

**Props:** [`MediaPlaceholderProps`](/themes/sdk/reference/media/types#mediaplaceholderprops)

**Example**

```tsx
import { MediaPlaceholder } from '@poltura/theme-sdk/media';

export function EmptyTile() {
  return <MediaPlaceholder width={800} height={800} className='rounded' />;
}
```

## `SettingVideo` [#settingvideo]

Draws a `video` setting: the file with its poster, autoplay, loop and mute, or the YouTube or Vimeo player, with its text alternative.

```ts
SettingVideo(props: SettingVideoProps): ReactElement | null
```

**Returns:** The video, or nothing when the setting is empty.

**Props:** [`SettingVideoProps`](/themes/sdk/reference/media/types#settingvideoprops)

**Example**

```tsx
import { SettingVideo, type VideoValue } from '@poltura/theme-sdk/media';

export function HeroBackdrop({ video }: { video?: VideoValue }) {
  return (
    <div className='relative h-96'>
      <SettingVideo value={video} cover />
    </div>
  );
}
```