Setting up ticket layouts

Ticketmatic gives you full control over all ticket layouts (print at home tickets, tickets for thermal printer or any other format).

As the screenshot below shows, Ticketmatic offers a powerful editor allowing you to define a ticket layout using familiar web technologies: html, css and the twig templating language (left hand pane). The powerful preview capabilities (right hand pane) allow you to immediately preview ticket layouts using real data.

screenshot

The live preview allows you to design tickets that are guaranteed to look good, also in special cases such as long event names. You can also easily test conditional layouts with content that is only visible for specific (types of) events.

Some layout features:

* use custom fonts * use assets like images or icons * use both standard paper sizes like A4 or Boca or completely custom sizes

Placesholders give you full control over the content of the ticket. You can make certain parts of the ticketlayout dynamic, dependent on certain conditions. You can among others:

* display ticket info fields, like price type, event name or price * display the ticket barcode (both 1D and 2D codes are supported) * display informational messages or images like route description or general conditions * display information that is context specific. For example: you can show a specific message for a ticket with a certain price type or you can display a logo if the ticket was sold through a specific sales channel.

You can create multiple ticketlayouts, and define which ticketlayout should be used for which events and which delivery scenarios.

Ticketlayout content is completely multilingual and the generated tickets will be rendered in the language of the buyer.

Getting started: set up a new ticket layout

Ticket layouts are managed in the Settings app. Click the button below to go to the Ticket layouts module:

Go to ticket layouts

Now create a new ticket layout:

Click on the Add button
Fill in a name for the new ticket layout and press ‘Save’
In the templates pane, click on the Add button to create a new template for this ticket layout

A new ticket layout template is now created with default html and css.

1<!doctype html>
2<html>
3    <head>
4        <meta charset="utf-8">
5    </head>
6    <body>
7        
8    </body>
9</html>

This default ticket layout is an empty A4 ticket and and is a good base to start customizing the css and html.

Preview and testing environment

While you are editing a ticket layout, you will see the Preview pane on the right displaying your changes in realtime. You can select the example order and ticket to test how the ticket layout looks for that specific test ticket.

Tickets are rendered to pdf in a consistent way on the server. The preview uses the exact same rendering engine used for rendering actual tickets so if the preview looks good, you can be sure that the actual tickets will look the same.

Customizing the ticket layout

By editing the html and css in the template, you can customize the ticket layout exactly as you want.

Adding static content

Add static content to the ticket layout by including this in the html. Style the content with css. For example, to add a header line to the ticket layout, you could use this html/css:

 1<!doctype html>
 2<html>
 3    <head>
 4        <meta charset="utf-8">
 5    </head>
 6    <body>
 7      <div id="top-bar">
 8         <p>This is your ticket. Bring this page to the event.</p>
 9         <div id="logo-ticketmatic">
10             <img src="ticketlayouts/example1/ticketmatic-grey.svg">
11          </div>
12      </div>
13    </body>
14</html>

From the css and html template you can refer to all assets that are available in the Assets module. This way, you can include images or logos or use custom fonts in your ticket layouts.

Adding dynamic content

Use placeholders to add dynamic content like the event name, date or barcode to the ticket layout. When you build the ticket layout, you have an object ticket at your disposal that contains as properties all field definitions that are defined for the ticket. The html template is actually a twig-template and you can use the features of this template language to create a truly dynamic ticket. More info on the Twig template language.

Some example placeholders:

Placeholder	Description
{{ticket.eventname}}	Will display the name of the event
{{ticket.price}}	Will display the price for the ticket
{{ticket.eventdate	date(“d/m/Y H:i”)}}

Twig filters, like the date filter in the example above, allow you to modify object properties and can be used among others to format properties. More info on the available Twig filters

