Contributed by Dale Ray

Notes

Some of the code examples contain long lines. They should be fine when cut and paste into a text editor.

If some of the custom field names are a bit odd I used existing field names and the names did mean something when originally created. You can name your fields and variables anything you choose. Be consistent and use names that make sense to you.

Introduction

This is a description of how I implemented a Coranto profile, that builds from multiple categories into a table that allows you to specify the number of columns and the number of items per table cell. For my application the items in each cell are in an unordered list. I used:

  • Coranto 1.24
  • Required Addons
    • News Categories
    • Sort Orders
    • News Counter

The Style Code

The heart of this is the style that you use to process the news database for the profile. This is the final style I used:

<PerlCode>
$done = 0;
$maxCol = 4;
$newCell = 0;
$maxItems = 18;
if (not $catCounter) {
$catCounter = 1;
$allItemsCounter = 1;
$firstCell = 1;
} else {
$catCounter++;
$allItemsCounter++;
$firstCell = 0;
}
$itemCount = $catCounter;
if ($itemCount > $maxItems){
$newCell = 1;
$catCounter = 1;
$colCount++;
}
if ($allItemsCounter == $NCActiveCount) {
$done = 1;
}
</PerlCode>
<If: Sub: isNewCategory>
<PerlCode>
if ($Category eq "bb_boys") {
$colHeader = "Boys Basketball";
} elsif ($Category eq "bb_girls") {
$colHeader = "Girls Basketball";
} elsif ($Category eq "coach_site") {
$colHeader = "Coaching Organizations";
} elsif ($Category eq "local_college") {
$colHeader = "Local Colleges";
} elsif ($Category eq "pro_sports") {
$colHeader = "Professional Sports";
} elsif ($Category eq "ref_sites") {
$colHeader = "Reference Sites";
} elsif ($Category eq "school_sites") {
$colHeader = "School Sites";
}
$catCounter = 1;
if (not $newCell) {
$colCount++;
$newCell = 1;
}
</PerlCode>
</If>
<PerlCode>
$curCount = $colCount;
if ($firstCell) {
$startCell = "<tr><td><ul>";
} elsif ($curCount > $maxCol) {
$startCell = "</ul></td></tr><tr><td><ul>";
$colCount = 1;
$newCell = 1;
} else {
$startCell = "</ul></td><td><ul>";
}
</PerlCode>
<If: Field: newCell><Field: startCell><li class="sideBarTitle"><Field: colHeader></li></If>
<If: Field: CustomField_SB_type eq "Title"><li class="sideBarTitle"><Field: CustomField_linkText></li></If>
<If: Field: CustomField_SB_type eq "Link"><li><a href="<Field: CustomField_URL>"><Field: CustomField_linkText></a></li></If>
<If: Field: CustomField_SB_type eq "Text"><li><span class="sideBarText"><Field: CustomField_linkText></span></li></If>
<If: Field: done>
<PerlCode>
$fillCell = "";
for ($i = 1; $i <= ($maxCol - $curCount); $i++) {
if ($i == 1) {
$fillCell = "</ul></td><td>";
} else {
$fillCell = $fillCell."</td><td>"
}
}
</PerlCode>
<Field: fillCell>
</If>

↑ Contents

Style Code Explained

I will break this down and explain each part.

$done = 0;

$done is a FLAG. Later we will test to see if we are on the last item to be processed and do some clean up to make sure the html is valid

<PerlCode>

We are going to use perl for counting and for setting some temporary fields. The perl has to be enclosed in the <PerlCode></PerlCode> tags.

$maxCol = 4;

Initialize a variable that will be used as the limit on the number of columns in our table.

$maxItems = 18;

Initialize a variable that will be used as the limit on the number of items in each table cell.

$newCell = 0;

Set the FLAG for starting a new table to zero, we will be testing for conditions that mean a new cell should be started and setting this to one if those are met.

if (not $catCounter) {
$catCounter = 1;
$allItemsCounter = 1;
$firstCell = 1;
} else {
$catCounter++;
$allItemsCounter++;
$firstCell = 0;
}

This perl if statement checks to see if the variable $counter has been initialized. If not it:

  • Sets the counter $catCounter to one - used for counting items in each category
  • Sets the counter $allItemsCounter to one - used to count ALL items in the profile. This uses the News Counter addon by Parahead, it must be installed and enabled.
  • Sets the value of the $firstCell flag to one

↑ Contents

This section of the loop is only executed when the very first item in the profile is processed, on every other pass through the style the section of the if/else statement after the ELSE will be processed. The section after the else increments the counters and sets the $firstCell flag to zero or off.

The flag $firstCell is only used for the very first cell of the table. We need to know if it is the first cell because the html we need to write is different for this cell.

$itemCount = $counter;

We set $itemCount to the value of $counter just to have a shorter name to use later.

if ($itemCount > $maxItems){
$newCell = 1;
$counter = 1;
$colCount++;
}
</PerlCode>

This is the first conditional testing we are doing. We test to see if this item cause the itemCount to be over the number allowed in a given cell. If the test is true we set the new cell flag because we want to start a new row, start the counter over at one, and increment the $colCount variable.

We need enter some non-perl into the style so we use the closing </PerlCode> tag.

<If: Sub: isNewCategory>

Because we want each category of items to be in it's own cell we are using the built in isNewCategory subroutine to determine if the current item is from a different category than the last item. This subroutine routine returns a zero if the category has not changed and a 1 if it has. Anything between this statement and the ending </If> will only be executed when the category changes.

