uploading images/creating thumbnails

paulieb13 · Sep 7, 2004

I'm creating an online photo album to share photos with family members that live around the country.

I want the members of my family to be able to upload images, then have it save the images to a folder with a unique file name, but also create a thumbnail of each image, and send the thumbnail file name, along with the original file name to a MySQL database.

Any idea how this is to be done, and how easy it is?

flubbard · Sep 7, 2004

I have done this a couple of times using the following php functions:
imagecreatefromjpeg
imagecreate
imagecopyresized
I would first upload the file (full size) with an html form, and as part of the upload response, generate the thumbnail. Specify what size you would like for a thumbnail and resize your image to suit. You might also look at what maximum size of picture you would want to display on the page (for bandwidth reasons).

paulieb13 · Sep 7, 2004

Thanks flubbard,

I'll get on that and let you know if i can get it to work.

ingresman · Sep 8, 2004

The thing to remember when resizing into a thumb nail is to keep the aspect ratio the same so the images dont look stretched.
If you look on

http://www.php.net

under the image functions some uswer supplied comments show you how to do it all

paulieb13 · Sep 8, 2004

Ok, now I'm having trouble just uploading the image. Nevermind resizing it and trying to save that image too. I've been looking at this code, and looking at php.net and I can't figure this out. I've looked at the functions you all suggested, but I can't figure out where to place them, or how to use them. Here is my code. Right now, its suppose to upload to the server and give it a random name, and then get the extension of the orginal image and save it.

<?
$uploaddir = "photos";
if(is_uploaded_file($_FILES['file']['tmp_name'])){
move_uploaded_file($_FILES['file']['tmp_name'],$uploaddir.'/'.rand(0,100000).substr($_FILES['file']['name'],strrpos($_FILES['file']['name'],'.')));
print "Your file has been uploaded successfully!<br>";
print "file name and url = ".$uploaddir.'/'.$_FILES['file']['name'];
}
?>

litebearer · Sep 8, 2004

Here is the script I use for uploading to my family's photo page. It doesn't create a random name but it does create the thumbnail, stores the images in the appropriate folders and adds the information (including comments/captions for the images) in a database.

PHP:

<html>

<head>
<title>Our Family Gallery file upload script</title>
<?PHP
include ('text.css');
?>
</head>

</head>
<body>
<?php

$file_dir = "/home/litebear/public_html/effie/gallery/pics";

foreach($_FILES as $file_name => $file_array) {
    $var1 = $file_array['tmp_name'];
    $var2 = $file_array['name'];
    $var3 = $file_dir . "/" . $file_array[name];
	if (is_uploaded_file($file_array['tmp_name'])) {
		move_uploaded_file($file_array['tmp_name'],
			"$file_dir/$file_array[name]") or die ("could not copy");
	}
}

$comments = trim($_POST['comments']);

function thumbnail($image_path,$thumb_path,$image_name,$thumb_width) 
{ 
$src_img = imagecreatefromjpeg("$image_path/$image_name"); 
$origw=imagesx($src_img); 
$origh=imagesy($src_img); 
$new_w = $thumb_width; 
$diff=$origw/$new_w;
$percent_diff = $new_w/$origw;
$new_h = $origh * $percent_diff;

#################################
#
# start adding new code here
#
#################################

$job = 3;
if ($origw > $origh) { 
  $job = 1;
}
if ($origw < $origh) {
  $job = 2;
}

SWITCH ($job) {
   case 1:
      $new_w = 100;
      $new_h  = $origh * (100/$origw);
   break;

  case 2:
      $new_h = 100;
      $new_w  = $origw * (100/$origh);
  break;

  case 3:
      $new_w = 100;
      $new_h  = 100;
  break;

}

#################################
#
# end adding new code here
#
#################################


$dst_img = imagecreate($new_w,$new_h); 
imagecopyresized($dst_img,$src_img,0,0,0,0,$new_w,$new_h,imagesx($src_img),imagesy($src_img)); 

imagejpeg($dst_img, "$thumb_path/$image_name",85); 
return true; 
} 
$what_width = 100;
$file_dir2 = "/home/litebear/public_html/effie/gallery/thumbs";

