Image display on webpage

[kurt.santo]

I know how to display an image inline or as attachment, which I have previously uploaded into my uploads folder. But how do I display several images (thumbs/main images) relating to a certain user_id (images are associated with user_id in table, which is passed in querystring) on a webpage where it is only certain to have one image/thumb, but it also could be up to 8 thumbs being displayed (main just changes when thumbs are clicked)? I have never done such a thing and appreciate anyone pointing me in the right direction...Kurt

[justsomeguy]

Get all the filenames from the database and check to make sure they are non-empty before you print the HTML for the image.

[jeffman]

Errm, iterate through the array of image data and print your markup when an image exists, and then stop when they don't? Is that too easy? Am I missing something?

[kurt.santo]

Get all the filenames from the database and check to make sure they are non-empty before you print the HTML for the image.

Do I get this right:1. I have column user_id in my uploads table to associate each file with relevant user2. On webpage I pass a the user_id in querystring, which I store in variable $user_id3. Then I run a query as: SELECT image_name FROM uploads WHERE user_id='$user_id"; (this returns all images associated with user_id)Then my real problem starts. The normal html with template pictures is:

<div><img src="main/4.jpg" alt="Feature Photo" width="267" height="400" name="rollimg" id="rollimg" /></div><div<span onmouseover="document.getElementById('rollimg').src=image0.src;"><img src="/thumbnail/1.jpg" width="60" height="90" alt="Thumbnail 1" /></span><span onmouseover="document.getElementById('rollimg').src=image1.src;"><img src="/thumbnail/2.jpg" width="60" height="90" alt="Thumbnail 2" /></span>etc up to 8</div>

As you can see I need to get the thumbs and main images. Now, getting the image data from the database I need to generate thumbs and main pictures just from one image. Therefore, I need to get the size and adjust for thumbs and main pictures. I also do not want the main image to exceed 400px and the thumbs to exceed 90px in height.My main issues:How to check for non-empty as I do not know how many pictures are uploaded per user_id? How to get the image height and width and maybe adust (keeping height under limit)? All pictures are now in uploads folder. What would be the best way to do just that? Are there any examples? I have never done such a thing and am really helpless here...Kurt

[jeffman]

I don't have a good sense of how all this looks, but on a few of your questions.Are you using mysql? If so, mysql_fetch_array() should get your image names in shape for php routines.Assuming you have access to the gd/image functions, this page will open up a fine world of madness

[justsomeguy]

If you're going to be resizing images, you will want to do that once, when the picture gets uploaded, and then just link to the resized image. So resizing should be done on upload, not when you're displaying things. You'll also want to create the thumbnail when they upload the image. You can use this function to create a thumbnail or resize:http://www.php.net/manual/en/function.imagecopyresampled.phpThere are some examples on that page of doing that type of thing, in the user comments also.

[kurt.santo]

I don't have a good sense of how all this looks, but on a few of your questions.Are you using mysql? If so, mysql_fetch_array() should get your image names in shape for php routines.Assuming you have access to the gd/image functions, this page will open up a fine world of madness

Deirdre's Dad,I would like to read the info from your and justsomeguy's link. YOur is not working somehow. Could you post again?Also, I know my questions must see a bit odd to someone who is doing the suff since a while. The stupidity of my questions comes from pure ignorance and i have no intention to fool you or so;-) Just want to learn all that stuff:-)Kurt

[Synook]

DD's link should look like http://static.php.net/manual/en/ref.image.php

[kurt.santo]

DD's link should look like http://static.php.net/manual/en/ref.image.php

Thank you:-)Kurt

[jeffman]

And here I thought I was being all cool sending you the UK link. Then again, Kurt's not exactly British. I am SO internationally challenged. My kid just asked me why the US isn't on the metric system, and about the best I could come up with is that we're a dull, lazy world empire on the verge of collapse.

[kurt.santo]

And here I thought I was being all cool sending you the UK link. Then again, Kurt's not exactly British. I am SO internationally challenged. My kid just asked me why the US isn't on the metric system, and about the best I could come up with is that we're a dull, lazy world empire on the verge of collapse.

Do not beat you up. Better to be a member of the lazy world empire on the verge of collapse than being clueless in the UK;-)Looking up few things on the given website I got so many question were this one might really show how clueless I am. I thought the following code would round the corner of the images in the html section. As you can see I still do not know how to make the function refer to the images...

