Displaying an image in table

[AShain]

I am trying to create a table using PHP that will list products.

Item - Title - Price - Pic

It should be using a radio button, with a submit at the bottom.

The problems are... table not displaying properly, ie.. no pic
is shown. Radio button is missing.

Could you help me find the issue... here's a snippet of my script.

$query = "SELECT * FROM akileine_exfoliating ORDER BY product_number";
$result = mysql_query($query)
  or die ("Couldn't execute query.");

echo "<div style='margin-left: .lin'>
<h1 align='center'>Akileine Exfoliating Creams</h1>\n";

echo "<form action='showitem.php' method='post'>\n";
echo "<table cellpadding='5' border='1'>";
$counter=1;
while ($row = mysql_fetch_array($result))
{
  extract($row);
  echo "<tr><td valign='top' width='15%'<\n";
  echo "<input type='radio' name='interest'
       value='$product_number'\n";
  if ( $counter == 1 )
  {
       echo "checked";
  }
  echo "><font size='+1'><b>$product_number</b></font>
       </td>
	   <td>$product_title
	   <td>$product_desc</td>
	   <td>$product_price</td>
	   <td>$product_image</td>
	   </tr>";
	$counter++;
   }
   echo "</table>";
   echo "<p><input type='submit' value='Select Product'>
       </form>\n";
?>

Thanks SO MUCH for the help!!
Allie

[_off_axis_]

you have an arrow backwards

echo "<tr><td valign='top' width='15%'<\n"; 

change that line to

echo "<tr><td valign='top' width='15%'>\n"; 

[AShain]

ha! Wouldn't ya know, a simple arrow. Thanks, that fixed the radio button. I still don't have an image displayed, any ideas why that's an issue. I am thinking because the images are too large, that they need to be made into thumbnails? no?

Thanks for the help!
Allie

[_off_axis_]

what do you see in the place where the image should be? I don't see where you have the image tags unless you include those in the database and print out the entire <img src.... code using the product_image variable. the images would still show up no matter what size they are, so I don't think that the image size is the problem

[AShain]

Well,... I've made a change to the script. I was seeing nothing at first, now I see a red "x" indicating it's trying to pull the image, so I think that I am getting closer.

Is it possible, since the images are large (for when the item is selected and directed to a showitem.php page) that they are too big to fall within the table?

Here's my table:

CREATE TABLE akileine_exfoliating (

 id         INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
 product_number TEXT,
 product_title	TEXT,
 product_desc   	TEXT,
 item_price    	FLOAT(8,2),
 item_image   	VARCHAR(50),
 FULLTEXT KEY item_title(product_title)

)TYPE=MyISAM;

Here's my snippet:

$query = "SELECT * FROM akileine_exfoliating ORDER BY product_number";
$result = mysql_query($query)
  or die ("Couldn't execute query.");

echo "<div style='margin-left: .lin'>
<h1 align='center'>Akileine Exfoliating Creams</h1>\n";

echo "<form action='showitem.php' method='post'>\n";
echo "<table cellpadding='5' border='1'>";
$counter=1;
while ($row = mysql_fetch_array($result))
{
  extract($row);
  echo "<tr><td valign='top' width='15%'>\n";
  echo "<input type='radio' name='interest'
       value='$product_number'\n";
  if ( $counter == 1 )
  {
       echo "checked";
  }
  echo "><font size='+1'><b>$product_number</b></font>
       </td>
	   <td>$product_title
	   <td>$product_desc</td>
	   <td>$product_price</td>
	   <td><img src=\"images/$product_image\"></td>
	   </tr>";
	$counter++;
   }
   echo "</table>";
   echo "<p><input type='submit' value='Select Product'>
       </form>\n";

[_off_axis_]

you have to put a slash before the directory name, example: /images/$product_image

change the image code to this

<img src="/images/$product_image">

[AShain]

When I change the source as you shown, the command turns black, telling me it's not right. I use Dreamweaver as my PHP editor. I tried this:

<td><img src=\"/images/$product_image\">

but I still get a red "x" 🙁 PHP doesn't like me, ha.

Tell me, does the image have to be the size of a thumbnail?

