Side by Side Tables with upload images
2 posts by 2 authors in: Forums > CMS Builder
Last Post: May 8, 2013 (RSS)
By ted@5fish.com - May 8, 2013
I would like to have uploads (images one field) appear side by side 2 column table
1 - 2
3 - 4
5 - 6
How would I achieve this?
Thank you.
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
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php