Media

show-image

• Purpose: image src setter. On a child <img> it sets src, a responsive Shopify-CDN srcset (same buildImageSrcset the server fill uses), sizes, and alt; on a non-<img> first element child it sets background-image.
• Attributes:
  • main : boolean = false - follow the product’s activeMediaIndex (gallery main image).
  • index : number = 0 - fixed media index (used when main is absent).
  • sizes : string = "" - sizes attribute passed through to the <img>.
  • widths : string = "400,800,1200,1600" - comma-separated widths for the srcset (only applied to cdn.shopify.com URLs).
• Required ancestor / context: storesynk-product (consumes productContext).
• Children: an <img> (recommended) or any element to receive a background image.
• Events / state: none.
• Adoption-stable writes: src/srcset/sizes are written only when the value changes, and an empty srcset/sizes is dropped (removed, never written as "") - matching the server fill, which never emits empty ones. So a server-rendered image is byte-identical after hydration and the browser does not re-run source selection or re-decode it (no blink). alt is set deterministically every update ('' when decorative; the hero main falls back to the product title).

show-media

• Purpose: renders the media item at the chosen index by type - image (with a responsive Shopify-CDN srcset), video, external video (iframe), or 3D model (<model-viewer> if loaded), falling back to the poster image.
• Attributes:
  • main : boolean = false - follow activeMediaIndex.
  • index : number = 0 - fixed media index.
  • sizes : string = "" - sizes attribute applied to generated <img>.
  • widths : string = "400,800,1200,1600" - comma-separated widths for the srcset (only applied to cdn.shopify.com URLs).
• Required ancestor / context: storesynk-product (consumes productContext).
• Children: the engine replaces children with the right media element. (You may leave it empty.)
• Events / state: none.

show-thumbnail

• Purpose: self-cloning thumbnail strip. The index-less instance is the template: it clones itself once per media item, assigns each clone an index, populates the inner <img> (or background), sets [ss-active] (+ aria-current) on the current one, and dispatches a media-select on click.
• Attributes:
  • index : number - ENGINE-SET on clones. Do not author it on the template (rule SSK-303); doing so breaks the self-cloning.
• Required ancestor / context: storesynk-product (consumes productContext).
• Children: an <img> (recommended) or an element to receive a background image.
• Events: emits sf:media-select (bubbles, composed; detail.index) on click.
• State it sets: index on clones; [ss-active] (+ aria-current) on the current thumbnail; hides itself (display:none) when there is ≤1 media.

---

Imported from the Storesynk skill v0.1.0 (references/component-reference.md). To change this page, change it there.