Thanks for all your help!!
Allie

[_off_axis_]

use this

<td><img src='/images/$product_image'>

no, the images can be any size, i am doing the same thing on my website and my photos are really big

[AShain]

Still not working 🙁

Here's what I am getting, if that helps:

[_off_axis_]

ok i think i found the problem, you are putting product_image as the variable, but in the database you have it as item_image. try changing the variable to item_image

[AShain]

HAHAHAHAHHAHAHA!!!!!

That's so funny, lol... ok, it's fixed, but the pictures are MASSIVE just as I thought <dying here> hahahahaha! I just changed the tables.

What's the best way to fix the picture issue? I know it can be reduced into a thumbnail, eh?

You are so kind, thanks for your patience 🙂
Allie

[AShain]

Now that I have calmed down, lol... for a good laugh click the link in my above post.

What I want is a smaller image thumbnail size... when the radio is selected, I want the following "showitem" page to work. It won't work as it is currently written, because it used to pull up based on the categories being clicked.

Here's my showitem snippet:

$get_item = "select c.cat_title, si.item_title, si.item_price,
si.item_desc, si.item_image from store_items as si left join
store_categories as c on c.id = si.cat_id where si.id = $_GET[item_id]";

$get_item_res = mysql_query($get_item) or die (mysql_error());

