Bilder & Medien

Produkt- und Content-Bilder kommen vom Kotao-CDN und lassen sich on-the-fly transformieren. Das SDK bietet drei Ebenen — nimm die passende.

<Image> (React)

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

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

Übergib das Bild-Objekt aus deiner Query ({ id, url, altText, width, height }) und die Komponente rendert ein responsives <img> mit srcset, expliziten Dimensionen (kein Layout-Shift) und Lazy Loading unterhalb des Folds.

URL- & Attribut-Helfer

Aus @kotao/storefront/image, wenn du rohe Kontrolle brauchst:

• imageUrl(image, options) — eine transformierte URL (Breite, Höhe, Crop, Format).
• imageSrcSet(image, options) — ein srcset-String über mehrere Breiten.
• buildImageAttrs(image, options) — der komplette Attributsatz für ein handgeschriebenes <img>.

Video und generische Dateien

MediaFile (aus /react) rendert Produkt-Medien nach Typ — Bilder, Video (mit Poster), externes Video oder Model — Galerien müssen nicht von Hand verzweigen.

Styling generell

Ein Theme besitzt sein CSS vollständig — der Scaffold ist ein normales Vite-Projekt, nutze also, was du magst (Vanilla-CSS, Tailwind, CSS-Module). Als font-Setting deklarierte Schriften laufen über die Theme-Settings; alles andere ist Standard-Webplattform.