360°-Sitzplatz-Ansicht

Für nummerierte Säle bietet Tixly beim Online-Kauf eine 360°-Ansicht von einem Sitzplatz aus. In diesem Dokument wird beschrieben, was hierfür erforderlich ist.

Benötigte Bilder

Zwei Arten von Bildern sind erforderlich, damit Tixly die 360°-Ansicht anzeigen kann:

• Ein jpg-Thumbnail-Bild, das auf der Sitzplatz-Auswahlseite als Vorschau angezeigt wird.
• Eine Html-Seite mit dem eigentlichen Bild/ Panoramabetrachter. Diese wird in einem Iframe angezeigt, wenn der:die Kund:in auf das Vorschaubild klickt.

Derzeit nicht unterstützt werden von Drittanbietern gehostete 3D-Panoramabilder wie Pacifica und 3D Digital Venue.

Thumbnails

Ein typisches Thumbnail-Bild, das auf einem Desktop in einer Größe von 250 x 160 px und auf mobilen Geräten in einer Größe von 200 x 160 px als Vorschau des Panoramas angezeigt wird.

Die folgenden Styles werden so angewendet, dass das Bild immer die gesamte Fläche abdeckt und sich auf die Mitte konzentriert: 

background-repeat: no-repeat;
background-size: cover;
background-position: center;

HTML Seite

Die Seite muss die Möglichkeit bieten, dem:der Besucher:in 360° Bilder (oder Einzelbilder) im Vollbildmodus zu zeigen.
Wie dies erreicht wird, bleibt dem:der Kund:in überlassen (es gibt viele verschiedene Möglichkeiten, dies zu erreichen). Wir empfehlen jedoch immer, die Größe dieser Seiten/ Bilder/ Ordner zu minimieren, damit der:die Besucher:in ein möglichst nahtloses Erlebnis hat. Außerdem muss sichergestellt werden, dass sie in allen Browsern und Bildschirmgrößen funktionieren.

Ordnerstruktur

Es ist jede beliebige Ordnerstruktur möglich, wir empfehlen aber aus Gründen der Übersichtlichkeit, die Daten in Ordnern zu strukturieren. Aus dieser Struktur sollte klar hervorgehen, was dargestellt wird, z. B. jede HTML-Seite sollte in einem Ordner untergebracht werden, der den Namen des Saal-Bereichs, die Reihennummer und den Sitzplatznamen enthält. Das Gleiche gilt für die Thumbnail-Bilder, die entweder unter dem Ordner jeder HTML-Seite oder alle zusammen in einem separaten Ordner liegen können. Siehe Beispiele.

Bildanzahl

Nicht jeder Sitzplatz muss per se ein eigenes Bild haben. Es kann ein Bild pro Bereich oder 1 Bild pro x Anzahl von Plätzen in einer Reihe sein. Tixly ordnet die Bilder den Plätzen eins zu eins zu, also achten Sie darauf, welche Plätze welches Bild zeigen sollen. Sie können für jeden Sitzplatz ein anderes Vorschaubild haben, aber nur 1 html mit einer Panoramaseite für mehrere Plätze teilen.

CSV mapping

Das letzte, was für den Import benötigt wird, ist eine csv-Zuordnung für die Thumbnails und HTML-Seiten zu den Plätzen im Saal.

HallName;Section;Row;Seat;ThumbnailPath;HtmlPagePath

Beispiele

Spezifischer Thumbnail-Ordner

Die folgende Ordnerstruktur kann verwendet werden:

• /thumbnails
  • floor-2-3.jpg
  • floor-2-4.jpg
• /html
  • /floor-2-3
    • view.html
    • big-image-2-3.jpg
  • /floor-2-4
    • view.html
    • big-image-2-4.jpg

HallName;Section;Row;Seat;ThumbnailPath;HtmlPagePath
Summerhall;Floor;2;3;/thumbnails/floor-2-3.jpg;/html/floor-2-3/view.html
Summerhall;Floor;2;4;/thumbnails/floor-2-4.jpg;/html/floor-2-4/view.html

Die folgende Ordnerstruktur ist gegeben:

• /summer
  • /floor
    • /2-3
      • view.html
      • thumb.jpg
      • big-image-2-3.jpg
    • /2-4
      • view.html
      • thumb.jpg
      • big-image-2-3.jpg

HallName;Section;Row;Seat;ThumbnailPath;HtmlPagePath
Summerhall;Floor;2;3;/summer/floor/2-3/thumb.jpg;/summer/floor/2-3/view.html
Summerhall;Floor;2;4;/summer/floor/2-4/thumb.jpg;/summer/floor/2-4/view.html

Die folgende Ordnerstruktur ist gegeben:

• /thumbnails
  • floor-2-3.jpg
  • floor-2-4.jpg
  • floor-2-5.jpg
• /html
  • /floor
    • view.html

Die csv-Datei könnte wie folgt aussehen:

HallName;Section;Row;Seat;ThumbnailPath;HtmlPagePath
Summerhall;Floor;2;3;/thumbnails/floor-2-3.jpg;/html/floor/view.html
Summerhall;Floor;2;4;/thumbnails/floor-2-4.jpg;/html/floor/view.html
Summerhall;Floor;2;5;/thumbnails/floor-2-5.jpg;/html/floor/view.html

Verwendung der 360°-Ansicht für eine Veranstaltung

Um die 360°-Bilder online zu sehen, schalten Sie in der in der Veranstaltungsanlage im Reiter Internet die Option 360° anzeigen ein. Falls Sie diese Option nicht sehen, muss die Funktion erst vom Tixly-Support freigeschalten werden.