Customizing the front end viewer

Front-end top teaser structure

The structure of the front-end top teaser is depicted in the image below. Click here for an enlarged version.

A couple of notes:

• Each element is shown with ids ID, CSS class and default inline style, if present.

Front-end viewer structure

The overall structure of the WPTS front-end viewer is depicted in the image below. Click here for an enlarged version.

A couple of notes:

• Each element is shown with ids ID, CSS class and default inline style, if present;
• If no content is available for a given tab (either track information or map), then that tab is not show;
• If only one tab is shown, then that tab also has the CSS class .abp01-full-tab;
• Each of the content containers (#abp01-techbox-info, #abp01-techbox-map) is only shown when its corresponding tab is selected.

The track information container

The structure of the track information container (#abpp01-techbox-info) is depicted in the image below. Click here for an enlarged version.

A couple of notes:

• Each element is shown with ids ID, CSS class and default inline style, if present;
• Odd list elements are decorated with the abp01-item-odd CSS class;
• Even list elements are decorated with the abp01-item-even CSS class.

The map container

The structure of the map container (#abpp01-techbox-map) is depicted in the image below. Click here for an enlarged version.

A couple of notes:

• Each element is shown with ids ID, CSS class and default inline style, if present;
• If the map fails to load, then a retry interface is displayed (#abp01-map-retry-container), with an error message (#abp01-map-retry-message) and a retry button (#abp01-map-retry);
• The #abp01-altitude-profile-container element is only present if altitude profile is enabled in plug-in settings and is used to host the altitude profile chart, when the user requests it to be shown using the corresponding map control.

The front-end viewer data model

When rendering front-end viewer templates, WPTS provides the required data using a plain stdClass object, usually available through the $data variable. The structure of this object is described below.

Commonly used types

These are types that describe multiple properties in the front-end viewer data model.

Lookup data item descriptor

This is a plain stdClass object used to describe a value assigned from a pool of lookup data items. For instance, what type of bike it's recommended for a given trip. This is herein referred to as LookupDataItem.

Property	Type	Description
id	int	ID of the lookup data item assignment
type	string	Type of lookup data item assignment
label	string	The displayable label of the lookup data item. This is either the translated label (if translation is available for the current language) or the default label defined for the item.
hasTranslation	boolean	Whether or not a translation is available for the current language.

Structure of the data model itself

Property	Type	Description
info	stdClass	Contains track information data
info->exists	boolean	Whether or not track information is available
info->isBikingTour	boolean	Whether or not track information is for a biking trip
info->isHikingTour	boolean	Whether or not track information is for a hiking trip
info->isTrainRideTour	boolean	Whether or not track information is for a train ride trip
Fields available for biking trips
info->bikeDistance	float	Total distance
info->bikeTotalClimb	float	Total climb
info->bikeDifficultyLevel	LookupDataItem	The difficulty level of the trip
info->bikeAccess	string	Access information towards the start point and from the end point
Fields available for hiking trips
Fields available for train ride trips
track	stdClass	Contains GPX track-related data
track->exists	boolean	Whether or not a GPS track has been uploaded
postId	int	The post ID to which the data set belongs
ajaxUrl	string	Absolut URL to admin-ajax.php
ajaxGetTrackAction	string	Action name to be used with admin-ajax.php in order to retrieve detailed GPS track data
downloadTrackAction	string	Action name to be used with admin-ajax.php in order to download the GPS track file
nonceGet	string	Nonce value to be used with admin-ajax.php in order to retrieve detailed GPS track data
nonceDownload	string	Nonce value to be used with admin-ajax.php in order to download the GPS track file
imgBaseUrl	string	URL to the plug-ins image folder
settings	stdClass	Contains a snapshot of all the plug-in settings

Creating a new viewer theme

Integrating the front-end viewer into your own theme

Files that may be of interest

File	Link
Front-end top teaser template	Click here
Front-end viewer template	Click here
Front-end viewer CSS file	Click here
Front-end viewer helper functions	Click here