Media
Overview
Enables content editors to insert and manage responsive images within page layouts. Creates visually engaging content that adapts seamlessly across all device sizes. Display product images, hero banners, or editorial photography with consistent styling. Configure different sizing for mobile versus desktop to optimize visual presentation. Add captions and accessibility descriptions for improved user experience. Leverages Radix Vue Dialog for accessible lightbox implementation.
Key Business & UX Benefits
- Delivers the right image size per device for fast load and good quality.
- Engages users with lightbox zoom and pan for detailed viewing.
- Gives editors control over aspect ratio and mobile vs desktop sizing.
- Keeps images accessible with captions and descriptions.
Usage
Uses nuxt-image to render responsive images. The component takes a Media value (the canonical discriminated union returned by connectors and produced by the media schema field) and reads its sources to pick the right variant for the current viewport.
Feature List
- Lightbox with zoom and pan using Radix Vue Dialog and Swiper
- Cross-image navigation in lightbox across all enabled media on the page
- Custom aspect ratios with separate mobile and desktop values
- Fixed height option with responsive values that overrides aspect ratio
API Reference
| Prop | Default | Type |
|---|---|---|
media | toMedia("/no-media-provided.svg", 1, 1) | |
alt | stringOverride default alt passed in media object. | |
aspectRatio | string | number | booleanAspect-ratio as string in format 4:3 or 4/3. It's also possible to pass a number.
When passed Note that (Order of types has to stay as is, boolean first. Required for shorthand to work.) | |
sizes | stringSpecify responsive sizes. This is a space-separated list of screen size/width pairs. Uses laioutr-ui breakpoints. | |
retina | false | booleanPass true to enable retina (2x density) images. Disabled by default. |
width | string | numberSpecify width of the image | |
height | string | numberSpecify height of the image | |
loading | "lazy" | "eager"This is a native attribute that provides a hint to the browser on how to handle the loading of an image which is outside the viewport. Defaults to 'lazy' for performance reasons. | |
preload | false | booleanIn case you want to preload the image, use this prop. This will place a corresponding |
fetchpriority | "auto" | "low" | "high"This is a native attribute that provides a hint to the browser on how to prioritize the loading of an image. This value is also used for the | |
desktopBreakpoint | md | number | BreakpointName | (string & {})Specify the breakpoint at which the image should be displayed as a desktop image. Can be either a pre-defined breakpoint key (like 'lg') or a number (width in pixels). |