list items - side by side
9 posts by 3 authors in: Forums > CMS Builder
Last Post: June 19, 2013 (RSS)
By Ash - June 19, 2013
Hi,
I want to be able to list items to be listed in same row. So for example at the moment when I create a new record it lists it underneath but I want to show 4-5 items next to each other then when i enter next item it shows underneath the first row that was created. I need to be able to do this using tables in html - if you can help it would be much appreciated.
Thanks
By Ash - June 19, 2013
Hi,
After digging through the forum I was able to find this code. But I am still unable to get the formatting I need. I have attached image of what I am trying to do - thankyou.
<table>
<tr>
<?php foreach ($baby_curriculumRecords as $record): ?>
<td> <?php echo $record['image']; ?></td>
<?php $maxCols=3; if (++$count % $maxCols == 0): ?>
</tr><tr>
<?php endif ?>
<?php endforeach ?>
</tr>
</table>
By moh3 - June 19, 2013
hello,
1- first you need to define the varibel $count to zero before the loop.
2- $maxcols should be the number you would like your columns to be.
3- using divs is easier than tables unless you require tables , using margin left and margin right would create the space
$count=0;
$maxcols=2;
<?php foreach ($baby_curriculumRecords as $record): ?>
<div style="float:left; clear:none; margin-left:5px; margin-right:5px;"> content</div>
if (++$count % $maxCols == 0): echo '</div><div style="float:left; clear:none; margin-left:5px; margin-right:5px;">'; endif;
<?php endforeach ?>
By Ash - June 19, 2013
Hi moh3,
Many thanks for the help. It works but I have a couple of problems, please see image attached.
Also if I want to add title at the bottom of each thumbnail where would I put it.
<?php echo htmlencode($record['title']) ?>
( I need the formatting correct otherwise it displays it incorrectly.)
Sorry for the newbie questions but I am new and trying to learn this,
Thanks
By Ash - June 19, 2013 - edited: June 19, 2013
oops forgot to show the code.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>$count=0;
$maxCols=3;
<?php foreach ($baby_curriculumRecords as $record): ?>
<div style="float:left; clear:none; margin-left:5px; margin-right:5px;"> content</div>
<?php echo $record['image']; ?>
if (++$count % $maxCols == 0): echo '</div><div style="float:left; clear:none; margin-left:5px; margin-right:5px;">'; endif;
<?php endforeach ?>
</td>
</tr>
</table>
Also what would I need to do with this code to show thumbnails oldest first.
Thanks
By gregThomas - June 19, 2013
Hi,
The reason that some of the PHP code is appearing on your page is that you haven't got PHP tags surrounding some of the code, you need to add the missing PHP tags like this:
<?php
$count=0;
$maxCols=3;
?>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<?php foreach ($baby_curriculumRecords as $record): ?>
<div style="float:left; clear:none; margin-left:5px; margin-right:5px;"> content</div>
<?php echo $record['image']; ?>
<?php if (++$count % $maxCols == 0): echo '</div><div style="float:left; clear:none; margin-left:5px; margin-right:5px;">'; endif; ?>
<?php endforeach ?>
</td>
</tr>
</table>
I'll need a bit more information about how you have your section set up in CMS Builder. Are you allowing one upload per record? Where have you added the description of each image? Would it be possible to attach your code that is retrieving the records that you are displaying in the table?
Thanks!
Greg
PHP Programmer - interactivetools.com
By Ash - June 19, 2013 - edited: June 19, 2013
Hi Greg,
Many thanks for the reply.
I have copied the code you gave below and that did get rid of the code display in browser, thanks. However the maxCols - does not seem to work - I am not sure what i need to do - basically want to show 3 items in row and then 4 item will move to next row etc. - (here is the code) - In regards to uploading the image - I have setup a field with wysiwyg and I insert the image into that field. Thanks
<?php header('Content-type: text/html; charset=utf-8'); ?>
<?php
/* STEP 1: LOAD RECORDS - Copy this PHP code block near the TOP of your page */
// load viewer library
$libraryPath = 'blog/lib/viewer_functions.php';
$dirsToCheck = array('/hsphere/local/home/ash/organise/','','../','../../','../../../');
foreach ($dirsToCheck as $dir) { if (@include_once("$dir$libraryPath")) { break; }}
if (!function_exists('getRecords')) { die("Couldn't load viewer library, check filepath in sourcecode."); }
// load records from 'baby_curriculum'
list($baby_curriculumRecords, $baby_curriculumMetaData) = getRecords(array(
'tableName' => 'baby_curriculum',
'loadUploads' => true,
'allowSearch' => false,
));
$count=0;
$maxCols=3;
?><!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">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
body { font-family: arial; }
.instructions { border: 3px solid #000; background-color: #EEE; padding: 10px; text-align: left; margin: 25px}
</style>
</head>
<body>
<!-- INSTRUCTIONS --><!-- /INSTRUCTIONS -->
<!-- STEP2: Display Records (Paste this where you want your records to be listed) -->
<h1> </h1>
<!-- /STEP2: Display Records -->
<table>
<tr>
</tr>
</table>
<p> </p>
<p> </p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<?php foreach ($baby_curriculumRecords as $record): ?>
<div style="float:left; clear:none; margin-left:5px; margin-right:5px;"> <?php echo $record['image']; ?><?php echo htmlencode($record['title']) ?></div>
<?php if (++$count % $maxCols == 0): echo '</div><div style="float:left; clear:none; margin-left:5px; margin-right:5px;">'; endif; ?>
<?php endforeach ?>
</td>
</tr>
</table>
<p>
<?php if (!$baby_curriculumRecords): ?>
No records were found!<br/>
<br/>
<?php endif ?>
</p>
</body>
</html>
By moh3 - June 19, 2013
hello please try code i think i got it right
<table width="500" border="1">
<tr>
<?php foreach ($baby_curriculumRecords as $record): ?>
<td>
<div><img width="190" src="http://dribbble.s3.amazonaws.com/users/20816/screenshots/1121802/dribbble-boy-words.jpg"/></div><div><?php echo htmlencode($record['title']) ?></div>
</td>
<?php if ( ++$count % $maxCols == 0): echo '</tr><tr>'; endif; ?>
<?php endforeach ?>
</tr>
</table>
