You are here: Home > Demo > Manual > Homepage Editing

Homepage Editing

The Scooch index.php file is the application homepage. It uses XHTML, CSS, Javascript and PHP.

The homepage can function as a stand-alone index. However, it has been deliberately created to allow you to either wrap elements in your own design or recycle individual data objects in other pages in a web site.

This document describes the basics you need to accomplish that. It provides a guide to the page structural markup, help with how to recognise and recycle data objects and a glossary of objects that make up the index with a description, composite markup and reference for each.

This document also applies to the Goggles supplementary search results page, goggles_results.php.

We recommend that unless you understand the Javascript and PHP you do not edit the index objects directly.

Structural Markup

To edit the index this is the basic structural markup that you need to be familiar with:


<body>

 <div id="scoochcrumbs">
  (contains breadcrumb links)
 </div>

 <div id="scoochindexcontainer">
  (contains h1,
      index display controls and all panels)

     <div id="scoochindexpanels>
       (contains main content panel and side panel)

          <div id="scoochindexmainpanel>
            (contains slide show summaries)
          </div>

          <div id="scoochindexsidepanel>
            (contains Goggles live search, 
                          tags list, tag cloud and bookmarks)
          </div>

          <div id="scoochadmin">
            (contains admin login and controls)
          </div>

     </div>

   <div id="scoochfoot">
     (contains RSS, hcard and logo links)
   </div>

 </div>

</body>

Top

How to Recognise and Recycle Data Objects

All objects are wrapped in descriptive PHP start and end comments that will not display in the outputted source:

  • <?//START Scooch object?>
  • <?//END Scooch object?>

Some objects are contained in the source code of the page in full but most are called from the inc/inc.php functions file with an echo command.

Example:


<?//START Scooch tag cloud?>
<?echo scoochRelTagsCloud();?>
<?//END Scooch tag cloud?>

To recycle objects you must do the following:

  1. Paste the whole object in to the new page. We recommend you include the start and end comments for clarity.
  2. Include the PHP functions file on the top line (above the DOCTYPE) of any page where an object is re-used. Example:

    <?include("./inc/inc.php");?>
    <!DOCTYPE...

    Important: The path must point to the correct location of inc.php on your server. File inc.php contains all the functions and global variables to populate the objects.
  3. Save any page where an object is re-used with a .php extension so the server will process the PHP within it.

Top

How To Ignore Data Objects

To ignore any object you can simply comment it out. This specifically relates to echo scoochRelTags and echo scoochRelTagsCloud which display the tags as a list or a cloud respectively.

To comment out an object insert two forward slashes before the echo command. Example:


<?//START Scooch tag cloud?>
<?//echo scoochRelTagsCloud();?>
<?//END Scooch tag cloud?>

Top

Glossary of Objects

Each object is identified here either by its XHTML id attribute value, tag name or echo value on the index page.

<div id="scoochcrumbs">
  • Description: Starts line 29. Breadcrumb links object - Automatically populated using the $home web site URI variable set in the admin settings file. This object also includes the link to enable visitors to skip quickly to the Goggles search and other navigational items in the side panel.
  • XHTML output: 
    
<div id="scoochcrumbs">

  <p>
    <strong>You are here:</strong>
    <a>home</a> > <a>$home</a>
  </p>

  <p class="scoochhide">
    <a>Skip to search and navigation</a>
  </p>

</div>
  • Reference: Object uses inc/breadcrumbs.php PHP include to inject the $home variable in to the breadcrumbs.
<h1>
  • Description: Starts line 43. Automatically populated based on display options selected by users (e.g. display all or latest slide shows, display by tag etc.).
  • XHTML output: 
    
<h1> </h1>
echo scoochIndexControls
  • Description: Starts line 57. Links to display slide shows in various ways.
  • XHTML ouput: 
    
<div id="scoochindexcontrols">

  <h3>View:</h3>
  <ul>
    <li><a>Latest</a></li>
    <li><a>All</a></li>
  </ul>
  
  <h3>Sort by:</h3>
  <ul>
    <li><a>Date</a></li>
    <li><a>Title</a></li>
    <li><a>Rating</a></li>
  </ul>

</div>
  • Reference:

    All XHTML is created by the scoochIndexControls function in the inc/inc.php file.
echo scoochList / echo scoochListByTag
  • Description: Starts line 71.

    echo scoochList and echo scoochListByTag output the slide show lists.

    They use the same markup and identifiers. The total number of slide shows to display is set in the user settings file via the admin menu. The number of slide shows to display with summary text is also set in the user settings file.

    echo scoochList is the default output. Slide shows with summary text display title, author (if set to display), number of comments, thumbnail, a large image for the first listing (in div class="scoochlistimg"), description and aggregated hreview ratings with star image.

    Remaining slide shows up to the maximum number set will display as thumbnails in a <ul>.

    echo scoochListByTag is the output if visitors choose to display slide shows by tag. It displays all slide shows by tag with summary text.
  • XHTML ouput: 
    
<div class="scoochlist">

  <div>

    <h2>
      <a>Title</a>
      <span class="vcard">
      by <a class="fn">Author</a>
      </span>
    </h2>

    <h3>
      Date - <em>X comments</em>
    </h3>
  
    <div class="scoochlistimg">
      <a><img /></a>
    </div>

    <p class="scoochlistfirstimg">
      <a><img /></a>
    </p>

    <p>Description</p>

    <p class="hreview">
      <img /> Rated 
      <span class="rating">X</span> 
      out of 5 stars from 
      <span class="reviewcount">X</span> 
      votes.
    </p>

  </div>

  (loops up to number of slide shows with summarys set)

  <ul>
    <li><a><img /></a></li>
  ..<li></li>
     (loops up to total number of slide shows set to display)
  </ul>

