shopify-mediacomponent
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 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.
Anchor to attributesAttributes
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.
The height of the image. Required, unless width is provided with an aspectRatio.
Defines the context to reference and field to query. For example, queries the title of the product featured image, and queries the image of a specific product variant based on the shopify-variant-selector component.
The width of the image. Required, unless height is provided with an aspectRatio.
The breakpoints of the image. This is passed to the breakpoints attribute of an underlying `unpic-img` element.
The resizing behavior of the image. This is passed to the layout attribute of an underlying `unpic-img` element.
Whether to prioritize the image. This is passed to the priority attribute of an underlying `unpic-img` element.
The accessibility role of the image. This is set automatically by the media component, but you can override it if needed.
The sizes of the image. This is set automatically by the media component, but you can override it if needed.
Used for video media. By default, videos autoplay. To disable autoplay, set to video-autoplay="false".
Used for video media. By default, video controls are shown. To disable them, set to video-controls="false".
Used for video media. By default, videos loop. To disable looping, set to video-loop="false".
Used for video media. By default, videos are muted. To enable audio, set to video-muted="false".
Used for video media. By default, videos play inline. To disable inline playback, set to video-playsinline="false".