NEW- HTML Templates

 > Posts > FAQ > Templates > NEW- HTML Templates

Chronosly FAQ HTML templates

HTML Templates were launched on Chronosly update v.2.0.2 (April 23rd, 2015)

 

chronosly-warning-logo-lq   IMPORTANT: Before starting with Chronosly HTML templates

Here are some recommendations you should consider before starting with Chronosly HTML templates:

  • Clone your template from Template Editor and modify your cloned template by adding or customizing wished items or functions in all views.

 

  • Save EACH VIEW you have modified.

 

  • This customization will create a "base" with all variables and functions you need, it would be easier to modify everything on html and fix it as wanted.

 

  • Each view has two different html files:

- template.html for normal view

- template_featured.html for featured view

  • All template files are placed in /custom-templates/ folder and each dad$ folder (dad1, dad2,..., dad12) are for available views:

 

- dad1: All events list view

- dad2: Single event view

- dad3: Calendar view

- dad4: Category events list view

- dad5: Organizer events list view

- dad6: Place events list view

- dad7: All organizers list view

- dad8: Single organizer view

- dad9: All places list view

- dad10: Single place view

- dad11: All categories list view

- dad12: Single category view

 

  • Warning: if you modify original templates within /custom-templates/ folder as default, grid, dark… Chronosly updates overwrite all data from original templates in this folder.

 

Only cloned or modified from original template file names placed within /custom-templates/ folder will be kept from updates.

  • Each HTML view file (dad1, dad2,...,dad12) folders will be available in templates folder if you save a view from Template Editor. Before saving each view html files are hidden.

 

  • Remember, html templates are synchronized with Template Editor, so, if any view is modified via Drag and Drop system (Template Editor) HTML template will also be modified.

 

 

HTML TEMPLATES BASICS

Basicaly, HTML TEMPLATES have 2 different sources code:

1- VARIABLE e.g. {{event_title}}

2- FUNCTION always preceded by a variable that introduces a function, e.g. {{event_title | text_before 'Text example '}}

 

chronosly-tips-logo   TIP: all variables can be found in Template Editor tool bar.

See events variables available in screenshot below:

Chronosly HTML Menu bar variables
Chronosly HTML Menu bar variables

 

Moreover, if you have installed Social Media Share addon, Chronosly HTML TEMPLATES include extra features. This addon has related "share box" options into Drag and Drop system tool.

Chronosly Social Media addon Template Menu bar
Chronosly Social Media addon Template Menu bar

 

 

 

1- VARIABLE

Detailed variables available for each element in HTML TEMPLATES can be found below:

  • Events
  • Date and time
  • Organizers
  • Places
  • Tickets
  • Categories
  • Tags

 

 

For events:

chronosly-info-logo   Events id $id start from 0

{{event_title}}
{{event_description}}
{{event_excerpt}}
{{event_list}} Note: only available for event lists within organizers and places
{{event_link}
{{event_image}}

 

 

For date and time:

Date and time variables have always to be related to time_format function

e.g. {{full_date | time_format }}

chronosly-info-logo   If there isn’t any format specified Chronosly time-date settings will be applied.

{{full_date}}
{{full_time}}
{{full_datetime}}
{{start_date}}
{{start_hour}}
{{start_datetime}}
{{end_date}}
{{end_hour}}
{{end_datetime}}

 

 

For organizers:

chronosly-info-logo   Organizers id $id start from 0

{{organizer_link | id $id}}
{{organizer_id | id $id}}
{{organizer_name | id $id | filter the_title}} {{organizer_description | id $id | filter the_content}}{{organizer_excerpt | id $id | filter the_content}} {{organizer_phone | id $id }}
{{organizer_email | id $id }}
{{organizer_web | id $id }}
{{organizer_id | id $id}}
{{organizer_image | id $id }}

 

For places:

chronosly-info-logo   Places id $id start from 0

{{place_id | id $id}}
{{place_name | id $id | filter the_title}}
{{place_description | id $id | filter the_content}}
{{place_excerpt | id $id | filter the_content}}
{{place_phone | id $id }}
{{place_email | id $id }}
{{place_web | id $id }}
{{place_image | id $id }}
{{place_state | id $id }}
{{place_city | id $id }}
{{place_country | id $id }}
{{place_pc | id $id }}
{{place_gmap | id $id}}
{{place_direction | id $id }}
{{place_link | id $id}}

 

 

For tickets:

chronosly-info-logo   Tickets id $id start from 1

{{tickets_list}}
{{ticket_name | id $id}}
{{ticket_price | id $id}}
{{ticket_capacity | id $id}}
{{ticket_min | id $id}}
{{ticket_max | id $id}}
{{ticket_start | id $id}}
{{ticket_end | id $id}}
{{ticket_notes | id $id}}
{{ticket_link | id $id}}

 

 

For categories:

{{categories}} category list (coma separated)
{{category_slug | id $id}}
{{category_name | id $id | filter the_title}}
{{category_id | id $id}}
{{category_description | id $id | filter the_content}}

 

 

For tags:

{{tags}}

 

 

 

2- FUNCTION

The following is a function detailed list.

Remember that functions are always preceded by a variable and separated by pipe "|"

e.g. {{event_title | text_before Text example }}

 

Function id

Some variables have associated function id e.g. {{organizer_link | id $id}}

These functions are used to define witch elements, like events, organizers or places, will be displayed on templates.

In other words, and as examples "id", for organizers would be used to display maximum number of organizers. If you want to display maximum 3 organizers’ name in a template html code would be:

Organized by {{organizer_name | id 0}} {{organizer_name | id 1 | text_after ,}} {{organizer_name | id 2 | text_after ,}}

 

id $id

When there are multiple elements like events, orgs, places and categories they start from 0, then 1, 2, and go on. Tickets start from 1.

Therefore, events, organizers and places always need "id" because there is minimum an event, organizer or place. So, there should always be an element for those elements e.g. {{organizer_name | id 0}}

 

filter $value

This functions might be considered as advanced. "value" is related with text that executes WordPress filter, for example "the_content".

text_before text
text_after text
shorten_text $value

 

"value" is defined as a number of characters and is only available for variables that have text, titles, descriptions and excerpts.

 

time_format $value

is defined as a time format and only available for time variables.

 

For tickets

There is ticket_list where you can use value "0" or "1" depending if might be shown or not into ticket list.

ticket_title $value
ticket_price $value
ticket_capacity $value
ticket_min $value
ticket_max $value
ticket_start $value
ticket_end $value
ticket_link $value
ticket_note $value

 

 

3- Addons

At the moment only for Social Media Share:

 

Addon Variable
{{share_box}}

 

Addon Function
defaultchecked $value

if "1" is set, this function uses same Addon config.

 

Otherwise, values "0" or "1" can be user to enable/disable each function:

share_fb $value
share_tw $value
share_in $value
share_go $value
share_pi $value
share_ics $value

 

 

chronosly-info-logo   More information? contact Support Team