if (mysql_num_rows($get_item_res) < 1) {
     //invalid item
	 $display_block .= "<P><em>Invalid item selection.</em></p>";
} else {
    //valid item, get info 
$cat_title = strtoupper(stripslashes( 
     mysql_result($get_item_res,0,'cat_title'))); 
$item_title = stripslashes(mysql_result($get_item_res,0,'item_title')); 
$item_price = mysql_result($get_item_res,0,'item_price'); 
$item_desc = stripslashes(mysql_result($get_item_res,0,'item_desc')); 
$item_image = mysql_result($get_item_res,0,'item_image'); 

//make breadcrumb trail 
$display_block .= "<P><font color=#808080 face=Arial, Helvetica, sans-serif size=2><strong><em>You are viewing:</em><br> 
<a href=\"seestore.php?cat_id=$cat_id\">$cat_title</a> 
&gt; $item_title</strong></p> 

<table cellpadding=3 cellspacing=3> 
<tr> 
<td valign=middle align=center><img src=\"images/$item_image\">
</td> 
<td valign=middle><P><strong><font color=#808080 face=Arial, Helvetica, 
sans-serif>Description:</strong><br>$item_desc</p> 
<P><strong>Price:</strong> \$$item_price</p>
<form method=post action=\"addtocart.php\">"; 

$display_block .= " 
<P><strong>Select Quantity:</strong>
<select name=\"sel_item_qty\">";

for($i=1; $i<21; $i++) {
    $display_block .= "<option value=\"$i\">$i</option>";
}

$display_block .= "
</select>
<input type=\"hidden\" name=\"sel_item_id\" value=\"$_GET[item_id]\">
<P><input type=\"submit\" name=\"submit\" value=\"Add to Cart\"></p>
</form>
 </td>
</tr>
</table>";

[_off_axis_]

i made some additions to your snippet, just replace that part with this

function imageSize($width, $height, $percent) {
if(($percent > $width) && ($percent > $height)){
}else{
if($width > $height){
$ratio = $percent / $width;
}elseif($height > $width){
$ratio = $percent / $height;
}elseif($width == $height){
$ratio = $percent / $width;
}
$new_width = $width * $ratio;
$new_height = $height * $ratio;
return "width=\"$new_width\" height=\"$new_height\"";
}
}
while ($row = mysql_fetch_array($result)) 
{ 
  extract($row); 
  echo "<tr><td valign='top' width='15%'>\n"; 
  echo "<input type='radio' name='interest' 
       value='$product_number'\n"; 
  if ( $counter == 1 ) 
  { 
       echo "checked"; 
  } 

$image_url = "http://www.ppshealthcare.com/images/$item_image";
$picture = getimagesize("$image_url");
$picture_size = imageSize($picture[0], $picture[1], 300);

  echo "><font size='+1'><b>$product_number</b></font> 
       </td> 
       <td>$product_title 
       <td>$product_desc</td> 
       <td>$product_price</td> 
       <td><img src=\"images/$product_image\" $picture_size></td> 
       </tr>"; 
    $counter++; 
   } 

to change the size you want the pictures to be, change the 300 in this part of the code

$picture = getimagesize("$image_url");
$picture_size = imageSize($picture[0], $picture[1], 300);

hope that helps

[_off_axis_]

try putting single quotes around the part that says

where si.id = $_GET[item_id]

|
V

where si.id='$_GET[item_id]'

[AShain]

I'm sure it will help, but I am lost as to where you want me to "start" your snippet.

After this:

$query = "SELECT * FROM akileine_exfoliating ORDER BY product_number"; 
$result = mysql_query($query) 
  or die ("Couldn't execute query."); 

echo "<div style='margin-left: .lin'> 
<h1 align='center'>Akileine Exfoliating Creams</h1>\n"; 

echo "<form action='showitem.php' method='post'>\n"; 
echo "<table cellpadding='5' border='1'>"; 
$counter=1; 

and before this:

while ($row = mysql_fetch_array($result)) 
{ 
  extract($row); 
  echo "<tr><td valign='top' width='15%'<\n"; 
  echo "<input type='radio' name='interest' 
       value='$product_number'\n"; 
  if ( $counter == 1 ) 
  { 
       echo "checked"; 
  } 
  echo "><font size='+1'><b>$product_number</b></font> 
       </td> 
       <td>$product_title 
       <td>$product_desc</td> 
       <td>$product_price</td> 
       <td>$product_image</td> 
       </tr>"; 
    $counter++; 
   } 
   echo "</table>"; 
   echo "<p><input type='submit' value='Select Product'> 
       </form>\n"; 

?? is that right??

[_off_axis_]

sorry, replace your WHOLE snippet that you posted before with this

$query = "SELECT * FROM akileine_exfoliating ORDER BY product_number"; 
$result = mysql_query($query) 
  or die ("Couldn't execute query."); 

echo "<div style='margin-left: .lin'> 
<h1 align='center'>Akileine Exfoliating Creams</h1>\n"; 

echo "<form action='showitem.php' method='post'>\n"; 
echo "<table cellpadding='5' border='1'>"; 
$counter=1; 
function imageSize($width, $height, $percent) { 
if(($percent > $width) && ($percent > $height)){ 
}else{ 
if($width > $height){ 
$ratio = $percent / $width; 
}elseif($height > $width){ 
$ratio = $percent / $height; 
}elseif($width == $height){ 
$ratio = $percent / $width; 
} 
$new_width = $width * $ratio; 
$new_height = $height * $ratio; 
return "width=\"$new_width\" height=\"$new_height\""; 
} 
} 
while ($row = mysql_fetch_array($result))  

{  

  extract($row);  

  echo "<tr><td valign='top' width='15%'>\n";  

  echo "<input type='radio' name='interest' 
       value='$product_number'\n";  

  if ( $counter == 1 )  

  {  

       echo "checked";  

  }  

$image_url = "http://www.ppshealthcare.com/images/$item_image"; 
$picture = getimagesize("$image_url"); 
$picture_size = imageSize($picture[0], $picture[1], 300); 

  echo "><font size='+1'><b>$product_number</b></font> 
       </td> 
       <td>$product_title  

       <td>$product_desc</td> 
       <td>$product_price</td> 
       <td><img src='/images/$item_image' $picture_size></td> 
       </tr>";  

    $counter++;  

   } 
   echo "</table>"; 
   echo "<p><input type='submit' value='Select Product'> 
       </form>\n";

[AShain]

I did as you asked, and lost my pictures again 🙁

Do PHP programmers usually drink? hahahahaha, it's 1:04 in the afternoon here and booze is sounding good about now, ha!

Allie

[_off_axis_]

ok try this

$query = "SELECT * FROM akileine_exfoliating ORDER BY product_number";  

$result = mysql_query($query)  

  or die ("Couldn't execute query.");  

echo "<div style='margin-left: .lin'> 
<h1 align='center'>Akileine Exfoliating Creams</h1>\n";  

echo "<form action='showitem.php' method='post'>\n";  

echo "<table cellpadding='5' border='1'>";  

$counter=1;  

function imageSize($width, $height, $percent) {  

if(($percent > $width) && ($percent > $height)){  

}else{  

if($width > $height){  

$ratio = $percent / $width;  

}elseif($height > $width){  

$ratio = $percent / $height;  

}elseif($width == $height){  

$ratio = $percent / $width;  

}  

$new_width = $width * $ratio;  

$new_height = $height * $ratio;  

return "width=\"$new_width\" height=\"$new_height\"";  

}  

}  

while ($row = mysql_fetch_array($result))   

{    

$image_url = "http://www.ppshealthcare.com/images/$row[item_image]";  

$picture = getimagesize("$image_url");  

$picture_size = imageSize($picture[0], $picture[1], 150);  

  echo "<tr><td valign='top' width='15%'>\n";   

  echo "<input type='radio' name='interest' 
       value='$row[product_number]'\n";   

  if ( $counter == 1 )   

  {   

       echo "checked";   

  }   

  echo "><font size='+1'><b>$row[product_number]</b></font> 
       </td> 
       <td>$row[product_title]</td>
       <td>$row[product_desc]</td> 
       <td>$row[product_price]</td> 
       <td><img src=\"/images/$row[item_image]\" $picture_size></td> 
       </tr>";   

    $counter++;   

   }  

   echo "</table>";  

   echo "<p><input type='submit' value='Select Product'> 
       </form>\n";

[AShain]

It's still not working. I am thinking it has something to do with this part of the script:

function imageSize($width, $height, $percent) {   

if(($percent > $width) && ($percent > $height)){   

}else{   

if($width > $height){   

$ratio = $percent / $width;   

}elseif($height > $width){   

$ratio = $percent / $height;   

}elseif($width == $height){   

$ratio = $percent / $width;   

}   

$new_width = $width * $ratio;   

$new_height = $height * $ratio;  

The ='s signs and the slashes are blue, but the command words are black and are usually red.

The words in this line is black too:

$picture_size = imageSize($picture[0], $picture[1], 150);

Ready to pull your hair out yet?

[AShain]

OK, this snippet works:

$query = "SELECT * FROM akileine_exfoliating ORDER BY product_number";   

$result = mysql_query($query)   

  or die ("Couldn't execute query.");   

echo "<div style='margin-left: .lin'> 
<h1 align='center'>Akileine Exfoliating Creams</h1>\n";   

echo "<form action='showitem.php' method='post'>\n";   

echo "<table cellpadding='5' border='1'>";   

$counter=1;   

function imageSize($width, $height, $percent) {   

if(($percent > $width) && ($percent > $height)){   

}else{   

if($width > $height){   

$ratio = $percent / $width;   

}elseif($height > $width){   

$ratio = $percent / $height;   

}elseif($width == $height){   

$ratio = $percent / $width;   

}   

$new_width = $width * $ratio;   

$new_height = $height * $ratio;   

return "width=\"$new_width\" height=\"$new_height\"";   

}   

}   

while ($row = mysql_fetch_array($result))    

{     

$image_url = "http://www.ppshealthcare.com/images/$row[item_image]";   

$picture = getimagesize("$image_url");   

$picture_size = imageSize($picture[0], $picture[1], 150);   

  echo "<tr><td valign='top' width='15%'>\n";    

  echo "<input type='radio' name='interest' 
       value='$row[product_number]'\n";    

  if ( $counter == 1 )    

  {    

       echo "checked";    

  }    

  echo "><font size='+1'><b>$row[product_number]</b></font> 
       </td> 
       <td>$row[product_title]</td> 
       <td>$row[product_desc]</td> 
       <td>$row[product_price]</td> 
       <td><img src=\"/images/$row[product_image]\" $picture_size></td> 
       </tr>";    

    $counter++;    

   }   

   echo "</table>";   

   echo "<p><input type='submit' value='Select Product'> 
       </form>\n";

The only thing is, the pictures are still huge.

Allie