Introduction
12CropImage handles the upload and cropping of images. The script is meant as a plugin to other scripts or forms. It takes care of the more difficult part of uploading an image and cropping that image to the right size. The result of the script is a hidden input field with a url to the newly created image. This url can be used in any way you would like.
What do I need?
To make the script work you need a web server with PHP installed. PHP must be configured to use the GD-library for image manipulation. Most php-hosts also have GD installed. Until GD version 2.0 images were palette based, including GIF support. From version 2.0, GD supported true colour images, but no GIF-files. GIF support was cancelled due to patent issues. Since GD version 2.0.28 however, GIF support has been restored. This script handles GIF, PNG and JPEG files in truecolor and therefor GD version 2.0.28 or up is required.
Who can use the script?
Unlike all other content on my site, my plugins and scripts are released under a GNU General Public License. A copy of the full license text is included with your Wordpress distribution and can also be found here. I appreciate it when you let me know if and how you use my script…
Installation?
Installation is easy and straightforward. Download and unzip the zipfile. Upload the directory 12cropimage anywhere on your server. Make the temp directory inside the 12cropimage writable by setting its permissions to 777.
You can change texts and settings to your own preference by editing config.php inside the 12cropimage directory. The options are explained inside the file.
The second step is to integrate 12cropimage inside the page in which you want to use it. This is fairly easy and it can be done in a few steps.
First you will have to add a link to the javascript file within the head-tags of the desired page. This is done with the following code:
<script type="text/javascript" src="/path/to/12cropimage/javascript.php"></script>
Off course you will have to change www.yourdomain.com/path/to/ to a value that makes more sense on your website ;)
You can put as many 12cropimage instances on a pag as you want. The only thing you have to do is to create the following block everywhere you want to put 12cropimage.
<div class="cropper"></div>
Finaly you will need to initiate the script. This is done by calling the crInitCropper function which is possible in two ways. If you want the script to initiate automatically you will need to put an onload attribute within your body tag, like this:
<body onload="crInitCropper();">
HTML of your page...
</body>
If you cannot or don’t want to include anything in your body tag, you can initiate it manually by creating a link which calls the crInitCropper function. This way is also good if you want to make uploading a picture optionally. The link should look something like this.
<a href="#" onclick="crInitCropper();">Click here to upload your image</a>
That’s it. If you followed all the above steps the script should work as a basic installation. Continue reading if you want to know how to set some options per 12cropimage instance.
Setting options per instance
Per 12cropimage instance you can set some options this is done by including some hidden input fields inside the cropper div tag. The following options can be set:
crWidth:Sets the width of the cropped result.
crHeight:Sets the height of the cropped result.
crDivWidth:Sets the width of the cropper interface.
crVarCropSize:Set to 1 if you want to allow users to choose their own crop size.:Set to 0 for fixed sizes.
crShowPreview:Set to 0 to not show a preview before finishing the crop.
crResultDir:Set to absolute path of the directory in which you want to save:your results.
As an example I show the code which is used for the the second demo on this page.
<div class="cropper">
<a href="#demo" onclick="crInitCropper();">Start the demo's</a>
<input type="hidden" name="crWidth" value="120"/>
<input type="hidden" name="crHeight" value="90"/>
<input type="hidden" name="crDivWidth" value="360"/>
<input type="hidden" name="crVarCropSize" value="1"/>
</div>
Download the script
You can always download the latest version of the script here. The current version is version 2.11 Beta.
Changelog and todo
2.12 beta Corrected a register globals bug, noticed by Arvo
2.11 beta Corrected some minor mistakes and took a way a lost test-error…
2.1 beta Added the possibility to determine a result directory, corrected some errors.
2.0 beta It just started, nothing changed yet…
The thing I need to do most is to clean up the code. I can probably make it more efficient. However, the script does what it is supposed to do at the moment…
Problems / Questions / Suggestions / Support?
Sorry, but I do longer give support for this plugin. Development has been dead for 2 years and this page is nothing more than an archive.