Wow, it’s been 5 months since I posted here!  A lot has been going on with work, I took a real vacation, and I’m not so single anymore.  I definitely have a ton of material to blog about, especially in the Powershell realm (go figure…).  Like the script I wrote that will do subnet discovery (IP, PC name, logged in user) with just the input of a single PC.  I’ve also been meaning to post stuff I wrote much longer ago like how I do my logging, how I put everything together in a single console, and maybe even a fun one: “How to send a speech message to another Windows 7 machine :).”  I feel a little bad though… I haven’t touched PS much at all the past few months due to projects at work not leaving me time to play with it as much since they have me going into other realms like Citrix.

Today, I’m going to talk about a little PHP I wrote from scratch to dynamically create a photo gallery on a web page.  I’m building one for my photography and I want the site to be LOW MAINTENANCE!  This means no having to jump into code every time I want to add something or update it.  The only other time I’ve dabbled in PHP is when I created this blog’s theme from absolute scratch.  The code for the image gallery is simple, and I’m sure I could have googled for some code, but I would be much of a Curious Geek if I didn’t try and figure it out on my own.  Since I’m not really a PHP programmer and I don’t know much, I just googled on how to do specific tasks like “PHP list directory” or “PHP dynamically insert html into page.”  Found the functions I needed pretty quick and as a result I have this:

<?php $dirlist = scandir('./Portraits'); ?>

This is the third line of code, below the DOCTYPE and my PHP include (my header for all of my pages).  This is the line of code that actually scans a given directory (In this case, the directory “Portraits” inside the same directory as the php page itself, they both are in the root).  If I were putting the PHP file in the same directory as the photos, it would just be a “.”.  The end of that sentence looks weird…. I assign it to the variable $dirlist so I can reference it later when I’m actually inserting the html.

I guess I should explain the layout of my gallery.  I have the main photo being viewed on the left, and the thumbnails of all the images in the directory on the right of that.  My rows are only 3 thumbnails wide.  I use CSS to set the sizes and layout, which I wont get into here.

Next, we have:

<div class="photoBox" id="photo1">
	<img id="displayImage" src="./Portraits/<?php echo $dirlist[2] ?>">
	<div id="displayCaption" class="caption captionFade"></div>
</div>

This is the div that contains the displayed photo.  The only thing I really want to note here is the insertion of php code into the img src URL.  I want it to start out displaying the first image it finds (the first two values in the array are . and ..).

Now here is the code doing the brunt of the work:

<div class="thumbContainer">
	<?php
		foreach ($dirlist as $imgname) {
			If ($imgname !== "." and $imgname !== ".." and strpos($imgname, 'txt') == false) {  
				$filename = substr_replace($manipulate, "txt", -3, 3); 
				$filepath = './Portraits/' . $filename;
				If (file_exists($filepath)) {
					$innerHTML = file_get_contents($filepath);
				}
				Else {
					$innerHTML = " ";
				}
				$htmlString = '<div class="thumb"><img src="./Portraits/' . $imgname . '" onmousedown="document.getElementById(\'displayImage\').src=\'./Portraits/' . $imgname . '\'; displayCaption.innerHTML=\'' . $innerHTML . '\'"></div>';
				echo $htmlString;				
			}
		}
	?>
</div>

This is the container for the thumbnails, where the end-user clicks images to dynamically change the page.

• Lets start with the ForEach line where I begin the loop.  I’m iterating through each of the values in the array that was returned from listing the contents of the directory.
• On the next line, I’m using an If statement to determine if the value is “.” (current directory), “..” (up a directory/parent directory), or contains .txt in the file name (since my caption files with image information are also here, and obviously aren’t images so they shouldn’t be displayed or tried to load as an image).  strpos is a function to get the position of text in a string.  If the text doesn’t exist, it will either return the boolean false or return 0, which will evaluate to false.  If all of those criteria are met…
• I derive the name of the txt file (the image and text file have the same name, just different extensions) from the name of the image file by replacing the last three characters of the name with “txt” and set that to $filename
• Next, I assemble the entire (relative) path of where the text file should be and assign it to $filepath
  • The reason I don’t use the contents of the array for this is that not all images will have a text file, so this was a bit easier than writing logic to check the array again for the existence…
• Then, I check to see if that file actually exists with the next If statement
• If it does exist, I set $innerHTML to the contents of that text file, otherwise I set the variable to just a space (blank when it shows up).
• I then assemble the entire html string that will create the thumbnail, it’s link, and the javascript that will dynamically change the photobox on the page.  You can see where I use my variables $imgname and $innerHTML to dynamically set the values of the img src’s and the caption text that may or may not accompany an image.
• Then I write that to the page with a simple echo command
• And then the ForEach loop moves on to the next file that was returned in the array to do the next image…

Pretty simple stuff I think.  It didn’t take me long to write it (if you subtract the time it took me to get quotes and php syntax all fixed…).  This way, when I want to add an image and optionally a caption all I have to do is use FTP to upload them to the proper directory… AND THAT’S IT!!  No having to jump into code for every little update!

Thanks to the official PHP 5 manual for telling me how to use a couple functions 🙂