I’ve updated the look of my site. I think it’s a bit more modern. I also got a bit fancy with my background image. I’m obsessed with randomness, so i wanted to make sure I could have a random background image. That part is easy.

< ?
include_once('bggenerator.php');
$bg_file = background_name($_COOKIE['width'],$_COOKIE['height']);
?>
body { background: url(”< ? print $bg_file; ?>“) fixed; }


What’s up with the cookie height and width you say? At first load, i use Javascript to grab the size of each visitors viewing window and store it in a cookie. I then refresh the page. The cookie values are passed to my background generation function which: picks a random image, and resizes it to your specific size. The filepath in the below example is just for show, it gets more specific, especially if you are using WordPress. For the “showExtension” function, go to Google and enter “php showExtension”. It’s located on that first page somewhere.


function background_name($width, $height)
{
$dir = 'bg';
$files = scandir($dir);
$valid_extensions = array('jpg', 'gif', 'png', 'bmp');
foreach ($files as $filename)
{
$filepath = $dir.'/'.$filename;
$tmp_ext = showExtension($filepath);
if(in_array($tmp_ext,$valid_extensions))
{
$backgrounds[] = $filepath;
}
}
$rand_key = array_rand($backgrounds);
$filename = $backgrounds[$rand_key];
list($name, $ext) = explode('.',$filename);
$ext = strtoupper($ext);
$bg_file = "$name.$height-$width.$ext";
if(file_exists("$bg_file"))
{
return $bg_file;
}
else
{
createbg("$filename","$bg_file",$width,$height);
}
return $bg_file;
}


My createbg function takes an image name, a desired new name, and the size to change the image to.

/*
Function createthumb($name,$filename,$new_w,$new_h)
creates a resized image
variables:
$name Original filename
$filename Filename of the resized image
$new_w width of resized image
$new_h height of resized image
*/
function createbg($name,$filename,$new_w,$new_h)
{
$system=explode(".",$name);
if (preg_match("/jpg|jpeg/",$system[1])){$src_img=imagecreatefromjpeg($name);}
if (preg_match("/png/",$system[1])){$src_img=imagecreatefrompng($name);}
$old_x=imageSX($src_img);
$old_y=imageSY($src_img);
$dst_img=ImageCreateTrueColor($new_w,$new_h);
imagecopyresampled($dst_img,$src_img,0,0,0,0,$new_w,$new_h,$old_x,$old_y);
if (preg_match("/png/",$system[1]))
{
imagepng($dst_img,$filename);
}
else
{
imagejpeg($dst_img,$filename);
}
imagedestroy($dst_img);
imagedestroy($src_img);
}


And there you have it. Random backgrounds that are resized to your visitors window sizes. This is probably going to take up a lot of space in my directories, so if space is important for you, you might want to just use the random part.

This entry was posted on Saturday, September 23rd, 2006 at 4:39 am and is filed under Ideas, Web Development, Web Projects. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.