Click on the (?) Placeholders button to retrieve a list of all objects and properties that you can use as placeholder in the html template. You will get a json-representation of the available object with the current preview-values filled in, for example:

 1{
 2    "ticket": {
 3        "id": 35614,
 4        "price": 25,
 5        "barcode_text": "122796929576",
 6        "barcode": "Ë122796929576oÎ",
 7        "status": 101,
 8        "locktypeid": null,
 9        "tickettypeid": 111
10    }
11}

Displaying barcodes

Ticketmatic supports displaying both 1D and 2D barcodes. As there is a wide variety in printers and paper quality, always test the generated barcodes in real world circumstances. For box office tickets: use the actual (thermal) printer with the actual paper stock to print a ticket with barcode and test that the barcode scans correctly.

1D barcodes

Ticketmatic supports the Code 128 barcode symbology through a barcode font that is available for all accounts by default.

To activate it, link to the barcode font from the css using a css rule:

 1/*  Barcode font
 2   ========================================================================== */
 3
 4@font-face {
 5    font-family: 'barcode-font';
 6    src: url('tmglobal/fonts/IDAutomationC128M.ttf') format('truetype');
 7    font-weight: normal;
 8    font-style: normal;
 9}
10
11.barcode {
12    font-family: 'barcode-font';
13    font-size: 12pt;
14}

The @font-face rule links to the actual barcode font in the tmglobal folder. There are 7 sizes (= heights) of the font that you can choose between:

IDAutomationC128XXS.ttf
IDAutomationC128XS.ttf
IDAutomationC128S.ttf
IDAutomationC128M.ttf
IDAutomationC128L.ttf
IDAutomationC128XL.ttf
IDAutomationC128XXL.ttf

In the barcode class, the actual font-size is set (in this example to 12pt).

Remark: when using a printer with less than 600 DPI, print at the following point sizes to create accurate barcodes:

203 DPI Printer (thermal printer): 6, 12, 18, 24, 30, 36
300 DPI Printer: 4, 8, 12, 16, 20, 24, 28, 32, 36

In the html template you can then generate the actual barcode using the ticket.barcode_code128 placeholder:

1<div class="barcode">{{ ticket.barcode_code128 }}</div>

You can easily position and rotate the barcode on the ticket by wrapping it in a div:

1<div id="barcode-area">
2    <div class="barcode">{{ ticket.barcode_code128 }}</div>
3</div>

Then use css to position and/or rotate the div. For example to rotate the barcode 90 degrees and position it on the right:

1#barcode-area {
2    position:absolute;
3    right:0px;
4    top:150px;
5    transform: rotate(90deg);
6}

2D barcodes

Ticketmatic supports QR codes through a custom Twig filter.

Simply use this code in the html template to convert the barcode_text placeholder to a QR Code:

1{{ ticket.barcode_text | qrcode(3)  }}

Translation

For multilanguage accounts, all static text on the ticket can be translated. The ticket will be delivered to the buyer in his preferred language.

In order to translate a text, you should annotate it with a translate attribute. For example:

1<p translate>This is your ticket. Bring this page to the event.</p>

All annotated texts are translatable in the Translate module. Click on translate in the top menu to access this module:

Deciding which ticket layout will be used

Not all events are equals and you might need a different ticket layout for some events. Ticketmatic allows you to define multiple ticket layouts and decide for each event which ticket layout to use.

Also, a ticket might need to be rendered differently depending on the delivery scenario of an order. For example, when a user prints his ticket at home, the ticket should be generated as a Letter or A4 document. When the same ticket is printed on a thermal printer in the box office, it should be generated in a much smaller ticket size.

To accomplish this you can link multiple ticket layout templates under a single ticket layout. You then define which template needs to be used for which delivery scenario. Ticketmatic will then automatically render the ticket in the right layout, depending on the context.

Multiple tickets on a single page

You can create a ticketlayout for placing multiple tickets on a single page: under Settings, select the number of tickets that you want to include on a single page. When printing multiple tickets with such a ticketlayout, the content of the body for the specified number of tickets will be concatenated in a single page.

Complete examples

Below, you will find a few complete examples of ticket layouts, including html, css and assets.