Variables can be placed in templates using the syntax {{ variable name }}.
Basic true or fasle boolean can be used in the form {{ mbDBool (variable name) ? some content to appear when variable is true [[ some variable name ]] }} or {{ mbDBool !(variable name) ? some content to appear when variable is false [[ some variable name ]] }}
Contents |
Branding Placeholders
The following placeholders are available for styling the appearance of a template and will be used in the associated CSS.
The Branding placeholders are prefixed with the word “branding.”, e.g.
|
1 |
{{branding.bodyColour}} |
Example: To style all h1 tags your CSS will contain the line
|
1 |
h1 {color:#{{branding.h1Colour}};} |
Colour settings are controlled in the Branding and Appearance menu in the Logo and Colours panel. In edit mode, clicking the input box next to any colour brings up a colour picker. You can use this or enter the 6-digit hex code directly into the input box.
| Placeholder Name | Use | Notes |
|---|---|---|
| bodyColour | Default text colour | Default: #000 |
| defTitleColour | Default Title Colour | Inherits bodyColour when left blank |
| sBoxTextColour | Search Box Text Colour | Default: #f3f3f3 |
| h1Colour | H1 font colour | Inherits defTitleColour when left blank |
| h2Colour | H2 font colour | Inherits defTitleColour when left blank |
| h3Colour | H3 font colour | Inherits defTitleColour when left blank |
| boxBackColour | Searchbox Background Colour | Default: #4d4e53 |
| boxBackColourLetting | Searchbox Background Colour for Lettings | Default: #8c8d8e |
| listingBColour | Background colour of the results listing | |
| buttonBackColour | Background colour for the carousel buttons and info headers. | Inherits boxBackColour when left blank |
| buttonTextColour | Text colour of buttons | |
| hlBackColour | Background colour of button on rollover (highlight). | Inherits butonBackColour when left blank |
| lBoxBack | Background colour for the pagination and search results control panel. | Default: #F7F7F7 |
| lBoxBorder | Border colour for the pagination and search results control panel. | Default: #AAAAAA |
Property Object
Properties of the property object are available as placeholders in all templates concerned with a particular property (search results etc).
| Placeholder Name | Use |
|---|---|
| property_id | Unique id for the property |
| firm_id | Unique id for the selling agent |
| primaryImage_id | Unique id for the primary image |
| imagePath | Full path to the main property image |
| houseNo | House name or number |
| streetName | Street Name |
| town | Town or City |
| postcode | Postcode |
| lat | Latitude |
| lng | Longitude |
| mapData | Stored set of map data for the google map |
| askingPrice | Asking price (unformatted) |
| bedRooms | Number of bedrooms |
| livingRooms | Number of living rooms |
| bathRooms | Number of bathrooms |
| lastUpdated | unix timestamp for when the property was last updated |
| letting | 1 when the property is to let, 0 when the property is for sale |
| datecreated | unix timestamp for when the property was created |
| dispAddress | Display Address |
| statusId | Seling Status |
| statusClass | class based on the status id, becomes status_status name in lower case (spaces become underscores, eg. status_under_offer) |
| descText | Description text, this contains simple html markup |
| summaryText | Summary Text (Plain text) |
| outputAskingPrice | Formated Asking Price, this contains the currency symbol |
| formatAddress | Full Address |
| priceTypeLabel | Price Type |
| sqmHouse | Internal area in m² |
| sqmLand | External area in m² |
| featureList | Lists as many special features as are present |
Homepage Templates
Detail Templates
Placeholders in the detail template are prefixed with “properties.details.placeholderName“, for example:
|
1 |
{{properties.details.summaryText}} |
The following placeholders are used in the default_detail.html template:
| Placeholder name | Description |
|---|---|
| priceTypeLabel | The price type, e.g. Offers over, Price on Application, etc. |
| outputAskingPrice | The price in figures. Not displayed if price qualifier is POA. |
| letFrequency | If a letting property, the let frequency. |
| statusId | Selling status of the property, e.g. Available, Sold STC, etc. |
| returnToHome | Boolean. Provides a link back to the home page. |
Search Results Templates
Search Box Templates
Adding a “Loading…” graphic
Because the BDP content can sometimes take a few seconds to load, it may be desirable to have a loading graphic. This is simple to achieve using the following technique:
Insert an image tag into any of the BDP ID’s and set a minimum-height on the ID in your CSS.
This works because all content inside a BDP div id is replaced by the BDP system. You will see the graphic until such time as the replacement content is ready to be displayed.
Because many sites display the advanced search and home page output or search results one above the other, a useful technique is the wrap the BDP divs in a container which as a min-height set and add the loading graphic to just one div. And example would be:
|
1 2 3 4 5 6 |
<div id="bdp_home_container"> <div id="search_box_container"></div> <div id="home_res_container"> <img id="bdp_home_preloader" src="http://bdphq.com/images/loading/loading1.gif" alt="loading…"/> </div> </div> |
You can see in the above example that the graphic is coming from the BDP server where we have a number of such loading graphics. You are free to pull the graphic from wherever you like.
Using onComplete() in the BDP snippet