The CMSB Cookbook

USING DIFFERENT STYLES TO DISPLAY GROUPS OF RECORDS ON A LIST PAGE - Aug 2nd, 2010


NigelGordijk had a number of articles that he wanted to display on his list page in the following format:

- The latest article with a large photo and a intro description
- The next two articles with smaller photos and intro descriptions
- The next five articles as links only, without photos or intro descriptions 

Damon from Interactive Tools offered this solution.

He said, “The code consists of three IF statements:

The first: Top Story - if the counter is 1 then output top story code.

The second: Next Two Stories - if the stories are number 2 or number 3, use the code to output the small images etc.

The third: Last Five Articles - if the story number is greater than 3, use the code that outputs only the title (with
link) and date, no images.”

You can see how this works by setting up a multi-record editor called “News” with at least a “Title” field, a
“Content” field, and one Upload field called “Uploads” and then adding some test records.

Here are the settings Damon used for the thumbnails for this example:

Thumb 1 - 235px wide x 999px high
Thumb 2 - 480px wide x 999px high

Now create a list viewer with the following code before the <head>

<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php

require_once "/your_path_to/lib/viewer_functions.php";

list($newsRecords, $newsMetaData) = getRecords(array(
'tableName' => 'news',
));

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

And in the body of your list viewer insert the following code:

<?php $counter = 1; ?>
<?php foreach ($newsRecords as $record): ?>

<?php if(($counter == 1) || ($newsMetaData['page'] > 1)) : ?>

<?php foreach ($record['uploads'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath2'] ?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo
$upload['thumbHeight2'] ?>" alt="" /> 
<?php endif ?>
<a href="<?php echo $record['_link'] ?>"><?php echo $record['title'] ?></a> 
<?php echo date("D, M jS, Y", strtotime($record['date'])) ?> 
<?php echo $record['content'] ?> 
<?php endforeach ?>
<hr />


<?php elseif(($counter > 1) && ($counter < 4)) : ?>

<a href="<?php echo $record['_link'] ?>"><?php echo $record['title'] ?></a> 
<?php foreach ($record['uploads'] as $upload): ?>
<?php if ($upload['hasThumbnail']): ?>
<img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo
$upload['thumbHeight'] ?>" alt="" align="left" /> 
<?php endif ?>
<?php endforeach ?>
Date: <?php echo date("D, M jS, Y", strtotime($record['date'])) ?> 
<?php echo $record['content'] ?>
 
<hr />
 


<?php elseif($counter > 3): ?>

<a href="<?php echo $record['_link'] ?>"><?php echo $record['title'] ?></a> 
Date: <?php echo date("D, M jS, Y", strtotime($record['date'])) ?> 


<?php endif; ?>
<?php $counter++ ?>
<?php endforeach; ?>

If you want to limit the number of words displayed for the “Content” and link to a detail page, you can place the
following code before the code in the <body> of your page to define a “maxWords function:

<?PHP
function maxWords($textOrHtml, $maxWords) {
$text = strip_tags($textOrHtml);
$words = preg_split("/\s+/", $text, $maxWords+1);
if (count($words) > $maxWords) { unset($words[$maxWords]); }
$output = join(' ', $words);

return $output;
}
?>

And replace the

<?php echo $record['content'] ?>

code, with something like this to utilize the “maxWords” function you inserted:

<?PHP echo maxWords($record['content'], 25);
?>...<a href="<?php echo $record['_link']; ?>">Read More</a>

The 25 can be any number and will define the number of words you want to display. Dragging the record to new positions
on the record list will change the way they are displayed on your list page. The record at the top of the list is #1,
and the second is # 2, etc. Note: the makes sure that no floating elements are allowed on the left
side of the text.

The materials on this web site have been created for use with CMS Builder content management software. CMS Builder software is published and licensed for use by InteractiveTools.com. Please contact Interactive Tools for information on the downloading of the software or the purchasing of licenses.