REALTOR 747 :: The Property Listings Management System

REALTOR 747 - Writing your own template

Writing your own template

In this page, we will introduce very basic information only that you need to know when writing your own template. For more detailed information and examples, please consult [Support] - [Template Markers - Current] page on our website and the free templates we provide.

0. Result first

These pictures are screenshots taken from our customer's sites. All of them are the results of the template file listings.html which shows the list of properties in a category.

And these are from our templates.

As you see, depending on the template, they look quite different. REALTOR 747 lets you design the look and feel of your (client's) site very easily.

1. Template based system

REALTOR 747 employed template based design technic so that you can design the look and feel of your website. The system gets property information through admin panel and stores it into database. And when required, it provides the stored information back to a template through markers which you will use in your template.

For example, in case of a marker {/ $agent_name /}

2. Include {/ $it747_html_header /}

You must include  in html <head> section. It provides correct template path to the browser.

So the simplest form of your template is:

Hello, World.

<html>

<head>

    <!-- {/ $it747_html_header /} -->

</head>

<body>

    Hello, World.

</body>

</html>

3. Hello, John The Realtor

The marker for "John The Realtor" ( the business name ) is {/ $business_name /}.

So the template file is like this:

Hello, John The Realtor.

<html>

<head>

    <!-- {/ $it747_html_header /} -->

</head>

<body>

    Hello, {/ $business_name /}.

</body>

</html>

4. Markers

A marker ( variable or placeholder ) starts with $ (dollar symbol) followed by the name of the marker. And the the marker must be included between {/ and /}

* example: {/ $business_name /} {/ $agent_image /} {/ $page['name'] /} {/ $l_tour[ 'link' ] /} ...

For complete list of the markers currently supported, check [Support] - [Template Markers - Current] page on our website.

5. Using {if ... if}

For example, suppose that you want to display an active symbol ( ex. marker_active.gif ) for currently active page.

Using {if ... if}

{if ( $page_id == $page['id'] ) if}

    <img src="marker_active.gif" border="0" alt="" />

{else}

    <img src="marker_normal.gif" border="0" alt="" />

{/if}

6. Using {loop ... loop}

For example, a listing can have multiple property virtual tour files.

Using {loop ... loop}

{loop $l_tours as $l_tour loop}

    <a href="{/ $l_tour[ 'link' ] /}">

        <img src="tour.gif" border="0" /> {/$l_tour[ 'name' ] /}

    </a>

{/loop}

7. Using {include ... include}

Usually we have header section and footer section in common. We can put the common html code into header.html and footer.html files and use them in a template file.

First, we write common files.

header.html

<html>

<head>

    <!-- {/ $it747_html_header /} -->

</head>

<body>

    Welcome to {/ $business_name /}.<br>

footer.html

</body>

</html>

And then, we use those common files in template files.

home.html

{include header.html include}

<h1>Hello, I am HOME.HTML</h1>

{include footer.html include}

listings.html

{include header.html include}

<h1>Hello, I am LISTINGS.HTML</h1>

{include footer.html include}

8. Trouble shooting your template

a. Using [Support] - [Marker Highlighter]

Sometimes we miss closing symbol of a marker or a control statement - ex. /} or {/loop}. The marker highlighter highlights all markers so that you can find missing symbols easily.

b. Using {/ $it747_debug_message /} marker

You can use {/ $it747_debug_message /} marker which contains some useful debug information in your template file. To use that marker, you need to enable [Admin] - [Setup] - [Debugging - Visitor Area].

A.1 Sample template file

Here is a complete sample template file 'home.html' which is included in the product. To see the result page, please click here.

home.html - Template 'silver'

<!-- 

---- Provided by REALTOR 747 - The Property Listings Management System 

---- A product of IT747.COM - http://www.it747.com

--->

<html>

<head>

<title>{/ $title /}</title>

<!-- {/ $it747_html_header /} -->

<link rel="stylesheet" href="style.css" type="text/css">

</head>

<body>

<table class="base"><tr><td>

<table class="top">

  <tr>

    <td class="slogan_1_l">

     <font class="business_name">{/ $business_name /}</font></td>

    <td class="slogan_1_r">

     <img src="{/ $business_image /}"></p>

     <font class="business_slogan">{/ $business_slogan /}</font></td>

  </tr>

</table>

<br>

<table>

  <tr>

    <td class="menu_pane">

      <table>

       {loop $pages as $page loop}

       <tr>

         <td class="page"><a href="{/ $page['link'] /}">{/ $page['name'] /}</a></td>

       </tr>

       {/loop}

      </table>

	  <br>

      <img src="{/$agent_image/}" class="agent_image"><br><br>

      <font class="agent_name">{/$agent_name/}</font><br>

      <font class="agent_phone">{/$agent_phone/}</font>    

    </td>

    <td class="content_pane">

      <table>

        <tr>

          {loop $cats as $cat loop}      

          <td class="category">

            <a href="{/$cat['link']/}">{/$cat['name']/} ({/$cat['howmany']/})</a>

          </td>

          {/loop}

        </tr>

      </table>

<!-- Body Begin -->

<h3 class="m_title"><font color="red">Welcome to {/$business_name/}</font></h3>

<table>

 <tr>

  <td width="60%">

    <table class="welcome" align="center">

    <tr><td class="welcome">{/$agent_welcome_message/}</td></tr>

    </table>

  </td>

  <td width="40%">

    <table class="welcome" align="center">

     <tr><td class="m_title">Featured Property</td></tr>

     <tr><td class="catch_phrase" align="center">{/$sp_catch_phrase/}</td></tr>

     <tr><td class="small_images">

           <a href="{/$sp_ll['link']/}">

             <center>

               <img src="{/$sp_ll['image']/}" class="small_image">

             </center>

           </a>

         </td></tr>

     <tr><td class="price" align="center">{/$sp_price/}</td></tr>

    </table>

  </td>

 </tr>

</table>

<!-- Body End -->

    </td>      

  </tr>      

</table>      

<table>      

  <tr>      

    <td class="footer">      

   	 <b>{/$agent_name/}</b> 

        <font color="red">Phone: {/$agent_phone/}</font>       

        Fax: {/$agent_fax/} <br>

        Email: <a href="mailto:{/$agent_email/}"><font class="email">{/$agent_email/}</font></a>

     <br>

	 <i>{/$agent_address/}</i>           

    </td>           

  </tr>           

</table>           

<table>         

  <tr>         

    <td class="slogan_2">{/$business_slogan/}</td>         

  </tr>         

</table>         

</td></tr></table>

<center>  

<br>

<font class="it747_link">         

    Powered by <a href="http://www.it747.com">REALTOR 747</a>, 

    Template design by <a href="http://www.it747.com">IT747.COM</a>  

</font>  

</center>  

<!-- {/$it747_debug_message/} -->

</body>          

</html>

<!-- vim: set expandtab sw=4 ts=4 sts=4: -->