<?php/** ------------------------------------------------------------ * Copy and resample an image with rounded corners. * ----------------------------------------------------------- */function imageRoundedCopyResampled(&$dstimg, &$srcimg, $dstx, $dsty, $srcx,                                   $srcy, $dstw, $dsth, $srcw, $srch, $radius) {    # Resize the Source Image    $srcResized = imagecreatetruecolor($dstw, $dsth);    imagecopyresampled($srcResized, $srcimg, 0, 0, $srcx, $srcy,                       $dstw, $dsth, $srcw, $srch);    # Copy the Body without corners    imagecopy($dstimg, $srcResized, $dstx+$radius, $dsty,              $radius, 0, $dstw-($radius*2), $dsth);    imagecopy($dstimg, $srcResized, $dstx, $dsty+$radius,              0, $radius, $dstw, $dsth-($radius*2));    # Create a list of iterations; array(array(X1, X2, CenterX, CenterY), ...)    # Iterations in order are: Top-Left, Top-Right, Bottom-Left, Bottom-Right    $iterations = array(        array(0, 0, $radius, $radius),        array($dstw-$radius, 0, $dstw-$radius, $radius),        array(0, $dsth-$radius, $radius, $dsth-$radius),        array($dstw-$radius, $dsth-$radius, $dstw-$radius, $dsth-$radius)    );    # Loop through each corner 'iteration'    foreach($iterations as $iteration) {        list($x1,$y1,$cx,$cy) = $iteration;        for ($y=$y1; $y<=$y1+$radius; $y++) {            for ($x=$x1; $x<=$x1+$radius; $x++) {                # If length (X,Y)->(CX,CY) is less then radius draw the point                $length = sqrt(pow(($cx - $x), 2) + pow(($cy - $y), 2));                if ($length < $radius) {                    imagecopy($dstimg, $srcResized, $x+$dstx, $y+$dsty,                              $x, $y, 1, 1);                }            }        }    }}?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title></head><body><img src="a.jpg" width="854" height="653" /><img src="b.jpg" width="653" height="854" /></body></html>

Any mercy for someone who might not be clever, but tries hard;-)Kurt

[jeffman]

Oh, I'm not down on me. Had a snotty sense of humor as a kid, and I learned I make more friends if I poke fun at myself. Clueless in the UK. Like Paris Hilton touring with the S3x Pistols.That's a lot of very dense code involving geometry. Don't know if I can help you. I am curious to know why you're passing your function references to image resources. It's not like passing a pointer to an actual image, you're not saving any memory. But it might not hurt, either.I'm hardly a GD expert.So what exactly is happening with your function? Where does it break?Man, you give a kid a new hammer, next thing you know he's building rockets.

[kurt.santo]

Oh, I'm not down on me. Had a snotty sense of humor as a kid, and I learned I make more friends if I poke fun at myself. Clueless in the UK. Like Paris Hilton touring with the ###### Pistols.That's a lot of very dense code involving geometry. Don't know if I can help you. I am curious to know why you're passing your function references to image resources. It's not like passing a pointer to an actual image, you're not saving any memory. But it might not hurt, either.I'm hardly a GD expert.So what exactly is happening with your function? Where does it break?Man, you give a kid a new hammer, next thing you know he's building rockets.

It is not from me, I wish;-) Just found it and tried to use it somehow, but as you can see still not a clue in how to... Anyway, this one would be nice, but is not a must (do not need it right now). If anyone knows, please share your wisdom. If no one knows, maybe better. It might stop me from climbing the Mount Everest (and my boss killing me as I waste time I should use for my projects;-))...Kurt

[Wander]

working example of the function u said above:

header("Content-Type: image/png");		/** ------------------------------------------------------------* Copy and resample an image with rounded corners.* ----------------------------------------------------------- */function imageRoundedCopyResampled(&$dstimg,&$srcimg,$dstx,$dsty,$srcx,$srcy,$dstw,$dsth,$srcw,$srch,$radius){	# Resize the Source Image	$srcResized = imagecreatetruecolor($dstw,$dsth);	imagecopyresampled($srcResized,$srcimg,0,0,$srcx,$srcy,$dstw,$dsth,$srcw,$srch);	# Copy the Body without corners	imagecopy($dstimg,$srcResized,$dstx+$radius,$dsty,$radius,0,$dstw-($radius*2),$dsth);	imagecopy($dstimg,$srcResized,$dstx,$dsty+$radius,0,$radius,$dstw,$dsth-($radius*2));	# Create a list of iterations; array(array(X1, X2, CenterX, CenterY), ...)	# Iterations in order are: Top-Left, Top-Right, Bottom-Left, Bottom-Right	$iterations	= array(		array(0,0,$radius,$radius),		array($dstw-$radius,0,$dstw-$radius,$radius),		array(0,$dsth-$radius,$radius,$dsth-$radius),		array($dstw-$radius,$dsth-$radius,$dstw-$radius,$dsth-$radius)	);	# Loop through each corner 'iteration'	foreach($iterations as $iteration){		list($x1,$y1,$cx,$cy)	= $iteration;		for($y=$y1;$y<=$y1+$radius;$y++){			for($x=$x1;$x<=$x1+$radius;$x++){				# If length (X,Y)->(CX,CY) is less then radius draw the point				$length	= sqrt(pow(($cx-$x),2)+pow(($cy-$y),2));				if($length<$radius){					imagecopy($dstimg,$srcResized,$x+$dstx,$y+$dsty,$x,$y,1,1);				}			}		}	}}// Source image$source	= imagecreatefrompng('http://w3schools.invisionzone.com/style_images/6_logo.png');$x	= imagesx($source);$y	= imagesy($source);$destx	= $x*2;$desty	= $y*2;// Create image to paste the new rounded image in$destination	= imagecreate($destx,$desty);$radius	= 70;imageRoundedCopyResampled($destination,$source,0,0,0,0,$destx,$desty,$x,$y,$radius);// show new imageimagepng($destination);

[kurt.santo]

Thank you for the code. Do you know by any chance how to adjust so the the rounded pic sits on a white background as such? Like this is rounded, but it shows the picture in a blue rectangle...Kurt