Template Editing

The Scooch template.php file is the template for the individual slide show pages. It uses a mixture of XHTML, CSS, Javascript and PHP.

This document has been written to allow you to wrap the slide show presentation in your own markup frame and edit or apply new CSS if you wish.

We've provided a guide to the basic page structural markup, tips on template editing and a glossary of objects that make up the template with a description, composite markup and reference for each.

We recommend that unless you understand the Javascript and PHP you do not edit the template components directly.

Structural Markup

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


<body>

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

  <div id="scoochpresentation">
   (container for all content and functionality)

      <h1></h1>

      <div id="scoochdatedesc">
       (contains date and description if set to display)
      </div>

      <div id="scoochauthortags">
       (contains author and tags if set to display)
      </div>

      <div id="scoochthumbs">
       (contains thumbnails menu for the slide show)
      </div>

      <div id="scoochcontrols">
       (contains slide show controls)

          <div id="scoochmanualcontrols">
           (contains previous and next buttons)
          </div>

         <div id="scoochautoplaycontrols">
          (contains play and stop buttons 
		   - only available when Javascript is enabled)
         </div>

      </div>
	  
      <div id="scoochslides">
       (contains all slides)

          <div id="slide<?=$i?>" class="<?=$cls?>">
           (contains individual slide title, image, text etc 
		      - id and class attributes are PHP variables)

           Ratings and Comments objects 
		      display here if enabled.

          </div>

          (loops for each slide) 

      </div>

      <div id="scoochcommentsform">
       (displays on the page if comments are enabled)
      </div>

      <div id="scoochfoot">
       (contains RSS, hcard, logo buttons and edit button if logged in)
      </div>

  </div>

</body>

Top

Tips on Template Editing

All objects are wrapped in descriptive PHP start and end comments that describe what they do but will not display in the outputted source. E.g:

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

Please edit the file to suit your needs but it is important to remember that many of the identifiers and class attribute vales are used programmatically so we strongly recommend you do not change them.

Applying a New Template to Existing Slide Shows

We have included a useful routine to help you when you're editing the template. In the admin menu you will see an option to, 're-issue all'. When you edit the template you can use this to apply the new template to all the existing slide shows to test your design.

Important Notes

Do not rename or move the template.php file within the /scooch/ directory structure.
Do not edit or remove the PHP code above the DOCTYPE.
Do not edit or remove any value between stars in capitals. E.g. *SCOOCH_TITLE*.

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 151. Breadcrumb links object - Automatically populated using the $home web site URI variable set in the admin settings file, and the *SCOOCH_TITLE* content marker to automatically write out the slide show name. 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> > *SCOOCH_TITLE*
  </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 164. Automatically populated using the *SCOOCH_TITLE* marker with the slide show name.
XHTML output:
```
<h1>*SCOOCH_TITLE*</h1>
```

<div id="scoochdatedesc">

Description: Starts line 166. Contains the slide show date and description (if enabled).

XHTML output:


<div id="scoochdatedesc">

  <p>
    <strong>Created:</strong> 
    <span class="scoochdate">Date</span>
  </p>

  <p>
    <strong>Description:</strong> 
    <span class="scoochdesc">Description text</span>
  </p>

</div>

Reference: All XHTML is hard coded in to the page.

<div id="scoochauthortags">

Description: Starts line 175. If display Author is selected when creating a slide show the author name displays here using hCard Microformat. The slide show tags are displayed automatically and link to the index where all the slide shows tagged with the specific value display if the link is followed.

XHTML output:


<div id="scoochauthortags">

  <p class="vcard">
    <strong>Author:</strong> *SCOOCH_AUTHORTAG*
  </p>

  <p>
    <strong>Tags:</strong> *SCOOCH_TAGS*
  </p>

</div>

Reference: All XHTML is hard coded in to the page.

<div id="scoochthumbs">

Description: Starts line 182. Displays the thumbnails menu for the slide show and a link to each slide so that visitors can jump an individual slide in the document if CSS is disabled.

XHTML ouput:


<div id="scoochthumbs">

  <p id="scoochloadingtext"></p>

  <form>

    <ol>
      <li>
        <input type="image">
        <a class="scoochhide"></a>
      </li>
    </ol>

  </form>

</div>

Reference: All XHTML is hard coded in to the page.

<div id="scoochcontrols">

Description: Starts line 201. scoochcontrols contains the previous and next buttons (manualcontrols) and the slide show play and stop controls (autoplaycontrols). These controls are only displayed on the page if the admin has chosen to do so by checking the 'Enable Slide Controls?' checkbox in step 1 of the slide show creation or editing process.

XHTML ouput:


