Multi Media

A section component that renders text content alongside media. Supports five media types: image, video, audio, icon, and Lottie animations with flexible layout options.

Image Properties

Property	Type	Required	Description
`image.src`	string	Yes	Path to the image file
`image.alt`	string	Yes	Alternative text for accessibility
`image.caption`	string	No	Optional caption displayed below the image

Audio Properties

Property	Type	Required	Description
`audio.bgImage`	string	No	Background image displayed with audio player
`audio.ogg`	string	One required*	Path to OGG audio file
`audio.mpeg`	string	One required*	Path to MP3 audio file

*At least one audio format must be provided

Video Properties

Property	Type	Required	Description
`video.inSitu`	boolean	No	Display inSitu (true) or in modal (false)
`video.src`	string	Yes	Video source ('youtube', 'vimeo', or 'cloudinary')
`video.id`	string	Yes	Video ID for YouTube/Vimeo
`video.cloudname`	string	Conditional	Required for Cloudinary videos only
`video.tn`	string	Yes	Thumbnail image path for modal display

Icon Properties

Property	Type	Required	Description
`icon.icon`	string	Yes	Icon identifier from the icon library
`icon.title`	string	Yes	Icon title for accessibility
`icon.url`	string	No	Optional link URL for the icon

Lottie Animation Properties

Property	Type	Required	Description
`lottie.src`	string	Yes	Path to Lottie JSON animation file
`lottie.control.autoplay`	boolean	No	Start animation automatically (default: true)
`lottie.control.loop`	boolean	No	Loop the animation (default: true)

Configuration

- sectionType: multi-media
  containerTag: aside
  isReverse: false
  # more settings

  text:
    leadIn: 'Image Example'
    title: Rich Visual Content with Images
    titleTag: 'h2'
    subTitle: 'Enhance your message with compelling visuals'
    prose: Images are the cornerstone of visual storytelling on the web...
  ctas:
    - url: 'https://metalsmith.io'
      label: 'Learn More'
      isButton: true
      buttonStyle: 'primary'
  mediaType: image # may be 'audio', 'icon', lottie','image', or 'video',
  image:
    # image properties
  audio:
    # audio properties
  icon:
    # icon properties
  lottie:
    # lottie properties
  video:
    # video properties

Configuration Options

Layout Settings

Property	Type	Required	Description
`isReverse`	boolean	No	Reverse the media/text layout (default: false)
`mediaType`	string	Yes	Type of media ('image', 'video', 'audio', 'icon', 'lottie')

Content

Property	Type	Required	Description
`text`	object	No	Standard text block with leadIn, title, subtitle, and prose
`text.isCentered`	boolean	No	Centers the text content within its container
`ctas`	array	No	Array of call-to-action buttons or links

Notes

Image, video, audio, icon, and Lottie animation support
YouTube, Vimeo, and Cloudinary integration
Viedeo modal overlays or inSitu embedding
Audio players with background images
Scalable vector icons from comprehensive library
JSON-based animations with playback controls