thumbnail($file_dir,$file_dir2,$var2,$what_width);
?>

<?PHP


//  date calculation
$ts = time(); //gets current server date as a timestamp
$tsgmt = gmmktime(); //gets timestamp for GMT

// date dst starts in the US
$start_dst = "20040404";
// date dst ends in the US
$end_dst = "20041031";

// set local offset from gmt
$est_off_set = 18000;  // offset for Eastern Standard Time

// set local timestamps
$ts_est = $tsgmt - $est_off_set;

// adjust time stamps for DST

$est_date = date("Ymd", $ts_est);
if ($est_date >= $start_dst && $est_date <= $end_dst) { $ts_est = $ts_est + 3600; }

// end date calc


$fullpic = $var2;
$thumbpic = $var2;
$uploaddate = $est_date;

include ('db.php');
$sql = "INSERT INTO our_fam_gallery (comments, fullpic, thumbpic, uploaddate) VALUES ('$comments', '$fullpic', '$thumbpic', '$uploaddate')";
$result = mysql_query($sql);

?>
Your picture <B><I> <? echo $var2; ?></b></i> has been uploaded <br>and a thumbnail created.<br>
<IMG SRC = "<?PHP echo "./thumbs/" . $thumbpic; ?>"><br>
the comments were: <br>
<B><?PHP echo $comments; ?></b><br><br>
The load date is: <B><?PHP echo $uploaddate; ?></b><br><br>
You may upload another picture by clicking the <b>Add</b> button below, <br>
or peruse the gallery by clicking the <B>View</b> button, <br>
or you may choose any of the menu items from your left.

</body>

</html>

Lite...

paulieb13 · Sep 8, 2004

THANK YOU litebearer. You dont know the weight you have lifted off my shoulders. If you're ever in the Philadelphia, PA area, I owe u a drink.

-- Paul

i3iz · Mar 4, 2005

I tried to use Litebearers Code and it is giving me an error at line 14. Which is tmp_name....
I changed it to my serverpath....

I HAVE HAD SO MUCH TROUBLE GETTING A FILE TO RESIZE UPLOAD AND STORE LOCATIONS OF THE FILE AND THUMB IN THE DATABASE

why can no one help me?

--i3iz
Technical Newbie

flubbard · Mar 4, 2005

Here is the code that I use for this sort of thing. It is not the most robust code, but it should serve as a starting point.

Code:

<?php

function thumbnail($image_path, $thumb_path, $image_name, $thumb_width)
{
  set_time_limit(300);
  $src_img = imagecreatefromjpeg("$image_path/$image_name");
  $origw = imagesx($src_img);
  $origh = imagesy($src_img);

  // determine portrait v. landscape and resize accordingly
  if ($origw >= $origh)
  {
    $new_w = $thumb_width;
    $new_h = ($new_w/$origw)*$origh;
  }
  else
  {
    $new_h = $thumb_width;
    $new_w = ($new_h/$origh)*$origw;
  }

  $dst_img = imagecreate($new_w, $new_h);
  imagecopyresized($dst_img, $src_img, 0, 0, 0, 0, $new_w, 
         $new_h, imagesx($src_img), imagesy($src_img));
  imagejpeg($dst_img, "$thumb_path/$image_name");
  return true;
}




if ($submit) 
{
		// upload the new file into the products folder
		
		// $userfile is where the file went on the webserver
		$userfile = $HTTP_POST_FILES['userfile']['tmp_name'];
	
		// $userfile_name is the original file name
		$userfile_name = $HTTP_POST_FILES['userfile']['name'];

		// grab additional information
		$userfile_size = $HTTP_POST_FILES['userfile']['size'];
		$userfile_type = $HTTP_POST_FILES['userfile']['type'];
		$userfile_error = $HTTP_POST_FILES['userfile']['error'];
		
		// display errors
		if ($userfile=='none')
		{
			echo 'Problem: no file uploaded';
			exit;
		}
		
		if ($userfile_size==0)
		{
			echo 'Problem: uploaded file is zero length';
			exit;
		}
		

		// the following line removes problems with long filenames
		$userfile_name = upload.jpg;
		$upfile = $uploaddir .$userfile_name;
		$newsfile = $newsdir .$userfile_name;

		// $filename = $HTTP_POST_FILES['userfile']['name'];
		
		if (is_uploaded_file($userfile))
		{
			if (!move_uploaded_file($userfile, $upfile))
			{
				echo 'Problem: Could not move file to destination directory';
				exit;
			}

			// create the image file in the products directory 
			thumbnail("$uploaddir", "$newsdir", 
				"$userfile_name", 64);

		}
		else
		{
			echo 'Problem: Possible file upload attack. Filename: '.$userfile_name;
			exit;
		}
}

