[php_penguin]

Ok, thought I would jot down some notes from a little project I did a while back.

In an ecommerce site, especially clothing, there is often more than one color related to a product. Sometimes showing images of all the different colours is impractical. This is what a colour swatch is for.

Heres an example from M&S: http://www.marksandspencer.com/gp/browse.h...=A2BO0OYVBKIQJM

So what do you need to make a swatch?[list]
[*]PHP 4 / 5
[*]GD library

So really, the first stage is to figure out what variables we want to take in... Heres the obvious one: the colour

Now, also width and height... and for a special twist, border colour

So here we start the script by assigning defaults:

<?php
$main_color 	= $_GET['c'];
	if(!isset($_GET['c'])) {
		$main_color	= "FFFFFF";
	}
$width	= $_GET['w'];
	if(!isset($_GET['w'])) {
		$width = "15";
	}
$height	= $_GET['h'];
	if(!isset($_GET['h'])) {
		$height = "15";
	}
$brdr_colour	= $_GET['b'];
	if(!isset($_GET['b'])) {
		$brdr_color = "000000";
	}

So far... it does nothing. In fact it will generate an error because i didnt put the ending tag on. But what it does do is set up defaults for if you don't call anything. In this case it will (eventually) make a 15x15 white sqaure with a black border.

So now we can move onto the meat of the matter: making an image! Next stage is like so:

$image	= imagecreate( $width, $height );

Next thing is colours... but wait! *dramatic music here* We need RGB colours, and I have provided HEX!!! So lets get converting:

$mc_red	=	hexdec(substr($main_color, 0, 2));
$mc_green	=	hexdec(substr($main_color, 2, 2));
$mc_blue	=	hexdec(substr($main_color, 4, 2));

Simple eh? we substr to get each 2-bit component of the HEX code (RR)(GG)(BB) and then use hexdec to convert it into a decimal. As such 44 will convert into 64 and FF will convert to 255. nifty eh?

So we have an image, and we have a colour. But we dont actually have a colour. We need to allocate it:

$main_color	= imagecolorallocate( $image, $mc_red, $mc_green, $mc_blue );
$brdr_color	= imagecolorallocate( $image, $bc_red, $bc_green, $bc_blue );

Ok, so we now have a correctly sized image, two colours (border + bg) and all that is left is to draw the image.

First we fill the image with the border color. We could draw four lines, but this is much quicker.

imagefill( $image, 0, 0, $brdr_color );

And next draw the main colour over this.

imagefilledrectangle( $image, 1, 1, ($width - 2), ($height-2), $main_color);

And finally we need to output the image to browser, in PNG (or other desired) format:

imagepng($image);
imagedestroy($image);

imagepng outputs it,
imagedestroy removes it from memory (stops the system getting clogged up).

So here is the final thing:

<?php
$main_color 	= $_GET['c'];
	if(!isset($_GET['c'])) {
		$main_color	= "FFFFFF";
	}
$width	= $_GET['w'];
	if(!isset($_GET['w'])) {
		$width = "15";
	}
$height	= $_GET['h'];
	if(!isset($_GET['h'])) {
		$height = "15";
	}
$brdr_color	= $_GET['b'];
	if(!isset($_GET['b'])) {
		$brdr_color = "000000";
	}
	
$mc_red	=	hexdec(substr($main_color, 0, 2));
$mc_green	=	hexdec(substr($main_color, 2, 2));
$mc_blue	=	hexdec(substr($main_color, 4, 2));

$bc_red	=	hexdec(substr($brdr_color, 0, 2));
$bc_green	=	hexdec(substr($brdr_color, 2, 2));
$bc_blue	=	hexdec(substr($brdr_color, 4, 2));
	
$image	= imagecreate( $width, $height );
$main_color	= imagecolorallocate( $image, $mc_red, $mc_green, $mc_blue );
$brdr_color	= imagecolorallocate( $image, $bc_red, $bc_green, $bc_blue );

imagefill( $image, 0, 0, $brdr_color);
imagefilledrectangle( $image, 1, 1, ($width-2), ($height-2), $main_color);

imagepng($image);
imagedestroy($image);

and heres how you might call it: (after saving it as swatch.php)

<img src="swatch.php?c=20AFFF&b=000000" />

Questions, comments, and so on?

[Designer Karly]

How Fab

I'm really pleased with this tutorial, it's not to hard to follow, so thanks for making it easy. I know a use for this already, so that's made my morning, thank you very much.

[php_penguin]

Hey, no problem

There are various improvements you can add for this script, such as accepting 3-bit hex codes (eg 0af becomes 00aaff) and taking in keywords (white, black etc), as well as caching the images.

However, I will let you figure those ones out

[Daemon Byte]

you might want to also do more checks on the GETs like for w and h instead of isset try is_numeric. I don't think anything nasty could be done if it wasn't but I always go on the side of caution

[php_penguin]

no there is nothing that would go badly, as there is no file access or database access going on.

Of course, security is imporant, but I will get out of it with this little thing: "I was writing a tutorial on image creation" ;D

[Daemon Byte]

oh I didn't mean for the tutorial. I meant if somebody was going to use it and maybe put extra things in it maybe consider checking the gets. Not like is_numeric instead of isset really makes the code more complex. It wasn't meant as a critism