Jump to content

image size script


techker

Recommended Posts

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?

Link to comment
Share on other sites

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 by Ch0cu3r
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by Ch0cu3r
Link to comment
Share on other sites

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

 

 

post-9584-0-52921200-1382479318_thumb.png

Link to comment
Share on other sites

 

 

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?

Link to comment
Share on other sites

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 by Ch0cu3r
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by Ch0cu3r
Link to comment
Share on other sites

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 by techker
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.