</div>
  • Reference:

    scoochList("FFFFFF",$_SESSION["sortby"])

    scoochListByTag("FFFFFF",$_SESSION["sortby"],$by,$tag)

    - The first argument FFFFFF is the hexadecimal colour value of the rounded corners on the images (i.e. set to FFFFFF if you are displaying the images on a white background). This will overwrite the default background colour for rounded image corners in the user settings.

    If you do not wish to set a specific colour here but always use the default, then replace FFFFFF with false. Do not change the other arguments.

    All XHTML is created by the scoochList and scoochListByTag functions in the inc/inc.php file.
echo goggles
  • Description: Starts line 84. Displays the live search form, and (if Javascript is enabled) search results up to a maximum number you can set. Results are displayed in a <ol>. The number of initial results to display under the search box is set in the /scooch/goggles.php file on line 4 ($maxResultsCount=10;) - default setting is 10 results. You can also set which directories to ignore in the search routine from line 8.

    If more results than the default of 10 are available a 'View all' link will display that directs users to the goggles_results.php page with all the results listed. The goggles_results.php page uses the same markup as the homepage except the <ol> of results is in <div id="gogglesresultnonjs">.
  • XHTML ouput: 
    
<div id="goggles">

  <form>

    <div>

      <label class="scoochhide">
      Goggle Live Search
      </label>
      <input type="text" />
      <input class="gbutton" type="image" />

      (Search results are displayed as below up to
             a number you set. Extra results are displayed in the 
             same div via the view all link on the 
             goggles_results.php page.)

      <div id="gogglesresult">
        <ol>
          <li>
            <a>(result links)</a>
          </li>
          (loops)
        </ol>
        <p><a>View all</a></p>
      </div>

    </div>

    </form>

</div>
  • Reference:

    All XHTML is created in the goggles.php file and output programmatically. If Javascript is not enabled then on submit the user will be redirected to goggles_results.php to see a results list.
echo scoochRelTags
  • Description: Starts on line 88. This object displays a h2 and a <ul> with the list of tags and a value next to each.
  • XHTML ouput: 
    
<div id="scoochreltags">

  <h2>Tags</h2>

  <ul>
    <li>
      <a rel="tag">tag</a> (X)
    </li>
    (loops)
  </ul>

</div>
  • Reference:

    scoochRelTags("tag",true)

    The first argument is how you wish to display the tags list, either by "tag" or "qty" in a descending order. The second argument is to display (or not) the number of times that the tag is used.

    All XHTML is created by the scoochRelTags function in the inc/inc.php file.
echo scoochRelTagsCloud
  • Description: Starts on line 92. This object displays a h2 and a <ul> with the list of tags and a value next to each. CSS is used to display the list inline and style the different classes for more frequently used tags.

    Classes are dynamically written to the <li> based on an algorithm in the PHP that calculates percentiles. Class attribute values used range from cloud1 through to cloud10 as the most popular. The tag use value (X) is hidden with CSS but present to provide semantic meaning even if CSS is disabled.
  • XHTML ouput: 
    
<div id="scoochreltagscloud">

  <h2>Tag Cloud</h2>

  <ul>
    <li class="cloudX">
      <a rel="tag">tag</a> <em>(X)</em>
    </li>
    (loops)
  </ul>

</div>
  • Reference:

    All XHTML is created by the scoochRelTagsCloud function in the inc/inc.php file.
echo scoochBookmarks
  • Description: Starts on line 96. Displays bookmarks as a <ul> of thumbnails.
  • XHTML ouput: 
    
<div id="scoochbookmarks">

  <h2>Bookmarks</h2>

  <p>Favourite Scooch shows from around the Web.</p>

  <ul>
    <li>
      <a><img />(Bookmark thumbnail)</a>
    </li>
    (loops)
  </ul>

</div>
  • Reference:

    All XHTML is created by the scoochList and scoochBookmarks function in the inc/inc.php file.
include("./inc/admin_menu.php");
  • Description: Starts line 108. Displays a login link prior to login then displays the admin menu as a list. class="scoochhide" is used to hide the <h2>. <li> class attributes are there purely for styling using the images in the /img/ directory.
  • XHTML ouput: 
    
<div id="scoochadmin">

  <h2 class="scoochhide">Admin</h2>

  <ul>

    (if logged in as admin)

    <li class="admins"><a>Logout</a></li>
    <li class="adminplus"><a>New show</a></li>
    <li class="adminplus"><a>Edit a show</a></li>
    <li class="adminminus"><a>Delete a show</a></li>
    <li class="adminplus"><a>Re-issue all</a></li>
    <li class="admins"><a>Bookmarks</a></li>
    <li class="admins"><a>Settings</a></li>

    (else)

    <li class="admins"><a>Login</a></li>

  </ul>

</div>
  • Reference:

    All XHTML is created in the <?include("./inc/admin_menu.php");?> file.
echo scoochFoot
  • Description: Starts line 117. Displays the XHTML/CSS buttons for the RSS feed, hCards download using X2V and Scooch.
  • XHTML ouput: 
    
<div id="scoochfoot">

  <p>

    <span class="rssfeed">
      <a>RSS</a>
    </span> 

    <span class="dlvcards">
      <a><span>Add</span> hCards</a>
    </span> 

    <span class="scoochbutton">
      <span>•••</span> 
        <a>Scooch 0.5 beta</a>
    </span>

  </p>

</div>
  • Reference:

    All XHTML is created by the scoochFoot function in the inc/inc.php file.

Next: Template editing. More fun!

Top