Get The Functions

Download the functions here: GD Functions V1.0

Using The Functions

There are currently 3 functions included that are quite flexible and they allow you to:

• Resize Images
• Rotate Images
• Crop Images

This is a pretty standard set of functions but they are very easy to use, and they do all the heavy GD lifting for you.

In order to use the functions you must first include the GD Functions into your page.

resizeImage(file, width, height, [newFile, [forceResize, [quality]]]);

Can resize an image in PHP.

File: The address to the file you wish to resize. eg. “../storage/my-image.jpg”

Width: The max width (or new width) for the image to be resized to. eg. 125

Height: The max height (or new height) for the image to be resized to. eg. 125

NewFile: (optional, default:file) If set, it will create a new file at this address instead of replacing the old image file.eg. “../storage/my-new-image.jpg”

ForceResize: (optional, default:false) If set to true will force the image to resize (in ratio) to the new height. eg. true

Quality: (optional, default:90) The quality of the image being exported. Integer between 0-100, 100 being the best quality. eg. 80

rotateImage(file, Angle, [newFile]);

Can rotate an image to any angle in PHP.

File: The address to the file you wish to rotate. eg. “../storage/my-image.jpg”

Angle: The angle you would like to rotate the image to. Integer between 0-360. eg. 90

NewFile: (optional, default:file) If set, it will create a new file at this address instead of replacing the old image file.eg. “../storage/my-new-image.jpg”

cropImage(file, X1, Y1, X2, Y2, [width, [height, [newFile]]]);

Can crop a portion of an image, then resize that portion to a specified width/height in PHP.

File: The address to the file you wish to crop. eg. “../storage/my-image.jpg”

X1: The X co-ordinate for the top left corner of the position you wish to cut. Integer. eg. 10

Y1: The Y co-ordinate for the top left corner of the position you wish to cut. Integer. eg. 10

X2: The X co-ordinate for the bottom right corner of the position you wish to cut. Integer. eg. 100

Y2: The Y co-ordinate for the bottom right corner of the position you wish to cut. Integer. eg. 100

Width: (optional, default:cropWidth) The width you’d like the cropped image to be. If not set it will default to the width of the area being cropped. Integer. eg. 50

Height: (optional, default:cropHeight) The height you’d like the cropped image to be. If not set it will default to the height of the area being cropped. Integer. eg. 50

NewFile: (optional, default:file) If set, it will create a new file at this address instead of replacing the old image file.eg. “../storage/my-new-image.jpg”

Notes

• Requires the PHP GD extension installed to work (comes with most hosting set-ups)
• Supports JPEG, PNG & GIF files.

Download The Class

Upload the unzipped class to your site (Click here to download the class)

The Code – Download File

The following is the base code of how the script works. All you need to do is replace the $fileonserver and $filename to the file(s) you wish to zip.

include("zip_min.inc");
$zipfile = new zipfile();
$fileonserver = "path/to/file/oldfilename.txt";
$filename = "newfilename.txt";
$zipfile -> addFile(file_get_contents($fileonserver), $filename);
// Force download the zip
header("Content-type: application/octet-stream");
header("Content-disposition: attachment; filename=test.zip");
echo $zipfile -> file();

You may add more files by repeating the “$zipfile -> addFile” script with more files. The above will send the file straight to the user (not create a file on your server).

The Code – Save File To Server

You can save the zip to the server by using the file_put_contents() function as follows:

include("zip_min.inc");
$zipfile = new zipfile();
$fileonserver = "path/to/file/oldfilename.txt";
$filename = "newfilename.txt";
$zipfile -> addFile(file_get_contents($fileonserver), $filename);
$contents = $zipfile -> file();
file_put_contents("test.zip", $contents);

As you can see it’s a short and simple process. Script seems to work quite fast too. I’ve tested the downloaded files on both Mac and Windows and it seems to work beautifully.

Notes

• If you get an error with memory you’ll need to allow more PHP memory by updating your php.ini file or by using a .htaccess script. (Google it)
• Requires gzcompress PHP function (most hosts have this installed already)
• If you change the file name of the download in the header script make sure there are no spaces in the file name.

If you use the prototype javascript framework there is a call built in! Handy…

Here’s the code for Prototype users:

var pos = $("elementID").viewportOffset();
var x = pos[0];
var y = pos[1];

