techker Posted October 20, 2013 Share Posted October 20, 2013 hey guys for my site i have a script that resizes the image for the correct size of the site...but since i put this script the images and site is really slow to load..guessing cause of the resizing.. the reason why i put this is because if i only put width="" height="" in the img it would distort .. is there a way to put width="" height="" but without distorting the image and slowing down the load time? Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted October 20, 2013 Share Posted October 20, 2013 (edited) When add an image to page and resize it with the width and height attributes you're not modifying the image. The browser will download the whole original sized image and then scales the image to what ever you set the height and width to. If you dont keep the orginal aspect ratio, then the picture will distort. What you need to do is resize the image when you have uploaded it using the php gd image library. You will find many tutorials on resizing/modifying images with PHP gd Edited October 20, 2013 by Ch0cu3r Quote Link to comment Share on other sites More sharing options...
techker Posted October 20, 2013 Author Share Posted October 20, 2013 ok..i didnt know it downloaded the full image...that answers why the page takes time to load... i didnt like the thumbnail and big size uploader cause to delete the pic it was complicated.. needed to make like 3 scripts to redirect were the thumbnail is and unlink it the refresh to big folder and unlink.... Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted October 20, 2013 Share Posted October 20, 2013 (edited) ok..i didnt know it downloaded the full image...that answers why the page takes time to load...Any resource you link to within your page the browser will download it. i didnt like the thumbnail and big size uploader cause to delete the pic it was complicated.. needed to make like 3 scripts to redirect were the thumbnail is and unlink it the refresh to big folder and unlink.... Sounds over complicated the way you had it before. When the image is uploaded I'd save the original to site.com/images. Then I make a thumbnail of that image and save it to site.com/images/thumbnails. When displaying the thumbnail of the image I'd use <img src="site.com/images/thumbnails/image.jpg" />If I want to link to the full sized image I'd do <a href="site.com/images/image.jpg"><img src="site.com/images/thumbnails/image.jpg" /></a>If I need to delete the images with PHP then I'd use unlink function unlink("images/$image"); // delete orginal unlink("images/thumbnails/$image"); // delete thumbnail Edited October 20, 2013 by Ch0cu3r Quote Link to comment Share on other sites More sharing options...
techker Posted October 20, 2013 Author Share Posted October 20, 2013 huh..i didn't know i can put 2 unlink functions in one script..creat..lol thx for the help Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted October 20, 2013 Share Posted October 20, 2013 You can call as many functions as you like. PHP does not impose any limits. Quote Link to comment Share on other sites More sharing options...
techker Posted October 22, 2013 Author Share Posted October 22, 2013 think you can help me with my uploader??works good uploads all 4 images and reseizes them,. but it insterts wrong in database??? i get :(capture attached..) code $conn = mysql_connect($db_host,$db_username,$db_password); mysql_select_db($databse_name,$conn); $sql="SELECT * FROM new";$result=mysql_query($sql);$data=mysql_fetch_array($result);$gebruiker=$_SESSION['username'];if(!isset($_GET['x'])){ $aantal=4;}else{ $aantal= $_GET['x'];}?><html><head> </head><body><h3> </h3> <fieldset class="dashboard"><legend class="dashboard">Beheer</legend><?phpif (isset($_REQUEST['submit'])) { $name = $_POST["name"]; $description = $_POST["description"]; $Main = $_POST["Main"]; $fieldname = 'imgfile'; $active_keys = array(); foreach($_FILES[$fieldname]['name'] as $key => $filename) { if(!empty($filename)) { $active_keys[] = $key; } } foreach($active_keys as $key) { $path_thumbs = "upload/thumbs"; $path_big = "upload/images"; //the new width of the resized image. $img_thumb_width = 150; // in pixel //Do you want to limit the extensions of files uploaded (yes/no) $extlimit = "no"; //allowed Extensions $limitedext = array(".gif",".jpg",".png",".jpeg",".bmp"); $file_type = $_FILES['imgfile']['type'][$key]; $file_name = $_FILES['imgfile']['name'][$key]; $file_size = $_FILES['imgfile']['size'][$key]; $file_tmp = $_FILES['imgfile']['tmp_name'][$key]; //check file extension $ext = strrchr($file_name,'.'); $ext = strtolower($ext); if (($extlimit == "yes") && (!in_array($ext,$limitedext))) { echo "Verkeerde extensie. <br>--<a href=\"$_SERVER[php_SELF]\">back</a>"; exit(); } //get the file extension. $file_ext = end(explode(".", $file_name)); //create a random file name $rand_name = md5(time()); $rand_name= rand(0,999999999); //get the new width variable. $ThumbWidth = $img_thumb_width; //keep image type if($file_size){ if($file_type == "image/pjpeg" || $file_type == "image/jpeg"){ $new_img = imagecreatefromjpeg($file_tmp); }elseif($file_type == "image/x-png" || $file_type == "image/png"){ $new_img = imagecreatefrompng($file_tmp); }elseif($file_type == "image/gif"){ $new_img = imagecreatefromgif($file_tmp); } //list width and height and keep height ratio. list($width, $height) = getimagesize($file_tmp); $imgratio=$width/$height; if ($imgratio>1){ $newwidth = $ThumbWidth; $newheight = $ThumbWidth/$imgratio; }else{ $newheight = $ThumbWidth; $newwidth = $ThumbWidth*$imgratio; } //function for resize image. if (function_exists(imagecreatetruecolor)){ $resized_img = imagecreatetruecolor($newwidth,$newheight); }else{ die("Error: Please make sure you have GD library ver 2+"); } imagecopyresized($resized_img, $new_img, 0, 0, 0, 0, $newwidth, $newheight, $width, $height); //save image ImageJpeg ($resized_img,"$path_thumbs/$rand_name.$file_ext"); ImageDestroy ($resized_img); ImageDestroy ($new_img); move_uploaded_file ($file_tmp, "$path_big/$rand_name.$file_ext"); foreach($active_keys as $key) { mysql_query("INSERT INTO new (Main_Image,Image_2,Image_3,Image_4,Image_5) VALUES ('$Main','$rand_name.$file_ext','$rand_name.$file_ext','$rand_name.$file_ext','$rand_name.$file_ext')"); } } } // $sql = "INSERT INTO new (Main,description,video) VALUES ('$name','$description','$video')"; if( ($result = mysql_query($sql)) ) { echo '<p><img src="images/icons/accept.gif" alt"" /> uploaded!</p>'; $page = "index.php?page=portfolio"; $sec = "1"; //header("Refresh: $sec; url=$page"); } else { echo "ERROR: ".mysql_error(); } } else { ?> <div id="container"> <form action="" enctype="multipart/form-data" method="post" class="niceform" name="UD"><dl> <dd> <?php for($i=0; $i < $aantal; $i++) { ?> </dd> </dl><dl> <dt><label for="imgfile">Kies foto:</label></dt> <dd><input name="imgfile[]" id="imgfile[]" type="file" /> <input type="checkbox" name="Main" id="Main"> <label for="Main"></label></dd> </dl> <?php } ?><dd><input type="submit" name="submit" id="submit" value="Insert" /></dd> </form></div></fieldset> <?php}?> Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted October 22, 2013 Share Posted October 22, 2013 but it insterts wrong in database??? Its doing exactly what you are telling it to do. You are inserting 4 duplicate entries, for Image_2,Image_3,Image_4, and Image_5 mysql_query("INSERT INTO new (Main_Image,Image_2,Image_3,Image_4,Image_5) VALUES ('$Main','$rand_name.$file_ext','$rand_name.$file_ext','$rand_name.$file_ext','$rand_name.$file_ext')"); What are tying do? What should the code do? Quote Link to comment Share on other sites More sharing options...
techker Posted October 22, 2013 Author Share Posted October 22, 2013 but the name of the image in image_2..3...4..5 and i cant seem to get if i check the check box to insert the name of the pic checked.. Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted October 22, 2013 Share Posted October 22, 2013 I dont understand that. Can you explain it more clearly. Quote Link to comment Share on other sites More sharing options...
techker Posted October 22, 2013 Author Share Posted October 22, 2013 i have to upload 4 diffrent image of the same car.out inside side rear... and i need to make one main image for main thumbnail on index page. so thats were im stuck..it uploads it inserts but not like i need it.. Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted October 22, 2013 Share Posted October 22, 2013 (edited) Try this code. <?php $conn = mysql_connect($db_host,$db_username,$db_password); mysql_select_db($databse_name,$conn); $sql="SELECT * FROM new"; $result=mysql_query($sql); $data=mysql_fetch_array($result); $gebruiker=$_SESSION['username']; if(!isset($_GET['x'])){ $aantal=4; }else{ $aantal= $_GET['x']; } ?> <html> <head> </head> <body> <h3> </h3> <fieldset class="dashboard"> <legend class="dashboard">Beheer</legend> <?php if (isset($_REQUEST['submit'])) { $name = $_POST["name"]; $description = $_POST["description"]; $path_thumbs = "upload/thumbs"; $path_big = "upload/images"; //the new width of the resized image. $img_thumb_width = 150; // in pixel //Do you want to limit the extensions of files uploaded (yes/no) $extlimit = "no"; //allowed Extensions $limitedext = array(".gif",".jpg",".png",".jpeg",".bmp"); $uploaded_images = array(); // loop through uploaded images for($i = 0; $i < count($_FILES['imgfile']['name']); $i++) { if(!empty($_FILES['imgfile']['name'][$i])) { $file_type = $_FILES['imgfile']['type'][$i]; $file_name = $_FILES['imgfile']['name'][$i]; $file_size = $_FILES['imgfile']['size'][$i]; $file_tmp = $_FILES['imgfile']['tmp_name'][$i]; $ext = pathinfo($file_name, PATHINFO_EXTENSION); if (($extlimit == "yes") && (!in_array($ext, $limitedext))) { echo "Verkeerde extensie. <br>--<a href=\"$_SERVER[PHP_SELF]\">back</a>"; exit(); } //create a random file name $rand_name = md5(time()); $rand_name = rand(0,999999999); //get the new width variable. $ThumbWidth = $img_thumb_width; switch($file_type) { case 'image/pjpeg': case 'image/jpeg': $new_img = imagecreatefromjpeg($file_tmp); break; case 'image/x-png': case 'image/png': $new_img = imagecreatefrompng($file_tmp); break; case 'image/gif': $new_img = imagecreatefromgif($file_tmp); break; } //list width and height and keep height ratio. list($width, $height) = getimagesize($file_tmp); $imgratio = $width/$height; if ($imgratio>1) { $newwidth = $ThumbWidth; $newheight = $ThumbWidth/$imgratio; } else { $newheight = $ThumbWidth; $newwidth = $ThumbWidth*$imgratio; } //function for resize image. if (function_exists(imagecreatetruecolor)) { $resized_img = imagecreatetruecolor($newwidth,$newheight); } else { die("Error: Please make sure you have GD library ver 2+"); } imagecopyresized($resized_img, $new_img, 0, 0, 0, 0, $newwidth, $newheight, $width, $height); //save image thumbnail ImageJpeg ($resized_img,"$path_thumbs/$rand_name.$file_ext"); ImageDestroy ($resized_img); ImageDestroy ($new_img); // upload original file move_uploaded_file ($file_tmp, "$path_big/$rand_name.$file_ext"); // add image thumbnail to array $uploaded_images[] = $rand_name.$file_ext; } } // check that there are thumbnails in uploaded_images if(!empty($uploaded_images)) { // now we insert the uploaded thumnail to database $sql = "INSERT INTO new (Main_Image, Image_2, Image_3, Image_4, Image_5) VALUES ('$Main', '$uploaded_images[0]','$uploaded_images[1]','$uploaded_images[2]','$uploaded_images[3]')"; if( ($result = mysql_query($sql)) ) { echo '<p><img src="images/icons/accept.gif" alt"" /> uploaded!</p>'; $page = "index.php?page=portfolio"; $sec = "1"; //header("Refresh: $sec; url=$page"); } else { echo "ERROR: ".mysql_error(); } } } else { ?> <div id="container"> <form action="" enctype="multipart/form-data" method="post" class="niceform" name="UD"> <dl> <dd> <?php for($i=0; $i < $aantal; $i++) { ?> </dd> </dl> <dl> <dt><label for="imgfile">Kies foto:</label></dt> <dd><input name="imgfile[]" id="imgfile[]" type="file" /> <input type="checkbox" name="Main" id="Main"> <label for="Main"></label></dd> </dl> <?php } ?> <dd><input type="submit" name="submit" id="submit" value="Insert" /></dd> </form> </div> </fieldset> <?php } ?> Edited October 22, 2013 by Ch0cu3r Quote Link to comment Share on other sites More sharing options...
techker Posted October 22, 2013 Author Share Posted October 22, 2013 nice!works great for insert but still the main image ...now it inserts nothing..but i think it is is missing? Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted October 22, 2013 Share Posted October 22, 2013 I accidently deleted it change $name = $_POST["name"]; $description = $_POST["description"]; To $name = $_POST["name"]; $description = $_POST["description"]; $Main = $_POST['Main']; Quote Link to comment Share on other sites More sharing options...
techker Posted October 22, 2013 Author Share Posted October 22, 2013 ya i noticed.np.. but how can i put it so it can insert the name of the pic? Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted October 22, 2013 Share Posted October 22, 2013 Instead of a random names? Change //save image thumbnail ImageJpeg ($resized_img,"$path_thumbs/$rand_name.$file_ext"); ImageDestroy ($resized_img); ImageDestroy ($new_img); // upload original file move_uploaded_file ($file_tmp, "$path_big/$rand_name.$file_ext"); // add image thumbnail to array $uploaded_images[] = $rand_name.$file_ext; to //save image thumbnail ImageJpeg ($resized_img, "$path_thumbs/$file_name"); ImageDestroy ($resized_img); ImageDestroy ($new_img); // upload original file move_uploaded_file ($file_tmp, "$path_big/$file_name"); // add image thumbnail to array $uploaded_images[] = $file_name; Now the actual filename of the images should be preserved Quote Link to comment Share on other sites More sharing options...
techker Posted October 22, 2013 Author Share Posted October 22, 2013 the image name is ok its the part to attache the check box to the image i select Quote Link to comment Share on other sites More sharing options...
techker Posted October 22, 2013 Author Share Posted October 22, 2013 i was thinking like this $Main = $_POST["Main"]. " ". $_POST['imgfile']['name']; but i get nothing Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted October 23, 2013 Share Posted October 23, 2013 You have a check box next to each file upload which the you use to mark it as the main image? Quote Link to comment Share on other sites More sharing options...
techker Posted October 23, 2013 Author Share Posted October 23, 2013 ya the check is to select the picture that is the main image. Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted October 23, 2013 Share Posted October 23, 2013 (edited) If only one image can be the main image I'd use radio buttons. So change the file inputs and checkbox fields to <dt><label for="imgfile">Kies foto:</label></dt> <dd><input name="imgfile[<?php echo $i ?>]" id="imgfile[<?php echo $i ?>]" type="file" /> <input type="radio" name="imgmain" value="[<?php echo $i ?>]" id="imgmain"> Now change // check that there are thumbnails in uploaded_images if(!empty($uploaded_images)) { to // check that there are thumbnails in uploaded_images if(!empty($uploaded_images)) { if(isset($_POST['imgmain'])) $Main = $uploaded_images[ $_POST['imgmain'] ]; Now the selected image should be set as the main image. Edited October 23, 2013 by Ch0cu3r Quote Link to comment Share on other sites More sharing options...
techker Posted October 23, 2013 Author Share Posted October 23, 2013 (edited) great help man..(your up urly to is see..lol) i will test it it.thx im guessing i got to remove my } at the end iof the block. if(isset($_POST['imgmain'])) $Main = $uploaded_images[ $_POST['imgmain'] ]; // now we insert the uploaded thumnail to database $sql = "INSERT INTO new (Main_Image, Image_2, Image_3, Image_4, Image_5) VALUES ('$Main', '$uploaded_images[0]','$uploaded_images[1]','$uploaded_images[2]','$uploaded_images[3]')"; if( ($result = mysql_query($sql)) ) { echo '<p><img src="images/icons/accept.gif" alt"" /> uploaded!</p>'; $page = "index.php?page=portfolio"; $sec = "1"; //header("Refresh: $sec; url=$page"); } else { echo "ERROR: ".mysql_error(); } }} this one Edited October 23, 2013 by techker Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.