Side by Side Tables with upload images

2 posts by 2 authors in: Forums > CMS Builder
Last Post: May 8, 2013   (RSS)

By gkornbluth - May 8, 2013

Hi Ted,

Here's the basic code for a 2 column image layout based on recipes in my CMSB Cookbook http://www.thecmsbcookbook.com :

LIMITING THE AMOUNT OF COLUMNS IN A SINGLE ROW IMAGE DISPLAY

Here’s a suggestion from Interactive Tools’ Dave Edis:

With a table you can have one table cell per image and insert a closing and opening TR every X images. Here's a code snippet that does that:
<?php $maxCols=2; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
Which is just a way of saying "Every 2 images insert "</tr><tr>"".

Here’s a single row example using the thumbnail2 image as a link to a detail page, separate Title and Subtitle fields, a hidden border for IE and a fixed height for the image cell so that everything lines up nicely.
<table width="100%" border="0" cellpadding="5">
<tr>
<?php foreach ($your_sectionRecords as $record): ?><?php foreach ($record['image'] as $upload): ?>
<td align=”center” height="350" valign="bottom">
<a href="<?php echo $record['_link'] ?>"><img src="<?php echo $upload['thumbUrlPath2'] ?>" width="<?php echo $upload['thumbWidth2'] ?>" height="<?php echo $upload['thumbHeight2'] ?>" alt="" style="border:hidden" /><br /><div align="center" class="medium-title"><?php echo $record['title'] ?></div>
<div align="center" class="medium-text"><?php echo $record['sub_title'] ?></div></a>
</td>
<?php $maxCols=2; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
<?php endforeach ?><?php endforeach ?>
</tr>
</table>


Similarly, if you’re not using images this code will output a </tr><tr> after every 2 <td>...your content...</td> lines:
<table border="1">
<tr>

<?PHP foreach ($yourrecords as $record): ?>
<td>
<?PHP echo $record['your_content'] ?><br />
</td>
<?PHP $maxCols=2; if (@++$count % $maxCols == 0): ?></tr><tr><?PHP endif; ?>
<?PHP endforeach; ?>
</tr>
</table>

OR:

LIMITING THE AMOUNT OF COLUMNS IN A MULTI ROW IMAGE DISPLAY

<table >
<tr>
<td >
<tr>
<?php foreach ($wildlife_photographyRecords as $record): ?><?php foreach ($record['image'] as $upload): ?>
<td>
<table>
<tr>
<td ><a href="<?php echo $record['_link'] ?>"><img src="<?php echo $upload['thumbUrlPath'] ?>" width="<?php
echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" style="border:hidden" /></a>
</td>
</tr>
<tr>
<td ><span class="text_font"><?php echo $record['title'] ?></span>
</td></tr></table>
</td>
<?php $maxCols=2; if (@++$count % $maxCols == 0): ?></tr><tr><?php endif; ?>
<?php endforeach ?> <?php endforeach ?>
</tr>
</table>

Try these and see what you get, and then add in the other fields and the styling that you're using.

Best,

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!







Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php