list items - side by side

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>

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 ?>

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

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 ?>
&nbsp;</td>
  </tr>
</table>

Also what would I need to do with this code to show thumbnails oldest first.

Thanks

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

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>&nbsp;</h1>
   <!-- /STEP2: Display Records -->

  
<table>
<tr>


</tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</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>


Hi mo3,

Many Thanks - That worked great!

:)