If you are not using WordPress, and therefore don’t have access to its built in image resizing and saving tools, then phpThumb thumbnail creator is your next best option for image resizing, rotating, and a bunch of other cool image manipulation functions.
Here is a script I was using on one of my sites to resize and save user uploaded images. It utilizes the phpThumb resizing class and either GD or ImageMagick.
Download the image upload and resize demo.
Download the phpThumb project files.
The image submission form:
|
1 2 3 4 5 6 |
<form id="imageform" method="post" enctype="multipart/form-data" action='#'> <label for="submit-img">Upload an image:</label> <input type="file" name="photoimg" id="submit-img" /> <input type="hidden" name="MAX_FILE_SIZE" value="11509760" /> <div id="uploading">Uploading... Please Wait</div> </form> |
Notice that there is no submit button. We are going to handle the submit using jQuery because we can and it’s cooler that way.
The multipart/form-data enctype value is important also. Don’t remove it or the photo will not submit. The “uploading” div will not be shown until an image is selected for upload by the user. Stick whatever you want to be show when the image is being uploaded into that div. I have an “uploading” message along with the usual accompanying spinner gif and css to make it pretty.
Here is the jQuery for our page header (make sure you have the jQuery library loaded!):
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript"> jQuery(document).ready(function($){ $("#uploading").hide(); $("#submit-img").change(function() { $("#submit-img").hide(); $("#uploading").show(100); $("#imageform").submit(); }); }); </script> |
The first line hides the #uploading div on page load. The next line is the start of our function that is started whenever the users browses his computer and selects an image to be uploaded. Once he has made his image selection, the browse button is hidden, the #uploading div is shown, and the form is submitted.
Next is our php upload script with phpThumb image resizing class:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
<?php if($_SERVER['REQUEST_METHOD'] == "POST") { //Upload limit size in megabytes $upload_size_limit = 10; //this is the image destination path $path = "images/user-submitted/"; //temp image storage directory $temp_path = "temp/"; //list all accepted image formats here (extensions) $valid_formats = array("jpg", "jpeg", "png", "gif", "bmp"); //grab the submitted image name and size $uploaded_img_name = $_FILES['photoimg']['name']; //size is measured in bytes $uploaded_img_size = $_FILES['photoimg']['size']; //get image extension $ext = pathinfo($uploaded_img_name, PATHINFO_EXTENSION); //make sure extension is acceptable if(in_array(strtolower($ext),$valid_formats)) { //make sure image is not too big (1048576 bytes = 1 megabyte) if($uploaded_img_size<(1048576*$upload_size_limit)) { //store uploaded image temporarily in "temp" directory while resizing is performed $tmp_img_name = "temp-".time().".".$ext; //create the permanent filename with extension - using time() as filename will ensure a unique filename. Image will be converted to jpg (if it's in another format) so we set it to jpg here. $final_img_name = time().".jpg"; //put uploaded image in var $uploaded_img = $_FILES['photoimg']['tmp_name']; //move the image into the temp directory while we work with it if(move_uploaded_file($uploaded_img, $temp_path.$tmp_img_name)) { //phpthumb resizing - get the php class and start it up require_once('phpthumb/phpthumb.class.php'); $phpThumb = new phpThumb(); //set the output format. We will save the images as jpg. $output_format = 'jpeg'; //if your server has imagemagick install, use it! It's superior to GD. Ask your host for the path, if unsure. $imagemagick_path = '/usr/bin/convert'; //I'm saving three different sizes of the image. Set the height for the three different sizes here. $thumbnail_heights = array(125, 300, 1024); //loop through the heights array above and create the different size image $count=0; foreach ($thumbnail_heights as $thumbnail_height) { $phpThumb->resetObject(); $phpThumb->setSourceFilename("../".$temp_path.$tmp_img_name); $phpThumb->setParameter('h', $thumbnail_height); $phpThumb->setParameter('config_output_format', $output_format); $phpThumb->setParameter('config_imagemagick_path', $imagemagick_path); if ($count==0){ //1st pass for xsmall, square pics //q (quality) is set to 92 $phpThumb->setParameter('q', 92); //zc (zoom-crop) is on (off by default), so the smaller of the width/height will be used to make a square cropped thumbnail. $phpThumb->setParameter('zc', 1); //set image thumbnail destination $store_filename = "../".$path."thumb/xs/".$final_img_name; } if ($count==1){ //2nd pass for small pics $maxwidth=250; //set width for landscape pics $phpThumb->setParameter('w', $maxwidth); $phpThumb->setParameter('q', 92); $store_filename = "../".$path."thumb/".$final_img_name; } if ($count==2){ //3rd pass for large pics $maxwidth=1280; //set width for landscape pics $phpThumb->setParameter('w', $maxwidth); $phpThumb->setParameter('q', 80); $store_filename = "../".$path.$final_img_name; } if ($phpThumb->GenerateThumbnail()) { if ($phpThumb->RenderToFile($store_filename)) { //image uploaded - you will probably need to put image info into a database at this point $message="Image uploaded successfully."; } else { //unable to write file to final destination directory - check folder permissions $message= "Error! Please try again (render)."; } } else { //unable to generate the image $message= "Error! Please try again (generate)."; } $count++; } //delete original user uploaded image from temp directory. unlink($temp_path.$tmp_img_name); } else { //unable to write file to temporary directory - check folder permissions $message= "Error! Please try again (temp move)."; } } else { $message= "Sorry, your image is too large. Maximum size is 10mb. Please resize it."; } } else { $message= "Invalid file format. Images must be in jpg, png, gif, or bmp format."; } } ?> |
Everything you need to know is commented into the script above. This script is making three passes to save the images to multiple dimensions. You can add additional image passes and parameters as needed for your project.
Download this the image resize demo below and give it a try. The image and storage paths can be tricky. phpThumb treats paths as if they are relative to the phpThumb script directory. Using absolute paths works best. You can set absolute paths when using the script on your server so it’s cleaner. This image resize demo download below should work on most any server as-as. Note that the demo does not include the phpThumb files. There is a “phpthumb” folder in the demo package. Download the project files and drop them directly into this folder and you will be good to go.
If you run into trouble with phpThumb not working, use the following to figure out what’s going on:
|
1 2 3 4 |
//Full debug: print_r( $phpThumb->debugmessages ); //Just fatal errors: print_r($phpThumb->fatalerror); |
I would also advise downloading the full phpThumb package and using the included demo check file to diagnose problems.
Hey, nice job with the script! I was wondering if it’s possible to save to server thumbnails generated from images stored on remote servers, like pictures from different news articles. I am actually working on a script based on your work to accomplish this but I think I am stuck 🙁 I would appreciate your reply. Best, P.
Thanks Brandon. This helped clear it up