How to display photos from Picasa on your website

Since I’m with Google – and all Google accounts have 1GB space for Picasa Web Albums – I put all my online photo galleries on Picasa Web some time ago. Currently I’m working on a redesign of my other blog and I wanted to have a little sidebar widget that displays random photo thumbnails from my Picasa albums. I didn’t even bother searching for one and simply wrote it myself, one other thing I like about Google is the abundance of API’s for their services – great for developers.

There are several ways for accessing Google services like Picasa Web. The ‘offical’ way is to use the Google Data API client libraries, in case of PHP the library is built into the Zend Framework. Or you can simply download the Zend_Gdata standalone package, but still it is several MB’s big. An alternative way for accessing Picasa is to use an XML tool like the SimpleXML library that comes built-in with PHP. Since the Picasa API is all about XML this is what I used in the following example.

If you plan to do complex API transactions like uploading and editing, you might want to have a look at the Gdata package, since it provides easy support for authentication and other actions. But what I’m trying in this example here is only fetching photos from a public stream – the most basic of all actions – so this can easily be done without the Gdata libraries.

The Code

The following code is a simple example of how to fetch album and photo information from public Picasa Web albums. This is done by reading the XML feeds that Google provides. In the example 5 random albums are chosen from a list of available ones, then for each chosen album the corresponding photo feed is loaded and 2 random photos are selected.

// replace this with your Google/Picasa user ID
// e.g. if your email is 'test@gmail.com', your ID is 'test'
$user = 'your_google_account';

// the list of available Picasa Web Albums
$albumlist = array(
  'Title of album 1',
  'Title of album 2',
  'Title of album 3',
  'Title of album 4',
  'Title of album 5',
  'Title of album 6',
  'Title of album 7',
  'Title of album 8',
  'Title of album 9',
  'Title of album 10'
);

// choose 5 random albums from the list
$album_select = array();
foreach (array_rand($albumlist, 5) as $key) :
  $album_select[] = $albumlist[$key];
endforeach;

// the feed URLs from where album and photo information will be fetched
$album_feed = 'http://picasaweb.google.com/data/feed/api/user/' . $user . '?v=2';
$photo_feed = 'http://picasaweb.google.com/data/feed/api/user/' . $user . '/albumid/';

// read album feed into a SimpleXML object
$albums = simplexml_load_file($album_feed);

$result = array();
foreach ($albums->entry as $album) :

  // if album is one of the chosen ones, continue
  if (in_array($album->title, $album_select)) :

    // get the number of photos for this album
    $photocount = (int) $album->children('http://schemas.google.com/photos/2007')->numphotos;

    // choose 2 random photos from this album
    $photo_select = array_rand(range(1, $photocount), 2);

    // get the ID of the current album
    $album_id = $album->children('http://schemas.google.com/photos/2007')->id;

    // read photo feed for this album into a SimpleXML object
    $photos = simplexml_load_file($photo_feed . $album_id . '?v=2');

    $i = 0;
    foreach ($photos->entry as $photo) :
      if (in_array($i, $photo_select)) :
        $temp = array();                    

        // get the photo and thumbnail information
        $media = $photo->children('http://search.yahoo.com/mrss/');

        // full image information
        $group_content = $media->group->content;
        $temp['full_url'] = $group_content->attributes()->{'url'};
        $temp['full_width'] = $group_content->attributes()->{'width'};
        $temp['full_height'] = $group_content->attributes()->{'height'};

        // thumbnail information, get the 3rd (=biggest) thumbnail version
        // change the [2] to [0] or [1] to get smaller thumbnails
        $group_thumbnail = $media->group->thumbnail[2];
        $temp['thumbnail_url'] = $group_thumbnail->attributes()->{'url'};
        $temp['thumbnail_width'] = $group_thumbnail->attributes()->{'width'};
        $temp['thumbnail_height'] = $group_thumbnail->attributes()->{'height'};

        $temp['album'] = $album->title[0];
        $result[] = $temp;
      endif;
      $i++;
    endforeach;

  endif;
endforeach;

After some random albums have been selected, the user’s album feed is loaded. For the selected albums we then grab the number of photos, choose two random ones and get their thumbnails information as well as the link to the full image.

If you’re at least a bit familiar with PHP and XML, then the code should be pretty straight forward and can give a good understanding on how to read Picasa information with SimpleXML. Reading my comments can be helpful too.

The above code produces a result array that can be used like this:

shuffle($result);

// display results
foreach ($result as $r) :
  echo '<a href="'.$r['full_url'].'" title="'.$r['album'].'">
    <img src="'.$r['thumbnail_url'].'" width="'.$r['thumbnail_width'].'" height="'.$r['thumbnail_height'].'" alt="'.$r['album'].'" />
  </a>';
endforeach;

You can easily modify the code here and wrap it into widgets or plugins, e.g. for WordPress like I did. However I suggest caching the images somehow, since it can be very slow to load the data. It might be possible to do further code optimisation, I don’t claim to be the world’s greatest PHP developer, this is simply a basic example on how to work with the Picasa Web API.