For a while now I have been wanting to share a few scripts to help visitors with image manipulation. Only thing is I did not want to list out all the tricks I have learned without any context. Recently, a South African site called Springleap launched. Springleap allows visitors to upload t-shirt designs. Visitors then vote for the designs and the winners get paid - good old cash prizes. They have now opened a SEO competition to help create a little hype around the local blogging community. Whoever gets the highest ranking for a post about Springleap wins R2500. So this got me thinking. As far as I can tell (I am no SEO guru), the best way to get a good ranking in Google, is to have allot of well recognized and established sites linking back to my post. The best way I know how to do this is to write a good scrip/tutorial and submit it to the hundreds of script sites. So, this is the plan - this article will use Springleap as a case study to explain the practical implementation of the following scripts. This will give me a chance at winning, provide a little support for a local start up and most importantly, help you with image manipulation.

Uploading an image to Springleap

Springleap, like many other sites requires the user to upload a few images. Springleap requires a thumbnail, larger image of 600×400 and a psd or fla template file. The developers have done as most would and implemented three file upload form elements. This is fine and works well in most cases. However, it could be a tedious process should you have more than one design to upload - four designs = 12 uploads. Hence the multiple file uploader. I have used ElementITs MultiPowUpload1.7.3 a few times and find it to be stable and robust. As can be seen in the screenshots below, it works much as a upload form shoud. The user can select multiple files, and click one button to upload them all. Most importantly, the user can track the progress of a large file by way of a progress bar supplied at the bottom of the form. If you would like to add a record to your database or resize the image when uploading simply add your code to the file processing file (FileProcessingScripts/PHP/uploadfiles.php).

MultiPowUpload1 works with PHP, ASP, ASP.net, ColdFusion, JSP and PERL.

Click here to download

Click here to visit the creators of this script

The screenshots are an adapted version of the script. I was using it for a photo gallery. It is pretty straight forward an should not be too difficult for Springleap to customise.

Ok, it is pretty obvious what you need to do.

The cool thing about this script is you can select mutiple images. Facebook uses a JAVA app to do the same thing.

The script lists the files you selected. At any time, before or after uploading you can add additional files.

Once you are happy with the files, click upload and watch the progress bar.

Upload complete, click the continue button and proceed to the next step (Cropping, resizing perhaps

Additional multi file upload scripts

UploadForm - Ext JS Extension

An Ext.form.BasicForm extension for easy upload of (multiple) files to a server.

File upload progress bars with PHP

Using file upload hooks in PHP 5.2.x to generate a progress bar while uploading.

File uploads using ajax

Uses a hidden IFRAME to post the file and AJAX to check the progress, like gmail.

Image rotation

In the case of Springleap most users will know how to rotate an image in Photoshop. However, this is not always the case. Most visitors do not know how to rotate an image, so a simple script which uses PHP and GDLibraries may simplify the process a whole lot for many users.

I have written about this before so I wont delve to deep into it.

Click here to go to my previous post about image rotation.

Click here to download the script.

Image cropping

I have also written about this, problem is after a long day coding away - I deleted my database.

So in an effort to recap, I will go through image cropping aging.

So this is my thinking. It would be cool if Springleap allowed users to upload a design, rotate the image and then crop it to the appropriate size. This would save the designer of the t-shirt design a whole lot of time and also ensure consistency across the site.

The most comprehensive cropping script I have is a PHP class I found on phpclasses.net. It was created by Andrew Collington and really gets the job done. It is very similar to the cropper used on Digg and adds a sophisticated and user centric taste to the site.

By default the script does not save the cropped image. If you download the file and view the source of ‘class.cropcanvas.php’, under example uses, you will see the following example code for saving the image:

$cc->loadImage(’original1.png’);

$cc->cropBySize(100, 100, ccBOTTOMRIGHT);

$cc->saveImage(’final1.png’);

View demo

Download page

I made the following version of the script for a pet project. The layout and design is CSS based, so you shouldn’t have much trouble implementing it into your design.

This is what the original design looks like.

Additional resources

A simple image upload script

Simplified Image Resizing with PHP

Image Uploading and Resizing with PHP

All the best to Springleap, may you grow from strength to strength.