1. Knowledge base
2. Renderer SDK

Section Photos

Attach view-from-section photos to seated or general admission sections, then display them in your booking page. Section photos have been available since renderer 1.71.0. The renderer delivers the photo data; your application renders the gallery.

Add photos in the editor

Select a section and open its Photos tab. Upload the images, add captions, drag them into the desired order, and save the schema. The same tab supports seated and general admission sections.

Smaller images are not enlarged. Photos belong to the schema, so events using that schema share the list. A schema or section copy retains its photo URLs. On self-hosted installations, section uploads require S3-backed converter storage.

A save becomes visible in booking data after caches refresh, normally within about a minute. Reload the event to fetch the updated list. Video links and uploaded videos are not carried by this contract; keep any video mapping in your application.

Read the photo data

Each photo has a full-size url, an optional thumbUrl, and an optional caption. Arrays retain the order saved in the editor. A section with no photos can omit photos; treat that as an empty list.

• Section callbacks such as onSectionClick, onSectorClick, onSectorMouseEnter, and onSectionsSelectionChange carry ISection.photos.
• getSections() exposes the saved section photos. Join a seat callback’s sectionId to the section’s numeric id.
• Your backend can read sectors[].photos from GET /api/private/v1.0/venues/schemas/{schemaId}/, the existing v1 schema metadata endpoint, using the organization’s Secret API key. Keep that key on your backend.

At a large seated venue, a section click can zoom the map without firing a section callback. Use onSeatSelect and its sectionId when the buyer selects a seat. GA clicks and section selection mode provide section callbacks; full-view behavior is described in Section click behavior.

The following example was type-checked against the published @seatmap.pro/renderer 1.74.3 declarations on 2026-10-13. Supply a visible renderer container, a gallery element, and your Public API key, then call loadEvent as in Initializing SDK.

import { SeatmapBookingRenderer, type ISectionPhoto } from '@seatmap.pro/renderer';

export function createPhotoRenderer(
  container: HTMLElement,
  gallery: HTMLElement,
  publicKey: string,
): SeatmapBookingRenderer {
  const showPhotos = (photos: ISectionPhoto[] = []) => {
    gallery.replaceChildren();
    for (const photo of photos) {
      const image = document.createElement('img');
      image.src = photo.thumbUrl ?? photo.url;
      image.alt = photo.caption ?? '';
      image.loading = 'lazy';
      gallery.append(image);
    }
  };
  let renderer: SeatmapBookingRenderer;
  renderer = new SeatmapBookingRenderer(container, {
    publicKey,
    onSectionClick: (section) => showPhotos(section.photos),
    onSeatSelect: (seat) => {
      const section = renderer.getSections().find((item) => item.id === seat.sectionId);
      showPhotos(section?.photos);
    },
  });
  return renderer;
}

Use url for a larger image after a thumbnail is chosen. No gallery or automatic photo overlay is added to the renderer by these methods.

Position a gallery or thumbnail

ISection.rect provides section bounds relative to the renderer container. getSectionsWithCoords() adds the bounds’ center as x and y, also in container pixels. These are display coordinates: query them again after the view changes. They are separate from the seat-grid cells used by block selection.

Use the numeric section id to join callback data, positions, and getSections() results. The latter also exposes the section guid. For layout geometry in schema metadata, use x, y, width, height, and angle.

In renderer 1.75.0, positioning results also declare the optional photos field. With older published declarations, read photos from getSections() and join them to the positioning result by id, as below. This example also compiles against 1.74.3.

import type { SeatmapBookingRenderer } from '@seatmap.pro/renderer';

export function sectionPhotoPosition(renderer: SeatmapBookingRenderer, sectionId: number) {
  const position = renderer.getSectionsWithCoords().find((item) => item.id === sectionId);
  if (!position) return undefined;
  const section = renderer.getSections().find((item) => item.id === sectionId);
  return {
    x: position.x,
    y: position.y,
    rect: position.rect,
    photos: section?.photos ?? [],
  };
}