Page 1 of 1

display photos from php query in html table

Posted: Thu Aug 30, 2007 12:57 pm
by mike555
I have made a PHP script which queries a MySQL database.

The result of the query is any number (usually between 1 and 20 depending on search criteria) of small photos each displayed in its own cell of a html table.

The following piece of code constructs the table:

Code: Select all

// check if records were returned
if (mysql_num_rows($result) > 0)
	{
	// print HTML table
	echo '<table cellpadding=10 cellspacing=0 border=1>';
	echo '<tr>';
		// iterate over record set
		// print each field
		while($row = mysql_fetch_row($result))
		{
		echo '<td><IMG SRC="images/DSCN' .$row[0]. '.jpg" WIDTH=113 HEIGHT=150 VSPACE=0 ALT="your photo"></td>';
		}
	echo '</tr>';
	echo '</table>';
	}
This works fine and displays the photos in a continuous horizontal display by repeating the <td> </td> tags.

What I want it to do is display the photos in a table 3 cells wide by however many rows req'd.

I have been experimenting with different 'loops' but there is already a 'while' loop running with the 'while($row = mysql_fetch_row($result))'
command.

If someone could point me in the right direction to solve this it would be very much appreciated!

Thanks

M

Posted: Thu Aug 30, 2007 1:08 pm
by John Cartwright
By far the easiest way I've found to do this is to use floating div's.

Code: Select all

if (mysql_num_rows($result) > 0)
{
   while($row = mysql_fetch_row($result))
   {
      echo '<div style="float: left; width: 33%;"><IMG SRC="images/DSCN' .$row[0]. '.jpg" WIDTH=113 HEIGHT=150 VSPACE=0 ALT="your photo"></div>';
   }
}
Otherwise, you can look at the first two listings of our Useful Posts thread

Posted: Thu Aug 30, 2007 4:48 pm
by mike555
Great stuff! I'm sure the answer will be in there somewhere!

I'll have a play around and report back how I solve this ( assuming I do!)

Posted: Thu Aug 30, 2007 8:07 pm
by califdon
In itself, I don't think the float:left will achieve his desired 3 across objective, but I'm all in favor of using CSS Divs to replace HTML tables, wherever possible. I still get hung up sometimes, though, with how floats and clears really interact.

If he wants to continue using an HTML table, he should be able to set a counter to "3" and decrement it each time it loops, and when it is zero, add a </TR><TR> in his HTML and reset the counter to "3" again, though.

Posted: Sat Sep 01, 2007 2:42 am
by mike555
Firstly, thanks so much for helping me solve this. I had been trawling for ages through manuals and tutorials but was unable to find the answer. Within hours of joining this forum and posting a message the problem has now been sorted.

I did say that I would report back - just in case anyone else can benefit from it.

To have full control over the display I particularly needed a html table. There was a very similar problem addressed in the useful posts link that Jcart suggested: viewtopic.php?t=29816

I adapted this to use in my script which now displays the desired table containing photos 3 across and as many rows as it needs to display the number of photos recalled from the database search.

The complete script is as follows:

Code: Select all

<?php

// retrieve form data in a variable
	$input = $_POST['number'];

// print it
	echo "Race no: <i>$input</i>";

// open connection to MySQL server
	$connection = mysql_connect('localhost', 'admin', 'W3BMSs28')
	or die ('Unable to connect!');

// select database for use
	mysql_select_db('races2') or die ('Unable to select database!');
	$query = "SELECT photoID FROM pics WHERE comp1= {$_POST[number]} or comp2= {$_POST[number]} or comp3= {$_POST[number]} ";
	$result = mysql_query($query)
	or die ('Error in query: $query. ' . mysql_error());

// check if records were returned
	if (mysql_num_rows($result) > 0)
		{
		// print HTML table
		echo '<table width=200 cellpadding=10 cellspacing=0 border=1>';
				$rowmax = 3;
				for($x = 0; $row = mysql_fetch_row($result); $x++)
				{
				if($x % $rowmax == 0)
		echo '<tr>';
			echo '<td><IMG SRC="images/DSCN' .$row[0]. '.jpg" WIDTH=113 HEIGHT=150 VSPACE=0 ALT="yourraceday.co.uk"></td>';
			if($x % $rowmax == $rowmax - 1)
			echo '</tr>';
			}

		if($left = (($howmany + $rowmax - 1) % $rowmax))
		echo '<td colspan="' . $left . '">&nbsp' . ";</td>\n</tr>\n\n";


		echo '</table>';
		}
	else
	{

// print error message
	echo 'No rows found!';
	}

// once processing is complete
// free result set
mysql_free_result($result);

// close connection to MySQL server
mysql_close($connection);
?>
I hope this may be helpful and thanks again guys!