Media

Component for displaying media assets (images) with optional title and description.

Props

Prop	Type	Required	Default	Description
`title`	`string`	No	-	Media title
`description`	`string`	No	-	Media description
`asset`	`File`	Yes	-	Media asset from Contentstack
`$`	`CSLPFieldMapping`	No	-	CSLP mapping for editable fields
`priority`	`boolean`	No	`false`	Preloads the image when used above the fold
`sizes`	`string`	No	-	Optional `sizes` attribute override for responsive images

Usage

1import { Media } from '@/components/organisms/Media';
2
3<Media
4  title="Product Screenshot"
5  description="Our new dashboard interface"
6  asset={{
7    url: "/images/dashboard.jpg",
8    title: "Dashboard",
9    dimension: { width: 1200, height: 800 }
10  }}
11/>

import { Media } from '@/components/organisms/Media';

<Media
  title="Product Screenshot"
  description="Our new dashboard interface"
  asset={{
    url: "/images/dashboard.jpg",
    title: "Dashboard",
    dimension: { width: 1200, height: 800 }
  }}
/>

Features

MediaItem integration: Uses MediaItem component for optimized images
Optional metadata: Title and description are optional
Aspect ratio: Calculates from asset dimensions or defaults to 16:9
CSLP support: Contentstack Live Preview editing

Notes

Returns null if no asset is provided
Uses MediaItem component for image rendering
Aspect ratio calculated from asset dimensions if available
Title renders as h3 if provided
priority and sizes are typically injected by ComponentsRenderer for above-the-fold media