?>

the submit form will look something like this

Code:

<p align="center"><b><font size="4">Add A Picture</font></b></p>
<form enctype="multipart/form-data" method="post" action="<?php echo $PHP_SELF?>">
		<div align="center">
		  <center>
		  <table border="0" width="50%">
		    <tr>
		      <td width="50%" align="right">Description</td>
		      <td width="50%"><input type="text" name="description" size="20"></td>
		    </tr>
		    <tr>
		      <td width="50%" align="right">Picture</td>
		      <td width="50%"><input name="userfile" type="file"></td>	
		  </table>
		<input type="hidden" name="MAX_FILE_SIZE" value="300000000">
</form>

For reference, this code was written as part of a system to upload the pictures to the server as well as add the filename and a brief description of the picture to a database.

Hope this helps

flubbard · Mar 4, 2005

Another thought, if you are having trouble uploading the file, check to make sure that you have write permissions to the directory defined by the file path.

What set up do you have (Apache on Linux?) if so, make sure that the apache user has write priviledges. Also, what error message do you get when trying the upload?

i3iz · Mar 4, 2005

Flubbard, thanks, i will try that code.

I can upload a file, and i can insert the location into the mysql db, but when i start to try to resize it, i get lost in the code. I am a graphics guy not a coder.

I am good at appropriating code. So thanks i will try it.
--JB

--i3iz
Technical Newbie

jpadie · Mar 5, 2005

Paul - noone seems to have responded to your code.

nothing in the code looks intrinsically incorrect - although I would recommend debugging with a less complex new file name clause (like a hardcoded directory and name - make sure permissions are set correctly).

critical point: i am assuming that you are calling your upload control "file" in the name attribute of the control in the form? (people often get this wrong). you should also make sure that you follow the rules on php.net for assigning a character type to the form etc.

for the image resize code - daButcher posted a good looking function only two days ago. the function was called createThumb but can obviously be used to resize to any value. i would resize the tmp uploaded image and store the result in a place you want.

keep at the coding: php isn't the most straightforward language but it is not the worst either. there will come an epiphany where it all just clicks...

Olavxxx · Mar 7, 2005

If you are interested, I can provide my "dynamic watermar" script too..

It gives you possibilities to have images like:
<img src="pictures/<variablename>-<fileid>_<extension>/<filetitle>.<extension>" title="<filetitle>" />

eg.
If you have uploaded foo.jpg and it has id 1992 in your db, instead of:
<img src="picture.php?id=1992" alt="foo from bar" />
you would do:
<img src="picture/p-1992_jpg/foo_from_bar.jpg" alt="foo from bar" />

Google and others, will not index "dynamic pictures" (.php).

You need one php-file and one htacess file, to achieve this.
I think it will give google results like *h*, as then you can have multiple files with same "name", different "folders",etc. you can optimize as much as you want, while still calling the picture from it's id in the database! You can then also force the images to have names that you make RANDOM of only INTEGERS.

I think it gives the optimal sollution, as then you dont have to run some sort of validation on filenames, just force them to be <randominteger>.<ext>

Olav Alexander Mjelde

http://www.volvo-power.net

Admin & Webmaster

Olavxxx · Mar 7, 2005

btw. When forcing randomint as filename, do it inside a while loop.. loop while is_file($randomname)
when loop ends, you have unique name..

Olav Alexander Mjelde

