Skip to content

Customizing the front end viewer

Jump to bottom
Boia Alexandru edited this page May 21, 2020 · 48 revisions

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. WPTS top-teaser structure

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. WPTS overall structure

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. WPTS Viewer - Track Information Container Structure

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. WPTS Viewer - Map Container Structure

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 You may consult the field definitions over here
info->bikeDistance float Total distance
info->bikeTotalClimb float Total climb/total altitude gain
info->bikeDifficultyLevel LookupDataItem The difficulty level of the trip
info->bikeAccess string Access information towards the start point and from the end point
info->bikeRecommendedSeasons LookupDataItem[] The recommended seasons for the trip
info->bikePathSurfaceType LookupDataItem[] The path surface types encountered along the way
info->bikeBikeType LookupDataItem[] What bike types are recommended for the trip
Fields available for hiking trips You may consult the field definitions over here
info->hikingDistance float Total distance
info->hikingTotalClimb float Total climb/total altitude gain
info->hikingDifficultyLevel LookupDataItem The difficulty level of the trip
info->hikingAccess string Access information towards the start point and from the end point
info->hikingRecommendedSeasons LookupDataItem[] The recommended seasons for the trip
info->hikingSurfaceType LookupDataItem[] The path surface types encountered along the way
info->hikingRouteMarkers string Description of what official trail markers to follow
Fields available for train ride trips You may consult the field definitions over here
info->trainRideDistance float Total distance
info->trainRideChangeNumber int How many trains were changed (how many connections)
info->trainRideGauge float Railroad line gauge
info->trainRideOperator LookupDataItem[] What companies operated the used trains
info->trainRideLineStatus LookupDataItem[] Statuses for various sections of the line
info->trainRideElectrificationStatus LookupDataItem[] Electrification statuses for various sections of the line
info->trainRideLineType LookupDataItem[] Types (simple or double railway line) for various sections of the line
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 front-end viewer theme

A front-end viewer theme describes the trip summary front-end viewer's layout and styling. There are a couple of elements that form a theme:

  • the top teaser element (a small hint that's displayed on top of the post to notify the user that there's also some technical - so-to-speak - information related to the trip being described in the post;
  • the viewer itself, that's either inserted at the end of the post or at a specific location using a shortcode or a block;
  • the CSS styles that's applied to the above-mentioned elements;
  • the JavaScript files required to add interactivity, but that's not customizable at this moment.

The customizable theme elements are formalized in an interface, Abp01_FrontendTheme (look it up over here), that defines the following methods:

  • function includeFrontendViewerStyles() - Enqueue styles to be used with the front-end viewer;
  • function registerFrontendViewerHelpers() - Include the front-end viewer view helpers if needed;
  • function renderTeaser(stdClass $data) - Renders the trip summary front-end top teaser;
  • function renderViewer(stdClass $data) - Renders the trip summary front-end viewer.

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
Clone this wiki locally