Demonstrating designs to clients using PHP's file and image functions
Here's something I picked up from the designers at Catch Digital. When showing site mockups to a client, they would create a directory of images, and build a series of simple HTML pages, each one linking to the next. This allows the clients to click through each mockup and easily see all the designs. The last
The directory would be protected by an .htaccess password, so that only authorised people are able to view the designs.
I've improved the process by using PHP to loop through the directory and create links for each image.
$directory = opendir(".");
$file_types = array('png', 'jpg', 'jpeg', 'gif');
$files = array();
while($file = readdir($directory)) {
$extension = substr(strtolower(strrchr($file, '.')), 1);
if(in_array($extension, $file_types)) {
$files[] = array('file' => $file, 'ext' => $extension);
}
}
For each image, I fetch the background colour of the mockup using the imagecoloratfunction, which is part of the GD library.
switch($extension) {
case 'png' :
$im = imagecreatefrompng($img);
break;
case 'jpeg':
case 'jpg' :
$im = imagecreatefromjpeg($img);
break;
case 'gif' :
$im = imagecreatefromgif($img);
break;
}
$rgb = imagecolorat($im, 1, 1);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
Then within the CSS, set the background colour to match the image file.
body {
margin: 0;
<?php
if($rgb) {
print "background-color: rgb($r, $g, $b)";
}
?>
}
File:
