shopify-media
Accepts a reference to an Image or Media reference and generates an image or video element with srcset and sizes attributes. This component must be a child of a shopify-context component. It takes a query attribute that defines the context it's a part of, and the field to query.
If you want the media to automatically change based on which variant is selected on the variant-selector component, make sure to reference the product image on the product.selectedOrFirstAvailableVariant.image field.
See the playground for more complete examples.
When rendering an image, the media component uses the unpic-img element internally, so you can also pass height, width, layout, aspect-ratio, priority, breakpoints, and sizes attributes to control the scale and size of the image. Learn more about image props in the Unpic documentation.
When rendering an image, the media component uses the unpic-img element internally, so you can also pass height, width, layout, aspect-ratio, priority, breakpoints, and sizes attributes to control the scale and size of the image. Learn more about image props in the Unpic documentation.
Anchor to attributesAttributes
- Anchor to aspectRatioaspectRatioaspectRationumbernumberrequiredrequired
Instead of providing a width and height, you can provide an aspect ratio. This is passed to the `aspectRatio` attribute of an underlying `unpic-img` element.
- Anchor to heightheightheightnumbernumberrequiredrequired
The height of the image. Required, unless width is provided with an aspectRatio.
- Anchor to queryqueryquerystringstringrequiredrequired
Defines the context to reference and field to query. For example,
queries the title of the product featured image, andqueries the image of a specific product variant based on theshopify-variant-selectorcomponent.- Anchor to widthwidthwidthnumbernumberrequiredrequired
The width of the image. Required, unless height is provided with an aspectRatio.
- Anchor to breakpointsbreakpointsbreakpointsstringstring
The breakpoints of the image. This is passed to the breakpoints attribute of an underlying `unpic-img` element.
- Anchor to layoutlayoutlayout'fixed' | 'constrained' | 'fullWidth''fixed' | 'constrained' | 'fullWidth'
The resizing behavior of the image. This is passed to the layout attribute of an underlying `unpic-img` element.
- Anchor to prioritypriorityprioritybooleanboolean
Whether to prioritize the image. This is passed to the priority attribute of an underlying `unpic-img` element.
- Anchor to rolerolerolestring | nullstring | null
The accessibility role of the image. This is set automatically by the media component, but you can override it if needed.
- Anchor to sizessizessizesstringstring
The sizes of the image. This is set automatically by the media component, but you can override it if needed.
- Anchor to video-autoplayvideo-autoplayvideo-autoplaybooleanboolean
Used for video media. By default, videos autoplay. To disable autoplay, set to
video-autoplay="false".- Anchor to video-controlsvideo-controlsvideo-controlsbooleanboolean
Used for video media. By default, video controls are shown. To disable them, set to
video-controls="false".- Anchor to video-loopvideo-loopvideo-loopbooleanboolean
Used for video media. By default, videos loop. To disable looping, set to
video-loop="false".- Anchor to video-mutedvideo-mutedvideo-mutedbooleanboolean
Used for video media. By default, videos are muted. To enable audio, set to
video-muted="false".- Anchor to video-playsinlinevideo-playsinlinevideo-playsinlinebooleanboolean
Used for video media. By default, videos play inline. To disable inline playback, set to
video-playsinline="false".