Nice and easy…

For those of you who don’t use prototype, below is a function you can use to get the X & Y coordinates relative to the page (viewport).

The Function:

function viewportOffset(forElement) {
	var valueT = 0, valueL = 0;<
	var element = document.getElementById(forElement);
	do {
		valueT += element.offsetTop  || 0;
		valueL += element.offsetLeft || 0;
		if (element.offsetParent == document.body) break;
	} while (element = element.offsetParent);
	element = forElement;
	do {
		if (element.tagName == 'BODY') {
			valueT -= element.scrollTop  || 0;
			valueL -= element.scrollLeft || 0;
		}
	} while (element = element.parentNode);
	return [valueL, valueT];
}

This is a modified function from the prototype framework.

Calling The Function:

var pos = viewportOffset("elementID");
var x = pos[0];
var y = pos[1];

I tried several of the functions on various blogs etc none of them seemed to return anything but 0 in Safari. The above has been tested and works in the latest versions Safari, Firefox, IE and Opera.

Enjoy!

I’ve released version 1.1.1 of my gzip php script for Javascript and CSS which is a minor updates and adds a few handy new features. You can get the latest version of the script here. You can read the release notes here. ]]> http://www.thewebdevelopmentblog.com/2008/12/script-new-version-of-gzip-for-javascript-css-now-available/feed/ 2 http://www.thewebdevelopmentblog.com/2008/11/tipscript-gzip-compression-script-for-javascript-and-css-updated/ http://www.thewebdevelopmentblog.com/2008/11/tipscript-gzip-compression-script-for-javascript-and-css-updated/#comments Sun, 02 Nov 2008 09:21:11 +0000 Jason Stockton http://thewebdevelopmentblog.com/?p=140 Today I’ve updated my gzip compression for javascript and CSS script to fix a security flaw. If you’re using V1.0 I advise you update to V1.1 which is available here. You can read the release notes here.

Step 1: Add the gzip.php file.

Download the gzip.php file here. (V1.1.1)

Then add it to the root directory of your website.

Step 2: Adjust your HTML.

We now need to set your Javascript and CSS to run through the compression. We do this by adjusting the script and style addresses as follows…

For CSS

<link href="gzip.php?f0=css/main.css" rel="stylesheet" type="text/css">

For Javascript

<script src="gzip.php?f0=javascript/main.js" type="text/javascript"></script>

To change the address of the scripts just change the address that is in italic. Files are restricted to only files with the .css or .js extension.

Step 3: Merging Files.

Another slow point for loading time is using multiple Javascript files and CSS style sheets. The reason for this is for each file the browser needs to re-connect to the server before it can download it. However if you’re like me, you don’t want to have to merge all your files into 1 manually, so I’ve built in this ability into gzip.php. Simply merge files together as follows…

For CSS

<link href="gzip.php?f0=css/main.css&f1=css/more.css&f2=css/evenmore.css" rel="stylesheet" type="text/css">

For Javascript

<script src="gzip.php?f0=javascript/main.js&f1=javascript/more.js&f2=javascript/evenmore.js" type="text/javascript"></script>

So as you can see you can add files by adding in more f variables which count up from 0. You can add up to 100 files in the current configuration. Although if you have that many Javascript or CSS files then you should look at fixing that…

NOTE: Make sure you don’t miss any numbers when counting up otherwise it won’t include all your files.

Step 4: Caching Files.

Another trick that will help speed up your site is caching these files. Again I have that covered! Simply add cache=true& to the front of the file address as follows…

gzip.php?cache=true&f0=javascript/main.js&f1=javascript/more.js

If you don’t want to have the default 3 days expiry you may add in exp=#ofDays& and it will change the expiry period. For example the following will set the cache period to 31 days…

gzip.php?cache=true&exp=31&f0=javascript/main.js&f1=javascript/more.js

NOTE: It is not recommended that you cache files that are updated frequently as when the file is updated it won’t update in the browser for the number of days you set.

And there you have it! I have decreased loading time on my sites dramatically using this exact script so I hope it helps you out as much as it has with me!

UPDATE: Just released version 1.1.1 which adds new functionality and better ways to pinpoint errors. Release Notes.

UPDATE: Just released version 1.1 which fixes a security hole (thanks for the heads up Nail) as well as a number of other minor updates. Release Notes.