Generating iPhone promotional banner ads : Design blog

Generating iPhone promotional banner ads

August 11, 2009

I was looking for a different way to promote iPhone applications online (something a little more engaging than the "Available on the iPhone App Store" banner)...

Because I had been manually taking screen shots and compositing them into an iPhone frame, I decided to write a script to automatically do that -- as well as resize them if I had a specific destination size.

This way, I only needed to upload images into the source directory, and then send a different filename into a path similar to:

(I also had the script cache the files, so it didn't have to regenerate them every time)

<?
$img = $_GET['img'];
$w = $_GET['w'];
$h = $_GET['h'];
 
// remove the extension from the source image
// assumes a .jpg extension
$imgName = substr ($img, 0, -4);
$imgExtension = 'jpg';
header ("Content-type: image/jpeg");
 
$fileName = "_media/cache/" . $imgName . "_" . $w . "_" . $h . "." . $imgExtension;
 
// check to see if image exists, if so, display it
 
if (file_exists ($fileName)) {
    readfile ($fileName);
} else {
    $im = imagecreatetruecolor ($w, $h);
    
    $background_color = imagecolorallocate($im, 255, 255, 255);
    
    imagefilledrectangle($im, 0, 0, $w, $h, $background_color);
    
    // hard-coded values of the iPhone overlay, to save time in loading and reading width/height values
    $oldW = 389;
    $oldH = 811;
    
    $oldAspect = $oldW / $oldH;
    $newAspect = $w / $h;
    
    if ($oldAspect < $newAspect) {
        $newH = $h;
        $newW = $oldW / ($oldH / $h);
        $newX = ($w / 2) - ($newW / 2);
        $newY = 0;
    } else {
        $newW = $w;
        $newH = $oldH / ($oldW / $w);
        $newX = 0;
        $newY = ($h / 2) - ($newH / 2);
    }
    
    // import the image, position, and resize
    $im_screen = imagecreatefromjpeg ("_media/source/$img");
    // make a blank white image, same size as the overlay
    $im_promo = imagecreatetruecolor ($oldW, $oldH);
    imagefilledrectangle($im, 0, 0, $oldW, $oldH, $background_color);
    // position the screen shot on it (just a copy -- we're not resizing it yet)
    imagecopy ($im_promo, $im_screen, 36, 120, 0, 0, 320, 480);
    // now, resize the promo to fit the new aspect ratio
    imagecopyresampled ($im, $im_promo, $newX, $newY, 0, 0, $newW, $newH, $oldW, $oldH);
    imagedestroy ($im_promo);
    
    
    // import the overlay, position, and resize
    $im_iphone = imagecreatefrompng ("_media/iphone/iphone_overlay.png");
    imagecopyresampled ($im, $im_iphone, $newX, $newY, 0, 0, $newW, $newH, $oldW, $oldH);
    imagedestroy ($im_iphone);
    
    
    imagejpeg ($im, $fileName);
    imagedestroy($im);
    
    readfile ($fileName);
 
}
?>