Hosting Your Own Free Sexy Photo Gallery

11.04.2008

By sexy I mean good-looking but I knew using the words “free”, “sexy”, and “photo” in a post title would be worth at least 50 Google bonus points, so I couldn’t pass it up.  Here’s the premise of my post:

1) I have my own web server (which supports PHP).

2) I’m too cheap to purchase good photo gallery software.

3) I’m too cheap to pay for photo-hosting services like Google Picasa or Flickr.

4) I want my photo gallery to be sexy (smooth, clean, silently loads upcoming photos, doesn’t have to load a new page for each photo, etc.).

5) I want my photo gallery to be able to support categories/events.

6) I want to be able to host hundreds of photos.

5) I want my photo gallery to be as hassle-free as possible.

So, after looking at my options, I found they were much more limited than I had hoped.  Don’t get me wrong–there were a lot of options, just not a lot of good ones.  In the end, I found a solution that seems to appease me for the time being.  Here’s the end result for all you instant-satisfaction-seekers: http://hardyhacienda.com/photos/

Now onto the good stuff.  The photo gallery takes advantage of SimpleViewer made by Felix Turner/Airtight Interactive as well as the Google Picasa desktop application. To start, follow the SimpleViewer instructions but stop after you get done with step #2.  Go ahead, I’ll wait.

Okay, now that you’ve got the SimpleViewer template installed, we want to tweak it just a bit.  Open up C:\Program Files\Picasa2\web\templates\simpleviewer_picasa_template\header.xml and change the contents to the following:

<?xml version="1.0" encoding="UTF-8"?>
<simpleviewergallery maxImageWidth="1024" maxImageHeight="1024" textColor="0xFFFFFF" frameColor="0xFFFFFF" frameWidth="20" stagePadding="40" navPadding="40" thumbnailColumns="3" thumbnailRows="3" navPosition="left" vAlign="center" hAlign="center" title="<%exportDescription%>" enableRightClickOpen="true" backgroundImagePath="" imagePath="" thumbPath="thumbnails/" albumDate="<%albumDate%>">

Now restart Picasa.

What we’ve done here is added the albumDate property to our album template. This means when we export an album from Picasa, Picasa will include a property in the album’s accompanying XML file stating the median date of when the album’s photos were taken. This will later allow us to automatically order our albums according to the date.  Note that this date property is formatted as month/year only, so if you have two albums with median dates in the same month they may get sorted in the wrong order.  This is a limitation of Picasa that I feel Google should address.  The good news is that albums with median dates in different months will be sorted correctly. Feel free to reference The Picasa Web Templating System if you’re interested in learning more.

Now that we have our template configured correctly for our needs, continue with the remaining steps in the SimpleViewer instructions.

If you continue steps 3-6 for each album (what SimpleViewer calls gallery) you’d like to show up in your gallery, you’ll have all your albums on your web server.  At this point you can access each album individually by typing in the album’s address like http://hardyhacienda.com/photos/Yellowstone/ or http://hardyhacienda.com/photos/Moab/ in your browser.  What we want though is a central gallery that then links to the individual albums.

Here’s how we do it.  Create a file named index.php on your web server in the directory that contains all your album directories.  Add the following to index.php:

<html>
	<head>
		<title></title>
		<style>
			body {
				background-color: #181818; 
				color: #ffffff;	
				font-family: "Arial",Helvetica,sans-serif;
				font-size: .9em;
			}
 
			h2 {
				font-family: "Georgia",Times,serif;
				font-size: 22px;
				margin: 0px;
			}
 
			ul {
				margin: 10px 0 0 0;
				padding: 0;
				border-bottom: 1px solid #3e3e3e;
			}
 
			li {
				list-style-type: none;
				padding: 5px 0 5px 0;
				margin: 0;
				border-top: 1px solid #3e3e3e;
			}
 
			a:link, a:visited, a:active {
				color: #00F6FE;
				text-decoration: none;
			}
 
			a:hover {
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<div style="float:left; width: 20%; height: 100%; overflow: auto;">
			<div style="padding: 20px">
				<h2>Galleries</h2>
				<ul>
				<?
 
				$albums = array();
				$mydir = dir('./');
				while(($file = $mydir->read()) !== false)
				{
					if ($file != "." && $file != ".." && is_dir($file))
					{
 
						$doc = new DOMDocument();
						$doc->load("./$file/gallery.xml");
						$albumDate = strtotime(
								$doc->getElementsByTagName("simpleviewergallery")->
								item(0)->getAttribute("albumDate"));
 
 
						$album = array(
								"date" => $albumDate,
								"name" => $file);
 
						$albumInserted = false;
						for ($i = 0; $i <= count($albums); $i++)
						{
							if ($album["date"] > $albums[$i]['date'])
							{
								$albumInserted = true;
								array_splice($albums, $i, 0, array($album));
								break;
							}
						}
 
						if (!$albumInserted)
						{
							$albums[] = $album;
						}
					}
				}
 
				foreach($albums as $album)
				{
					echo "<li><a href=\"#\" onclick=\"frames['viewer'].location.href = '" . 
							$album['name'] . "'; return false;\">" . $album['name'] . "</a><br>";
				}
 
				$mydir->close();
				?>
				</ul>
			</div>
		</div>
		<div style="float:left; width: 80%; height: 100%">
			<iframe name="viewer" src="directions.php" style="float:left; width:100%; height:100%; border:0;" frameborder="0"></iframe>
		</div>
	</body>
</html>

What we’re doing here is making a menu on the left side of the page that contains links to each of our albums which also happen to be subdirectories. We’re reading the gallery.xml file that accompanies each album to find the median date of the photos taken (thanks to our tweak to the SimpleViewer template). We’re then sorting the albums by that date ordered from most recent to least recent and creating a link for each album. On the right side of the page, we have an iframe. This iframe will act as a container that will hold each album as it is loaded.

In my case, the iframe by default displays a directions.php page which essentially just instructs the user to select an album by clicking a link on the left side of the page. When an album’s link is clicked, the directions.php page will be replaced by the album’s page in the iframe. If everything was set up right, you should now be hosting your own free sexy photo gallery!

I know this isn’t the most comprehensive or detailed of posts, so if you have any feedback or questions, please feel free to post a comment. Good luck!

Tags: , ,


Comments

11.11.2008 / Andy said:

Aaron

I am still caught in the same struggle — mine is a bit harder because I am not a php god — but I am still looking for a good free album / picture organizer / viewer. I like the frame and viewer idea — however the static coding gets old — trust me :) I’ve been doing it now for almost 2 years. I’ll admit that I’ve been pretty lazy with it and haven’t spent the time to create my own album page — but I have found a great plugin for WordPress that lets you imbed a gallery into a post using AJAX and lightbox and it is pretty straightforward to manage and implement. It is called NextGen Gallery. It might be something to look at for posting inline blog photos rather than deferring to a gallery page.

If your box is hosted on Linux look at gscripts for some handy photo-resizing and renaming scripts to batch process your photo galleries — makes it easy to size down thumbnails and photos for optimized load time. A good mass renaming script I’ve found is called mvb — if you can’t find it (I think it is no longer supported) let me know cuz I’ve got a copy on my server.

I had to laugh when I saw your wife’s preggar pictures because my wife is super self-conscious about her belly button too :). It is a pretty awesome feeling to feel the little thing moving around inside the belly!!

Woot!

11.11.2008 / Andy said:

**oops that is what i get for opening my mouth before looking at your code rather than looking at the page source :) No static coding!! Yay!


Leave a Comment

Your email address is required but will not be published.




Comment