Skip to main content

Team

Displays a gallery of team members (image + name). The slide’s header and background are configured per node; the member list comes from the global workshop team settings.

Example structures​

Basic​

{
  "type": "Team",
  "data": {
    "headline": "Our Team"
  }
}

With background​

{
  "type": "Team",
  "data": {
    "headline": "Meet the Crew",
    "background": "assets/backgrounds/team-hero.jpg",
    "darkText": false
  }
}

Expected global team data (sent automatically by the node)​

[
  { "name": "Alice",  "img": "team/alice.jpg",  "show": true },
  { "name": "Bob",   "img": "team/bob.jpg", "show": true },
  { "name": "Carsten",  "img": "team/carsten.jpg", "show": false }
]

Properties​

KeyTypeDefaultDescription
Global teamArray{ name:string; img:string; show:boolean }[]—Injected from state.workshopSettings.team by the server node; not configured inside this node’s data. Only entries with show: true are rendered.

Behavior​

tip
  • Host-only: Participants won’t receive the payload unless you change onlyHost. If you want everyone to see the slide, remove or override onlyHost = true.
  • Assets: Ensure NEXT_PUBLIC_RESOURCE_LOCATION and workshopKey are set and the img files exist at that path.
  • Clipping: The container uses overflow-hidden; very large teams may require layout tweaks (e.g., wrapping or scrolling) if members extend beyond the viewport.

  • The server node is host-only (onlyHost = true). It sends a payload shaped as:

    { data: this.data, teamArray: state.workshopSettings.team }

  • The slide renders:

    • Optional header block (headline, subheading).
    • A horizontal row of portrait cards (aspect-[3/5]) for all members with show: true.
    • Each card shows an image and the member’s name (Next.js <Image /> with fill, object-fit: cover).

  • Image source path:

    (process.env.NEXT_PUBLIC_RESOURCE_LOCATION ?? "/")
    + workshop.workshopKey + "/" + member.img

  • Theme:

    • On mount: if data.darkText is defined, calls setTheme(!data.darkText).
    • On unmount: reverts with setTheme(!props.node.darkText) via useLayoutEffect cleanup.

  • Background:

    • Rendered with <Background background={data.background} />.

Visual design​

  • Centered layout with a wide, gap-spaced row of cards.
  • Card: rounded image container with cover cropping, name in bold below.
  • Header uses the GT Flexa display font (text-6xl for headline).

Use cases​

  • Credits slide at the end of a session.
  • “About us” section within a workshop deck.