http://www.volvo-power.net

Admin & Webmaster

awaresoft · Mar 7, 2005

Olav,

I would be curious to see your watermark code.

Thank you,

Malcolm

i3iz · Mar 7, 2005

for some reason i cannot get the above code working. Is there something missing?

--i3iz
Technical Newbie

i3iz · Mar 7, 2005

this code is awesome....

<?php

if(isset($_POST['Submit']))

{
$size = 150; // the thumbnail height

$filedir = 'pics/'; // the directory for the original image
$thumbdir = 'thumbs/'; // the directory for the thumbnail image
$prefix = 'tn_'; // the prefix to be added to the original name

$maxfile = '500000';
$mode = '0666';

$userfile_name = $_FILES['image']['name'];
$userfile_tmp = $_FILES['image']['tmp_name'];
$userfile_size = $_FILES['image']['size'];
$userfile_type = $_FILES['image']['type'];

if (isset($_FILES['image']['name']))
{
$prod_img = $filedir.$userfile_name;

$prod_img_thumb = $thumbdir.$prefix.$userfile_name;
move_uploaded_file($userfile_tmp, $prod_img);
chmod ($prod_img, octdec($mode));

$sizes = getimagesize($prod_img);

$aspect_ratio = $sizes[1]/$sizes[0];

if ($sizes[1] <= $size)
{
$new_width = $sizes[0];
$new_height = $sizes[1];
}else{
$new_height = $size;
$new_width = abs($new_height/$aspect_ratio);
}

$destimg=ImageCreateTrueColor($new_width,$new_height) or die('Problem In Creating image');
$srcimg=ImageCreateFromJPEG($prod_img) or die('Problem In opening Source Image');
ImageCopyResized($destimg,$srcimg,0,0,0,0,$new_width,$new_height,ImageSX($srcimg),ImageSY($srcimg)) or die('Problem In resizing');
ImageJPEG($destimg,$prod_img_thumb,90) or die('Problem In saving');
imagedestroy($destimg);
}

echo '
<a href="'.$prod_img.'">
<img src="'.$prod_img_thumb.'" width="'.$new_width.'" heigt="'.$new_height.'">
</a>';

}else{

echo '
<form method="POST" action="'.$_SERVER['PHP_SELF'].'" enctype="multipart/form-data">
<input type="file" name="image"><p>
<input type="Submit" name="Submit" value="Submit">
</form>';
}

?>

--i3iz
Technical Newbie

Olavxxx · Mar 8, 2005

I will post my dynamic watermark-script here soon.
It's, as I said, based on retrieving images from mysql.

I used it based on filename, but it can easilly be adapted to use pid (picture id) instead.

Also, I have a suggestion for you:
I made a field userlevel_userlevel_id (int(1))

Then, I made one more table, called tbl_userlevel
In that table, I have fields like:
userlevel_quota
userlevel_title
userlevel_lifetime

etc etc

Then, On the image-upload page, I summarize the filesize of the images uploaded by user, substract the userlevel_quota with the sum of the uploaded pictures.

If the sum of that is lower than the $max_filesize, set $max_filesize = $quota_left;

eg:

$quota_left = $quota_total - $used_quota;

if ($quota_left < $max_filesize) {
$max_filesize = $quota_left;
}

Ps. I will post some code-samples ASAP.
Then, what you do, is to have to images..
One progressbar-image for "empty", and one for "full".
I simply googled for "windows xp progressbar" or something in that matter, which made me find an orange progress-bar.

I then divided those images.
To then make my progressbar, I made a function that loops and creates the progressbar, by making several <img> tags, containing the correct images.

You could also do this without an image, something like:

Space left: [###-------]

It's really quite simple, as everything is, when you know how to do it.

Olav Alexander Mjelde

http://www.volvo-power.net

Admin & Webmaster

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

uploading images/creating thumbnails

Programmer

Technical User

Programmer

IS-IT--Management

Programmer

Technical User

Programmer

Technical User

Technical User

Technical User

Technical User

Technical User

Programmer

Programmer

Programmer

Technical User

Technical User

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor