> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: VisualMedia

## Article: VisualMedia

## Article Link: https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/reference/visual-media.md

## Article Content:

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";

# VisualMedia

A single visual media item, either an image or a video. Use it for a field that shows one
piece of visual media where either kind is acceptable. Your code checks the `type` field to
tell which kind it received, then renders the matching element.

> **VisualMedia is a runtime-only type with no manifest `dataType`.** It does not appear in
> the manifest data types, so it cannot be declared as a data property, context item, or
> function parameter or return. Only the runtime shape is documented.

## Component

In your component code, import the `VisualMedia` type from `@wix/editor-react-types`:

```ts
import type { VisualMedia } from '@wix/editor-react-types';
```

A `VisualMedia` has the following properties:

<PropertyList bordered>
  <Property name="type" type="'image' | 'video'" required description="The media kind. Branch on it to choose the variant and its parameters." />
  <Property name="src" type="string" required description="The URL of the media file." />
  <Property name="slug" type="string" description="The slug for the media." />
  <Property name="description" type="string" description="Description of the media for accessibility purposes." />
  <Property name="title" type="string" description="The title of the media." />
  <Property name="height" type="number" description="The height of the media in pixels." />
  <Property name="width" type="number" description="The width of the media in pixels." />
  <Property name="action" type="{ link: Link | Phone | Email }">
    An action when the item is clicked. Its `link` is a
    [Link](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/reference/link.md), a
    [Phone](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/reference/phone.md), or an
    [Email](https://dev.wix.com/docs/site-extensions/editor-react-components/editor-react-types/reference/email.md).
  </Property>
  <Property name="parameters" type="ImageParameters | VideoParameters" description="Kind-specific parameters, keyed to type.">
    <ExpandableSection name="ImageParameters, when type is 'image'">
      <PropertyList>
        <Property name="focalPoint" type="[number, number]" description="The focal point for the image." />
        <Property name="alt" type="string" description="The alt text for the image." />
      </PropertyList>
    </ExpandableSection>
    <ExpandableSection name="VideoParameters, when type is 'video'">
      <PropertyList>
        <Property name="thumbnail" type="string" description="The URL of the video thumbnail." />
        <Property name="alt" type="string" description="Alternative text for the video." />
        <Property name="hasAudio" type="boolean" description="Whether the video has audio." />
      </PropertyList>
    </ExpandableSection>
  </Property>
</PropertyList>

### Usage

Your code either consumes a value of type `VisualMedia` or produces one:

::::tabs
:::Consumers
In a component that receives a `VisualMedia`, branch on `type` and render the matching element:

```tsx
import type { VisualMedia } from '@wix/editor-react-types';

function Media({ media }: { media?: VisualMedia }) {
  if (media?.type === 'image') {
    return <img src={media.src} alt={media.parameters?.alt} />;
  }
  if (media?.type === 'video') {
    return <video src={media.src} poster={media.parameters?.thumbnail} muted={!media.parameters?.hasAudio} />;
  }
  return null;
}
```
:::
:::Producers
When your code produces a `VisualMedia`, for a context or a function return, set `type`, `src`,
and the `parameters` for that kind:

```ts
import type { VisualMedia } from '@wix/editor-react-types';

const media: VisualMedia = {
  type: 'image',
  src: 'https://static.wixstatic.com/media/hero123.jpg',
  title: 'Hero',
  width: 1920,
  height: 1080,
  parameters: {
    focalPoint: [0.5, 0.5],
    alt: 'Handmade ceramic mug on a wooden table',
  },
};
```
:::
::::