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 editor 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 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 / page declaration \========================================================================== / @page { size a4; margin 0; padding 0; } 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 this is your ticket bring this page to the event / page declaration \========================================================================== / @page { size a4; margin 0; padding 0; } / top bar \========================================================================== / \#top bar { border bottom 1px solid #7c7c7c; padding 1cm 0 10px; overflow hidden; / clearfix / } \#top bar p { float left; } \#top bar img { float right; width 100px; } 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 http //twig sensiolabs org/ 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")}} will display the event date, formatted as "12/03/2018 20 00" 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 http //twig sensiolabs org/doc/templates html#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 { "ticket" { "id" 35614, "price" 25, "barcode text" "122796929576", "barcode" "ë122796929576oî", "status" 101, "locktypeid" null, "tickettypeid" 111 } } 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 http //en wikipedia org/wiki/code 128 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 / barcode font \========================================================================== / @font face { font family 'barcode font'; src url('tmglobal/fonts/idautomationc128m ttf') format('truetype'); font weight normal; font style normal; } barcode { font family 'barcode font'; font size 12pt; } 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 {{ ticket barcode code128 }} you can easily position and rotate the barcode on the ticket by wrapping it in a div {{ ticket barcode code128 }} then use css to position and/or rotate the div for example to rotate the barcode 90 degrees and position it on the right \#barcode area { position\ absolute; right 0px; top 150px; transform rotate(90deg); } 2d barcodes ticketmatic supports qr codes http //en wikipedia org/wiki/qr code through a custom twig filter simply use this code in the html template to convert the barcode text placeholder to a qr code {{ 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 this is your ticket bring this page to the event all annotated texts are translatable in the translate module click on translate in the top menu to access this module edit translations 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 print at home ticket with 1d barcode https //www ticketmatic com/docs/tickets/configure ticket sales/ticketlayout/example1 boca thermal printer ticket with 2d barcode https //www ticketmatic com/docs/tickets/configure ticket sales/ticketlayout/example2