UNDERSTANDING A LIST PAGE - Jun 7th, 2015
|
Here’s where things get a little different, so stick with me.
In the table that we created to hold the content for this example there are 2 columns and 2 rows . The left column holds
the thumbnail image for an event and the right column holds an event title and a link, The date and time of the event,
and a brief description of the event.
<table width="800" border="0" cellpadding="5">
<tr>
<td><img src="images/image1.jpg" width="150" height="250" alt="image 1" /></td>
<td><a href="event1.htm">Event # 1Title</a><br />List Page Description<br />
Date and Time<br />
</td>
</tr>
<tr>
<td><img src="images/image2.jpg" width="150" height="250" alt="image 2" /></td>
<td><a href="event2.htm">Event # 2 Title</a><br />List Page Description<br />
Date and Time</td>
</tr>
</table>
There are 2 events listed in the 2 rows of the table.
But wait you say, if we’re going to display all of the events listed in the multi record section editor, the basic
idea for the layout is what we want, but we need a more flexible approach then a new hard coded row for each event.
So here’s the more flexible approach.
First, get rid of the extra row in the table, since it will no longer be used:
<table width="800" border="0" cellpadding="5">
<tr>
<td><img src="images/image1.jpg" width="150" height="250" alt="image 1" /></td>
<td><a href="event1.htm">Event # 1Title</a><br />List Page Description<br />
Date and Time<br />
</td>
</tr>
</table>
Then, inside the beginning of the table, insert an instruction that says for each record in our events database table,
execute the following steps, and at the end of the table, insert an instruction that says stop executing the
instructions and look for the next record. Our table will then look like this:
<table width="800" Align="center" border="0" cellpadding="5">
<?PHP foreach ($eventsRecords as $record): ?>
<tr>
<td>
<img src="images/image1.jpg" width="150" height="250" alt="image 1" /></td>
<td><a href="event1.htm">Event # 1Title</a><br />List Page Description<br />
Date and Time<br />
</td>
</tr>
<?PHP endforeach; ?>
</table>
Since the looping instructions surround the code necessary to create a new row, each event will be displayed in a
separate row.
Then, from the “Step 2 area” of the Code Generator code, locate the word “Title:”. The code that follows,
including the less than “<,”and greater than “>” sign, will replace the text for the event name on your web
page. Don’t replace any of the HTML formatting, just the text. Repeat this process for the code next to “Dates and
Times:”, and “List Page Description:”. Then find the code next to” _link:” and insert one set in place of the
link URL. Like this:
<table width="800" border="0" cellpadding="5">
<?PHP foreach ($eventsRecords as $record): ?>
<tr>
<td><img src="images/image1.jpg" width="150" height="250" alt="image 1" /></td>
<td><a href="<?PHP echo $record['_link'] ?>"><?PHP echo $record['title'] ?></a><br /><?PHP echo
$record['list_page_description'] ?><br />
<?PHP echo $record['date_and_time'] ?><br />
</td>
</tr>
<?PHP endforeach; ?>
</table>
That leaves only the image thumbnail to deal with.
There's a lot of extra code in the “Step2a” area in the Code Generator code. There's a complete walk through of what
it all means in a later recipe, but for now, just paste the following code into your table to replace the entire <img
src.../> statement on your page to display the image thumbnail on your web page.
<?php foreach ($record['image'] as $index => $upload): ?>
<img src="<?PHP echo $upload['thumbUrlPath'] ?>" width="<?PHP echo $upload['thumbWidth'] ?>" height="<?PHP echo
$upload['thumbHeight'] ?>" alt="" /><br />
<?PHP endforeach ?>
The table on your page should now look like this:
<table width="800" border="0" cellpadding="5">
<?PHP foreach ($eventsRecords as $record): ?>
<tr>
<td>
<?php foreach ($record['image'] as $index => $upload): ?>
<img src="<?PHP echo $upload['thumbUrlPath'] ?>" width="<?PHP echo $upload['thumbWidth'] ?>" height="<?PHP echo
$upload['thumbHeight'] ?>" alt="" /><br />
<?PHP endforeach ?>
</td>
<td><a href="<?PHP echo $record['_link'] ?>"><?PHP echo $record['title'] ?></a><br />
<?PHP echo $record['date_and_time'] ?><br /><?PHP echo $record['list_page_description'] ?>>
</td>
</tr>
<?PHP endforeach; ?>
</table>
And that completes the listing page. Save it and move to the detail page.
|
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.
