Three column layout keeps looping with the same data - php

Question

I have some PHP code which pulls data from the database and places it in to a three column layout like below:
Column one column two column three
Now this works, the only problem is, the while loop keeps going and it repeats the same data over and over again. If i only have one entry in the database then this is repeated three times and i end up with one column of data. shown here :
http://www.gulfwarmemorial.co.uk/events.php
If I have three entries then the rows get repeated. I have tried various things but nothing seems to work.
$tableName="fundraising_event";
$targetpage = "events.php";
$limit = 6;
$query = "SELECT COUNT(*) as num FROM $tableName";
$total_pages = mysql_fetch_array(mysql_query($query));
$total_pages = $total_pages[num];
$stages = 3;
$page = mysql_escape_string($_GET['page']);
if($page){
$start = ($page - 1) * $limit;
}else{
$start = 0;
}
// Get page data
$query1 = "SELECT *, SUBSTRING(event_details,1,200) AS event_details_short FROM $tableName LIMIT $start, $limit";
$result = mysql_query($query1);
// Initial page num setup
if ($page == 0){$page = 1;}
$prev = $page - 1;
$next = $page + 1;
$lastpage = ceil($total_pages/$limit);
$LastPagem1 = $lastpage - 1;
$paginate = '';
if($lastpage > 1)
{
$paginate .= "<div class='paginate'>";
// Previous
if ($page > 1){
$paginate.= "<a href='$targetpage?page=$prev'>previous</a>";
}else{
$paginate.= "<span class='disabled'>previous</span>"; }
// Pages
if ($lastpage < 7 + ($stages * 2)) // Not enough pages to breaking it up
{
for ($counter = 1; $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
}
elseif($lastpage > 5 + ($stages * 2)) // Enough pages to hide a few?
{
// Beginning only hide later pages
if($page < 1 + ($stages * 2))
{
for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
}
// Middle hide some front and some back
elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
{
$paginate.= "<a href='$targetpage?page=1'>1</a>";
$paginate.= "<a href='$targetpage?page=2'>2</a>";
$paginate.= "...";
for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
$paginate.= "...";
$paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
$paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";
}
// End only hide early pages
else
{
$paginate.= "<a href='$targetpage?page=1'>1</a>";
$paginate.= "<a href='$targetpage?page=2'>2</a>";
$paginate.= "...";
for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
{
if ($counter == $page){
$paginate.= "<span class='current'>$counter</span>";
}else{
$paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}
}
}
}
// Next
if ($page < $counter - 1){
$paginate.= "<a href='$targetpage?page=$next'>next</a>";
}else{
$paginate.= "<span class='disabled'>next</span>";
}
$paginate.= "</div>";
}
?>
<?php while($row = mysql_fetch_array($result)){?>
<div class="row-fluid">
<article class="span4 mid">
<div class="img">
<img src="images/<?php echo $row['image_link']; ?>" alt="post4" />
<div class="overlay"></div>
</div>
<div class="info">
<p class="tags">
<?php echo $row['event_type']; ?>
<?php echo $row['location']; ?>
</p>
<h1><?php echo $row['event_title']; ?></h1>
<p class="details"> <?php echo $row['date']; ?> | <?php echo $row['posted_by']; ?></p>
<p class="text">
<?php echo $row['event_details_short']; ?>
</p>
</div>
</article>
<article class="span4 mid">
<div class="img">
<img src="images/<?php echo $row['image_link']; ?>" alt="post4" />
<div class="overlay"></div>
</div>
<div class="info">
<p class="tags">
<?php echo $row['event_type']; ?>
<?php echo $row['location']; ?>
</p>
<h1><?php echo $row['event_title']; ?></h1>
<p class="details"> <?php echo $row['date']; ?> | <?php echo $row['posted_by']; ?></p>
<p class="text">
<?php echo $row['event_details_short']; ?>
</p>
</div>
</article>
<article class="span4 mid">
<div class="img">
<img src="images/<?php echo $row['image_link']; ?>" alt="post4" />
<div class="overlay"></div>
</div>
<div class="info">
<p class="tags">
<?php echo $row['event_type']; ?>
<?php echo $row['location']; ?>
</p>
<h1><?php echo $row['event_title']; ?></h1>
<p class="details"> <?php echo $row['date']; ?> | <?php echo $row['posted_by']; ?></p>
<p class="text">
<?php echo $row['event_details_short']; ?>
</p>
</div>
</article>
</div>
<?php } ?>

Answer 1

The issue is that, in turn, you need to fill one event column with the current event from the database. So you need a 'selector for the next row to fill in the next event column.
You have a choice of filling each column in turn, Which is slightly more complex. Or filling the columns horizontally. Which this code attempts to do.
This is all untested code but hopefully shows the logic needed.
<?php $columnSelector = 0; // define a column selector ?>
<?php while($row = mysql_fetch_array($result)) :?>
<?php if ($columnSelector == 0): ?>
<div class="row-fluid">
<article class="span4 mid">
<div class="img">
<img src="images/<?php echo $row['image_link']; ?>" alt="post4" />
<div class="overlay"></div>
</div>
<div class="info">
<p class="tags">
<?php echo $row['event_type']; ?>
<?php echo $row['location']; ?>
</p>
<h1><?php echo $row['event_title']; ?></h1>
<p class="details"> <?php echo $row['date']; ?> | <?php echo $row['posted_by']; ?></p>
<p class="text">
<?php echo $row['event_details_short']; ?>
</p>
</div>
</article>
<?php elseif ($columnSelector == 1): ?>
<article class="span4 mid">
<div class="img">
<img src="images/<?php echo $row['image_link']; ?>" alt="post4" />
<div class="overlay"></div>
</div>
<div class="info">
<p class="tags">
<?php echo $row['event_type']; ?>
<?php echo $row['location']; ?>
</p>
<h1><?php echo $row['event_title']; ?></h1>
<p class="details"> <?php echo $row['date']; ?> | <?php echo $row['posted_by']; ?></p>
<p class="text">
<?php echo $row['event_details_short']; ?>
</p>
</div>
</article>
<?php elseif ($columnSelector == 2): ?>
<article class="span4 mid">
<div class="img">
<img src="images/<?php echo $row['image_link']; ?>" alt="post4" />
<div class="overlay"></div>
</div>
<div class="info">
<p class="tags">
<?php echo $row['event_type']; ?>
<?php echo $row['location']; ?>
</p>
<h1><?php echo $row['event_title']; ?></h1>
<p class="details"> <?php echo $row['date']; ?> | <?php echo $row['posted_by']; ?></p>
<p class="text">
<?php echo $row['event_details_short']; ?>
</p>
</div>
</article>
<?php endif; ?>
</div>
<?php $columnSelector++; // advance to the next row?>
<?php $columnSelector %= 3; // reset to zero every third event?>
<?php endwhile; ?>