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>

Attachments:

intertools1.jpg 78K

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

Attachments:

intertools2.jpg 107K

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

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

Thanks

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

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>

By Ash - June 19, 2013

Hi mo3,

Many Thanks - That worked great!

:)