360 View from seat

For numbered halls the Tixly system offers a 360 view from a seat when buying online. This document outlines what is required for that to happen.

Items

Two types of “items” are required for Tixly to show the 360 image:

• A jpg thumbnail image, shown on the seat selection page as a preview.
• An html page with the actual image / panorama viewer. That will be shown in an iframe when the customer clicks the preview image.

Currently not supported are 3rd party hosted 3d panoramic images such as Pacifica and 3D digital venue.

Thumbnails

A typical thumbnail image that will be shown in roughly 250x160px on a desktop and 200X160 on mobile devices as a preview to the panorama.

The following styles are applied so that the image always covers the entire area and focuses on the center:

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

HTML page

The page needs to have the functionality to show 360 images (or single images) to the user in a fullscreen capacity.

How it achieves this is up to the client (there are a lot of different ways to achieve this). However we always recommend minimising the size of these pages/images/folders so the user can get an as seamless experience as possible. Also to make sure these work in all browsers and screen sizes.

Folder structure

Any folder structure is possible but Tixly recommends for clarity's sake that the data is structured into folders that clearly say what is represented, for example each html page can be in a folder that indicates section name, row name and seat name. Same goes for the thumbnails, those can either be located under each html page’s folder or all together in a separate folder. See Examples.

Image density

Not every seat needs to have it’s own image, that is up to the client. It can be one image per section or 1 image per x number of seats in a row. Tixly maps the images to seats one to one so take note of which seats should show which image. You can have a different thumbnail per seat but share only 1 html with a panorama page for multiple seats.

CSV mapping

Last thing that is needed for the import is a csv mapping for the thumbnails and html pages to seats in a hall.

HallName;Section;Row;Seat;ThumbnailPath;HtmlPagePath

Examples

Specific thumbnail folder

The following folder structure can be used:

• /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

Given the following folder structure:

• /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

Given the following folder structure:

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

The csv might look like this:

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

Using 360 view on an event

To see the 360 images online toggle the Display 360 under the internet tab of the event.