<PerlCode>
if ($Category eq "bb_boys") {
$colHeader = "Boys Basketball";
} elsif ($Category eq "bb_girls") {
$colHeader = "Girls Basketball";
} elsif ($Category eq "coach_site") {
$colHeader = "Coaching Organizations";
} elsif ($Category eq "local_college") {
$colHeader = "Local Colleges";
} elsif ($Category eq "pro_sports") {
$colHeader = "Professional Sports";
} elsif ($Category eq "ref_sites") {
$colHeader = "Reference Sites";
} elsif ($Category eq "school_sites") {
$colHeader = "School Sites";
}

↑ Contents

We go right back into perl to set pretty titles for the categories. The variable $colHeader is set to the text that describes each category each time the category changes.

$counter = 1;

If we are in a new category we start counting the items from 1 again.

if (not $newCell) {
$colCount++;
$newCell = 1;
}

This if statement tests to see if the newCell flag is on or off. if it is off the colCount is incremented and the newCell flag is turned on. Remember if the item count has just passed the maximum items we have already set the newCell flag and incremented the column counter. If we increment the column again if this item is also in a new category our column count will be off.

</PerlCode>
</If>

The closing </PerlCode> tag and the closing </If> tag.

<PerlCode>

Back to perl.

$curCount = $colCount;

Put the value of $colCount into the variable $curCount.

if ($firstCell) {
$startCell = "<tr><td><ul>";
} elsif ($curCount > $maxCol) {
$startCell = "</ul></td></tr><tr><td><ul>";
$colCount = 1;
$newCell = 1;
} else {
$startCell = "</ul></td><td><ul>";
}
</PerlCode>

This if statement takes care of getting our html tags correct for the table.

If the $firstCell flag is set all we need to do is put the start tags in. Here we are starting a new row <tr>, a new cell <td>, and a new unordered list <ul>.

The test after the elsif checks to see if the we have reached our limit that was set on the number of columns. If we have the column count is reset to one and the newCell flag is set. Our html tags have to end the list </ul>, close the table cell </td>, end the row </tr> and then each html element is started over.

If neither of these conditions is met the value of $startCell only ends and restarts the list and the cell, not the row.

Then we get back out of perl with the closing </PerlCode>

<If: Field: newCell><Field: startCell><li class="catTitle"><Field: colHeader></li></If>

Variables used in the perl code portion are available as Coranto fields in the non-perl sections of your Coranto style. So this Coranto style if statement will only execute the code between the tags when the $newCell is one. the code between the tags prints the value we set for the $startCell and the $colHeader variables.

<If: Field: CustomField_SB_type eq "Title"><li class="title"><Field: CustomField_linkText></li></If>

This line tests a custom field I used to tag the items as to type. Each type is displayed with a different CSS style and different html tags. Items of this type are section titles.

<If: Field: CustomField_SB_type eq "Link"><li><a href="<Field: CustomField_URL>"><Field: CustomField_linkText></a></li></If>

This if is executed for items that are intended to be links.

<If: Field: CustomField_SB_type eq "Text"><li><span class="text"><Field: CustomField_linkText></span></li></If>

This writes outs the items that are plain text.

<If: Field: done>
<PerlCode>
$fillCell = "";
for ($i = 1; $i <= ($maxCol - $curCount); $i++) {
if ($i == 1) {
$fillCell = "</ul></td><td>";
} else {
$fillCell = $fillCell."</td><td>"
}
}
</PerlCode>
<Field: fillCell>
</If>

Remember the $done Flag? Each time through the style we test at the end to see if it is set. If it is we have to do some checking and possibly clean up our table code if the number of cells does not fill the last row of the table. The $fillCell variable is set to a null value initially, we will change this based on how many cells we need to add to pad the last row out.

To do this I used a perl for loop. The statement in parenthesis after the for sets a variable $i to the value of 1. then it tests to see if $i is less than or equal to the maximum column value minus the current column value, and lastly it increments $i by one on each pass through the loop. If we are in the last cell of the row already the value of $fillCell is not changed. If we need to pad the row the if statement inside the for loop executes. On the first pass we have to close the unordered list we were using, close the cell we are in and open a new cell. For each pass after that we have to close the previous cell and open a new one. Closing the last cell, the last row, and the table is taken care of in the shtml file or template that the profile output is included in. The $fillCell value is written out using the Coranto style <Field: fillCell>.

↑ Contents

Using This Style

The framework for the shtml page or Coranto template would look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h**p://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="h**p://www.w3.org/1999/xhtml" xml:lang="en" lang="en-US">

<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="style/your.css" />
<title>Your Title</title>

</head>

<body>

        <table class="links">

        <!--#include virtual="/yourpath/links.txt" -->
</ul>
</td>
</tr>
</table>
</body>

</html>

where links.txt is the file built for inclusion in an shtml page. You would remove the SSI tag and put <Field: Content> to use this as a template.

↑ Contents

Revision History

  • Originally published December 30, 2004
    • Revised style and added empty cells to pad last table row if needed. Thanks to Parahead for pointing this out.
  • July 28, 2006
    • Reformatted and published to this wiki.
  • July 27, 2010
    • Edited to eliminate section that referred to a site using this technique. That site is now dead.

↑ Contents


Copyright

Please see Copyright and Other Legal Information.

No warranty, promises. or guarantees

The information in this document is accurate to the best of my knowledge. Use this information at your own risk. Make back ups and back ups of your back ups. There are no promises or guarantees of the fitness of this information for any use. There are no implied or stated warranties.

Thanks,

Dale Ray

Comments/Discussion

Discuss or comment in this forum thread.




Page last modified on October 27, 2011, at 06:46 PM