Regardless of your opinions about .mac, Apple's recent upgrade includes a slick new photo gallery that the iPhone can post to very easily. Any image on your phone can be posted to one of your galleries with a tap of your finger. Since the galleries export "Photocast" XML feeds, it's easy to grab the feeds and do whatever we want with them. And what we want to do is display thumbnails of the most recent posts, and have a lightbox popup to display the full size images when the thumbs are clicked.

The end result is a way to post photos from your iPhone to your site with a minimum amount of effort. My example uses PHP and Smarty, but it's easy enough to adapt to any setup.


The first thing you need to do is set up a gallery that can be dedicated to photos you want to appear on your site. This gallery needs to be set up to receive posts via email. This article explains the process in detail.

Test the upload from your iPhone and make sure everything is working properly. Get the URL to the Photocast feed from the "Subscribe" link in the gallery display.

Once your gallery is created, configured, and tested, it's time to set up the script that will pull the gallery feed and process it into something that's easy to work with. I run this script from cron at regular intervals to keep everything up to date. The script caches the relevant content in a file that can be included into your page. This keeps your page load snappy since you're loading only the data you need, and from a local source.

<?php
/**
* Gallery feed URL
*/
$remotefile = "http://gallery.mac.com/rob.ruchte/100019/?webdav-method=truthget&feedfmt=photocastrss";

/**
* Local XML file
*/
$localXmlFile = 'dotmac_photo.xml';

/**
* Local file to hold our serialized data
*/
$localSerFile = 'dotmac_photo.ser';

/**
* Set the number of latest photos to display
*/
$displayLimit = 5;

/**
* Fetch the feed and save it locally in case you want it for something else
*/
$ch = curl_init($remotefile);
$fp = fopen($localXmlFile, "w");

curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);

curl_exec($ch);
curl_close($ch);
fclose($fp);

/**
* Load the cached feed and iterate through the images until the set displayLimit is reached
*/
$dom = new DomDocument('1.0');
$dom->load('dotmac_photo.xml');
$items = $dom->getElementsByTagName('item');

$dotmacPhotos = array();
$i = 0;
foreach ($items as $currPhoto)
{
    if ($i >= $displayLimit)
    {
        break;
    }

    $outputPhoto = array();

    $titles = $currPhoto->getElementsByTagName('title');
    $outputPhoto['title'] = $titles->item(0)->nodeValue;

    $thumbnails = $currPhoto->getElementsByTagName('thumbnail');
    $outputPhoto['thumbnail'] = $thumbnails->item(0)->nodeValue;

    $enclosures = $currPhoto->getElementsByTagName('enclosure');
    $enclosure = $enclosures->item(0);
    $outputPhoto['medium'] = $enclosure->getAttribute('url');

    $links = $currPhoto->getElementsByTagName('link');
    $outputPhoto['full'] = $links->item(0)->nodeValue;

    $dotmacPhotos[] = $outputPhoto;
    $i++;
}

/**
* Serialize our data array and save it to the specified file
*/
$fp = fopen($localSerFile, "w");
fwrite($fp, serialize($dotmacPhotos));
fclose($fp);


Now you can pull the cached data into your page, unserialize it, and pass it into your template.

/**
* Include serialized data from cache file, unserialize, and assign the
* array to Smarty. 
*/
$dotmacPhotosSerialized = file_get_contents('dotmac_photo.ser');
$dotmacPhotos = unserialize($dotmacPhotosSerialized);

$smarty->assign('dotmacPhotos', $dotmacPhotos);


Now in your template, include the lightbox JS and CSS, then loop through your array of image data to build the HTML.

Detailed instructions for Lightbox 2 can be found on Lokesh Dhakar's project page

<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
<h2>recently seen</h2>
<div>
    {foreach from=$dotmacPhotos item=currItem name=dotmacPhotos}
      <div>
          <div align="center">
           <a href="{$currItem.full}" rel="lightbox[iphone]" title="{$currItem.title}">
               <img src="{$currItem.thumbnail}" alt="{$currItem.title}" />
           </a>
           <br />
          {$currItem.title|truncate:38}
          </div>
      </div>
    {/foreach}
</div>


And that's all there is to it. If you're not using Smarty, the example should be clear enough to adapt to pretty much any display method. You can see a working example on my homepage.