loop images in a table 5 columns by X rows

[jarvis]

Hi all,

 

I've the following code which shows a form. The form loops through 10 input fields. Pulling info from the db it will show say 5 images if only 5 have been uploaded and another 5 input fields making the 10 uploads.

 

// Create the inputs.
	for ($i = 0; $i < MAX_IMAGE_UPLOADS; $i++)
	{

		$image_row = mysql_fetch_row($uploaded_image_details_rs);

		if(!empty($image_row[0]))
		{

			$this_image  = '<img src="categories/'.$_REQUEST['id'].'/'.$image_row[0].'" width="150" />'."\n\n";

			$this_image .= '<br />'."\n\n";

			$this_image .= ''."\n\n";


		} else {

			$this_image = 'No Image';

		}

		if(!empty($image_row[1]))
		{

			$this_image_description = $image_row[1];

		} else {

			$this_image_description = '';

		}


		echo '
		<form enctype="multipart/form-data" action="edit_category_image.php" method="post">		
		<table width="100%" border="0">
			<tr>
				<td valign="top"><p><b>
					File '.($i + 1).':</b><br />
					<input type="file" name="image" /><br />
					<div align="center">';
					if(!empty($image_row[0]))
						echo '<a href="./edit_category_image.php?id='.$_REQUEST['id'].'&del='.$image_row[2].'" onclick="return confirm(\'Do you really want to delete this image?\');">Delete Image and Description</a>
					</div>';
				echo'</p></td>
				<td valign="top"><p><b>
					Image Description '.($i + 1).':</b><br />
					<textarea name="image_description" cols="25" rows="3">'.$this_image_description.'</textarea>
					</p></td>
			</tr>
			<tr>
				<td width="150"><div align="center">
					Image '.($i + 1).':<br />'.$this_image.'
				</div></td>

				<td><div align="center">';
					if(!empty($image_row[0]))
						echo '<input type="submit" value="- Update -" />';
					else
						echo '<input type="submit" value="- Upload -" />';
		 echo '</div></td></tr>
		 </table>
		 <input type="hidden" name="submit_type" value="';

		 if(!empty($image_row[0]))
		 {
			echo 'update" />'."\n\n";

			echo '<input type="hidden" name="this_image_id" value="'.$image_row[2].'" />'."\n\n";


		 } else
			echo 'upload" />'."\n\n";

		 echo '
		 <input type="hidden" name="submitted" value="TRUE" />
		 <input type="hidden" name="id" value="' . $id . '" />
		 <input type="hidden" name="MAX_FILE_SIZE" value="104976">
		 </form>
		 <hr style="border:dotted black 1px;" />
		';

	}

At the mo, it shows the form in a list down the page. What I'd like to do is show the images in a table 5 columns by X rows. As the number of image fields could increase to say 15 it will be great if the loop takes care of it.

I've no idea where to start. Any help is much appreciated!

[syed]

The most quickest way to do this without any php coding, is to use css. Place all your images in a div with a fixed with such as 100x100px then float the div to the left. The image divs should appear in container with a set width such as 500px.

 

The logic is, after five divs are positioned next to each other, they would total up 500px, this will result in the next div being pushed to the next row automatically.

 

Example

 

<div style="width:500px;">

      <div style="width:100px; float:left;">Div1</div>

      <div style="width:100px; float:left;">Div2</div>

      <div style="width:100px; float:left;">Div3</div>

      <div style="width:100px; float:left;">Div4</div>

      <div style="width:100px; float:left;">Div5</div>

      <div style="width:100px; float:left;">Div6</div>

</div>

 

The first five divs will appear on the first row, div6 will appear on the next row.

 

Hope that helps

[jarvis]

Thanks syed, I'd rather code it as I can then get the output to work inline with the correct number of outputted files from the db. i.e. if it return10 images, I'd have 2 lines of 5.

 

If only 3 images were in the db, I'd have 1 row of 3 etc. Similarly, 50 images, 10 rows of 5!