Images

A vehicle’s images are in its assets list. Each one has a URL, a placement and an order.

query VehicleImages($id: uuid!) {
  stocked_vehicles_by_pk(id: $id) {
    hero: assets(where: { is_public: { _eq: true }, placement: { _eq: "featured" } }, limit: 1) {
      src
      alt
    }
    gallery: assets(
      where: { is_public: { _eq: true }, placement: { _neq: "featured" } }
      order_by: [{ order: asc }, { id: asc }]
    ) {
      src
      alt
      placement
      order
    }
  }
}

Field	Meaning
src	Absolute image URL.
placement	Where the dealer wants it shown (see below).
order	Position within its placement, from 0.
alt	Alt text. Often empty: fall back to the vehicle’s year, make and model.
is_public	Only show public images. Requests without a token only ever see public ones.
type	image for photos. Other types (such as documents) can exist.
classification	The shot detected by Vyro: Front, Front34, Side, Rear34, Rear, Interior, Wheel, Other. Not always set.

Placements

Placement	Use it for
featured	The hero image: cards, search results, social previews. One per vehicle.
gallery	The rest of the photos, in order.
exterior, interior	Configurator-style views on some new vehicles. Show them in the gallery after gallery images.

Placement is free text, so you may see others. Treat anything you don’t recognise as a gallery image.

Pick the hero as the featured image, falling back to the first gallery image. Build the gallery as the hero followed by the rest in order.

Caution

order restarts at 0 for each placement, so sorting all images by order alone can put a gallery image before the hero. Fetch the hero separately, as above.

Sizes

Images hosted on ik.imagekit.io (Vyro’s image CDN) can be resized by adding ?tr= to the URL. Ask for the size you show, and f-auto to get WebP or AVIF where the browser supports it.

You want	Add
Card, 600 px wide	?tr=w-600,f-auto
Gallery, 1600 px wide	?tr=w-1600,f-auto
Square thumbnail	?tr=w-300,h-300,fo-auto,f-auto
Social preview	?tr=w-1200,h-630,fo-auto,f-auto

function imageUrl(src, width) {
  if (!src.startsWith('https://ik.imagekit.io/')) return src; // other hosts: use as-is
  const url = new URL(src);
  url.searchParams.set('tr', `w-${width},f-auto`);
  return url.toString();
}

URLSearchParams encodes the comma as %2C; ImageKit accepts both forms.

Some dealers’ images are served from their own systems (any host other than ik.imagekit.io). Use those URLs as they are.

Caching and hotlinking

You may display images straight from src. Vyro’s image URLs are content-addressed: when a dealer changes a photo, the URL changes, so you can cache them for as long as you like. A vehicle whose updated_at changed may have new images, so refresh its list then.