<div id="scoochcontrols">

  <div id="scoochmanualcontrols">

     <form>
      <div>

        <input type="submit" id="prevslide" />
        <input type="submit" id="nextslide" />

      </div>
    </form>

  </div>

The following autoplay controls only
display if Javascript is enabled.

<script type="text/javaScript">

  <!--
  document.write('

  <div id="scoochautoplaycontrols">
    <form>
      <div>

        <label for="scoochautoplayinterval">
        <input type="text" 
          id="scoochautoplayinterval" \/>
        <\/label>

        <input type="submit" id="startshow" \/>
        <input type="submit" id="stopshow" \/>

      <\/div>
    <\/form>
  <\/div>

  ');
  //-->

  </script>

</div>

Reference: All XHTML, PHP and Javascript is hard coded in to the page.

<div id="scoochslides">

Description: Starts line 229. All individual slides are contained within this object. The slide content, ratings and comments objects (if enabled) are all contained within a div. The markup here is for your reference to enable to you to see the elements making up each individual slide within a show.

XHTML ouput:


<div id="scoochslides">
 (contains all slides with their ratings and comments)

  Individual slide content starts here.

  <div id="slide<?=$i?>" class="<?=$cls?>">
   (id and class attributes are PHP variables)

    <h2>Slide Title 
      <span>(Slide X of X) - </span>
      <span>
        <a>X comment(s)</a>.
      </span>
    </h2>

    <img class="scoochimg" />
    (this is the individual slide image)

    <p>Slide description</p>

    hReview Ratings for each slide
	 (if enabled) starts here.

    <div class="hreview">

      <h3 class="item">Rate
        <span class="fn">
        Slide Title
        </span>
      </h3>

        <form>
          <div>

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

            <label>
              <input type="radio" />
              X star
            </label>
            (loops 5 times - one label for each star rating)

            <input type="hidden" /> 
            <input type="submit" />

          </div>
        </form>

     </div>

    Comments for each slide
	 (if enabled) starts here.

    <div id="($variable)" class="scoochcomments">

      <h2>Comments for Slide Title</h2>

      <h3>
        <a>Post a comment</a>
        or grab the comments <acronym>RSS</acronym> 
        feed from the bottom of the page.
      </h3>

      <h4 class="vcard">
        <cite class="fn">
          <a class="url">Jon</a>
        </cite> said:
      </h4>

      <blockquote>
        <p>Comment text</p>
      </blockquote>

      <p><em>Posted on (date)</em>. 
	  <a href="#scoochthumbs">Top</a></p>

    </div> 

    <p class="scoochhide">
      <a>Return to thumbnails</a>
    </p>
  
    <hr />

  </div>

  (loops for each slide)

</div>

Reference: All XHTML is either hard coded within the file, created by Javascript or / and by functions within /inc/inc.php.

<div id="scoochcommentsform">

Description: Starts line 308. The comments form appears once on the page and is re-used by each individual slide.

XHTML ouput:


<div id="scoochcommentsform">

  <h2 id="commentboxtitle">
    Comment on Slide Title
  </h2>

  <p>
    Line breaks will be converted to paragraphs. 
    URIs or e-mail addresses will be displayed as links.
  </p>

  <p id="scoochemoticons">
    <strong>Emoticons:</strong> 
    <img class="scoochjsemote" /> :) 
    (loops for each individual emoticon)
  </p>

  <form>

    <fieldset>
      <legend>Personal details</legend>

      <input type="hidden">

      <label>
        <span>Name (required)</span>
        <input type="text">
      </label>

      <label>
        <span>Your web site or homepage (optional)</span> 
        <input type="text">
      </label>

    </fieldset>

    <fieldset>
      <legend>Comment text</legend>

      <label>
        <span>Your comments</span> 
        <textarea></textarea>
      </label>

    </fieldset>

    <p>
      <label>
        <input type="checkbox"> Remember me?
      </label>
      <input type="submit">
    </p>

  </form>

</div>

Reference: All XHTML, PHP and Javascript is hard coded in to the page

<div id="scoochfoot">

Description: Starts line 344. Displays the XHTML/CSS buttons for the RSS feeds, hCards download using X2V and Scooch.

XHTML ouput:


<div id="scoochfoot">

  <p>

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

    (RSS comments link only displays if there are comments)   

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

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

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

    (edit button displayed if logged in as admin)

    <span class="scoochedit">
    <a>Edit</a>
    </span>

  </p>

</div>

Reference:

All XHTML is hard coded in to the page.

Top

Template Editing

Structural Markup

Tips on Template Editing

Applying a New Template to Existing Slide Shows

Important Notes

Glossary of Objects

Sections

Main Menu