PHP5 directory browsing/image display utility, Part 1

I wrote this PHP5 utility as a quick and easy way to present design mockups to a reviewing party. It needed to be short and simple enough for a Designer to understand (and not freak out) and copy/paste.

This script will read through a directory, either a default one, or one passed to the page via query string. It automatically reads every file in the given directory and displays the images found there. The Designer can name the files anything they want and they don’t have to edit any XML files. This code can also be used to spit data out to either HTML or Flash.

<?php $version = htmlspecialchars($_GET["version"]); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>creative presentation</title>
    <link rel="stylesheet" href="css/common.css" type="text/css">		
</head>
<body>

<div id="container">
<h1> Here're the images</h1>

<?php		

	$contnt1 = "";
	$contnt2 = "";
	$myArr = array();	
	
	if($version == null) 			 
		$version = "images"; 
	
	$myDir = opendir($version);		
	while (false !== ($file = readdir($myDir)))
    {
		if($file != "." && $file != ".." && $file != ".DS_Store")
		{				
			//$contnt1 = "file name = ".$file."<br />";
			//echo $contnt1."<br><br>";
			array_push($myArr, $file);
		}
	}
	closedir($myDir);	
	
    $contnt2 = spitOutImgs("html", $version, $myArr);	
	echo $contnt2;	

	function spitOutImgs($whichFrontEnd, $version, $arr)
	{
		for($i = 0; $i < count($arr); $i++)
		{	
			$pth = $version."/".$arr[$i];
			$s = getimagesize($pth);
			if($whichFrontEnd == "html"){				
				$c2 = "<div class='dv1'><img src='".$version."/".$arr[$i]."' /><br />".$s[0]."x".$s[1]."</div>";	
			} else if($whichFrontEnd == "flash") {
			    $c2 = $version."/".$arr[$i];
			}	
			echo $c2; 		
		}
	}		
	
?>

</div>
</body>
</html>

In Part 2, I rewrite the above code as a Class file.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s