Repeating tables

[Remote Control]

Hi All,

 

I am trying to create a image gallery based on a tutorial found on http://www.php-mysql-tutorial.com/image-gallery/ and I need to put image, title and desc in seperate rows so they are aligned and not wonky if one has more text than the other but can not seem to get it.

 

I have included the source code below and of course any help would be appreciated.

 

Thanks

 

Chris

---------------------------------------------------------------------------------

 

<?php

 

$albumId = $_GET['album'];

 

$query  = "SELECT im_id, im_title, im_thumbnail, im_description

          FROM tbl_image

  WHERE im_album_id = $albumId

  ORDER BY im_title";

$result = mysql_query($query) or die('Error, list image failed. ' . mysql_error());

if (mysql_num_rows($result) == 0) {

echo "No image in this album yet";

} else {

 

echo '<table width="700" border="0" cellspacing="1" cellpadding="2" align="center">';

 

// the image is listed in a table

// here we specify how many columns

// we want to show on each row

$colsPerRow = 4;

 

// width of each column in percent

$colWidth  = (int)(100/$colsPerRow);

$i = 0;

while ($row = mysql_fetch_assoc($result)) {

if ($i % $colsPerRow == 0) {

// start a new row

echo '<tr>';

}

 

echo '<td width="' . $colWidth . '%">' .

    '<a href="?page=image-detail&album=' . $albumId . '&image=' . $row['im_id'] . '">' .

    '<img src="viewImage.php?type=glthumbnail&name=' . $row['im_thumbnail'] . '" border="0">' .

'<br>' . $row['im_title'] . '</a></td>' .

'<br>' . $row['im_description'] . '</td>';

 

if ($i % $colsPerRow == $colsPerRow - 1) {

// start a new row

echo '</tr>';

}

 

$i += 1;

}

 

// print blank columns

if ($i % $colsPerRow != 0) {

while ($i++ % $colsPerRow != 0) {

echo '<td width="' . $colWidth . '%"> </td>';

}

echo '</tr>';

}

 

echo '</table>';

 

}

?>

 

 

[AndyB]

Looking at your code, it seems botched - consecutive td closing tags.

 

One solution to your html problem is to use td valign='top' for each cell so the ouput isn't 'wonky'

[Remote Control]

Ok, that was a typo on my behalf. I have removed the double closing td tag, any other suggestions would be great.

 

<?php

 

$albumId = $_GET['album'];

 

$query  = "SELECT im_id, im_title, im_thumbnail, im_description

          FROM tbl_image

        WHERE im_album_id = $albumId

        ORDER BY im_title";

$result = mysql_query($query) or die('Error, list image failed. ' . mysql_error());

if (mysql_num_rows($result) == 0) {

  echo "No image in this album yet";

} else {

 

  echo '<table width="700" border="0" cellspacing="1" cellpadding="2" align="center">';

 

  // the image is listed in a table

  // here we specify how many columns

  // we want to show on each row

  $colsPerRow = 4;

 

  // width of each column in percent

  $colWidth  = (int)(100/$colsPerRow);

  $i = 0;

  while ($row = mysql_fetch_assoc($result)) {

      if ($i % $colsPerRow == 0) {

        // start a new row

        echo '<tr>';

      }

 

      echo '<td width="' . $colWidth . '%">' .

          '<a href="?page=image-detail&album=' . $albumId . '&image=' . $row['im_id'] . '">' .

          '<img src="viewImage.php?type=glthumbnail&name=' . $row['im_thumbnail'] . '" border="0">' .

          '

' . $row['im_title'] . '</a>' .

          '

' . $row['im_description'] . '</td>';

 

      if ($i % $colsPerRow == $colsPerRow - 1) {

        // start a new row

        echo '</tr>';

      }     

     

      $i += 1;

  }

 

  // print blank columns

  if ($i % $colsPerRow != 0) {

      while ($i++ % $colsPerRow != 0) {

        echo '<td width="' . $colWidth . '%"> </td>';

      } 

      echo '</tr>';

  } 

 

  echo '</table>';

 

}

?>

 

[AndyB]

Any other suggestions?

 

Two.  Show us a URL where we can see 'wonky'. Did you try the td valign="top" to cure wonkiness?

[Remote Control]

Hi,

 

Thanks it has partly fixed it so at least the images are aligned at the top but I would really like to put each element into a table for a cleaner look, here is the URL;

 

http://www.hughesonline.com.au/image-gallery/index.php

 

The flooring section is populated with pics.

 

Let me know what you think of the wonkiness.....

 

Thanks

 

Chris

[nloding]

I'm still confused about what you're looking for.  Do you want the first line of each caption to line up (i.e., the bottom edge of each picture makes a straight line)?

 

If so, then you just need to put the text in it's own cell ... so row 1 is 4 pictures, row 2 is captions, row 3 is pictures, row 4 is captions ...

 

As for a nice, clean way to do that, I'll have to think on it.  I'm at work and can't write code at this moment.

[Remote Control]

Basically I'm trying to ensure that the pictures are inline, the picture name text is inline and the picture desc is inline. I need the script to echo a table with 1 column and 3 rows for each picture but at the moment it is only echoing a single column with the picture, name and description all together.

 

As you can imagine if 1 picture is landscape and the other are portrait then the name and desc are not in line, the below link has a good example of what I mean.

 

http://www.hughesonline.com.au/image-gallery/index.php?page=list-image&album=26