Immagini e contenuti multimediali

Immagini prodotto e contenuto servite dal CDN Kotao e possono essere trasformate in tempo reale. Lo SDK ti offre tre livelli — scegli quello che ti conviene.

<Image> (React)

import { Image } from "@kotao/storefront/react";

<Image data={product.images[0]} width={300} aspectRatio="1/1" crop="center" />;

Pass the image object from your query ({ id, url, altText, width, height }) and the component renders a responsive <img> with srcset, explicit dimensions (no layout shift), and lazy loading below the fold.

Aiuti URL e attributi

Da @kotao/storefront/image, quando hai bisogno di controllo grezzo:

• imageUrl(image, options) — one transformed URL (width, height, crop, format).
• imageSrcSet(image, options) — a srcset string across widths.
• buildImageAttrs(image, options) — the complete attribute set for a hand-written <img>.

Video e file generici

MediaFile (da /react) renderizza i media di un prodotto per tipo — immagini, video (con poster), video esterno o modello — così le gallerie non devono gestire manualmente i branch.

Styling in generale

Un tema possiede interamente il suo CSS — lo scaffold è un progetto Vite puro, quindi usa quello che preferisci (CSS vanilla, Tailwind, CSS modules). I font dichiarati come impostazioni font si risolvono tramite le impostazioni del tema; tutto il resto è piattaforma web standard.