image size script

techker · 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?

Ch0cu3r · October 20, 2013

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

techker · 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....

Ch0cu3r · October 20, 2013

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

techker · October 20, 2013

huh..i didn't know i can put 2 unlink functions in one script..creat..lol

thx for the help

Ch0cu3r · October 20, 2013

You can call as many functions as you like. PHP does not impose any limits.

techker · 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}?>

Ch0cu3r · 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?

techker · 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..

Ch0cu3r · October 22, 2013

I dont understand that. Can you explain it more clearly.

techker · 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..

Ch0cu3r · October 22, 2013

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

techker · October 22, 2013

nice!works great for insert but still the main image ...now it inserts nothing..but i think it is is missing?

Ch0cu3r · October 22, 2013

I accidently deleted it change

    $name = $_POST["name"];
    $description = $_POST["description"];

To

    $name = $_POST["name"];
    $description = $_POST["description"];
    $Main = $_POST['Main'];

techker · October 22, 2013

ya i noticed.np..

but how can i put it so it can insert the name of the pic?

Ch0cu3r · 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

techker · October 22, 2013

the image name is ok its the part to attache the check box to the image i select

techker · October 22, 2013

i was thinking like this

$Main = $_POST["Main"]. " ". $_POST['imgfile']['name'];

but i get nothing

Ch0cu3r · October 23, 2013

You have a check box next to each file upload which the you use to mark it as the main image?

techker · October 23, 2013

ya the check is to select the picture that is the main image.

Ch0cu3r · October 23, 2013

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

techker · October 23, 2013

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

Sign In

image size script

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information