Google Picasa API with Javascript

September 25, 2014

Mit Picasa bietet Google einen genialen Service Foto Sammlungen Online/Offline zu verwalten. Doch das ist noch lange nicht alles, mit der Google Picasa API ist es einfach Fotos in eine eigene Seite zu integrieren. Die Beispiele auf der Google Seite sind leider für Java Programmier, selbstverständlich ist jedoch jede Programmiersprache verwendbar. Ich habe in diesen Fall PHP5 und den neuen SimpleXML Parser verwendet.

Die API lässt sich über RSS Feeds ansprechen, folgendes Beispiel liefert ein Atom Feed mit dem Index aller Fotos für den Google Account “cssguru”, der Parameter thumbsize gibt die max. Größe der Thumbnails an:

http://picasaweb.google.de/data/feed/api/user/cssguru?kind=album&thumbsize=288

Alles was wir nun tun müssen ist die Daten durch den SimpleXML Parser zu jagen. Leider ist dies doch nicht ganz so simple da Atom Feeds XML Namespaces verwenden. Die folgende PHP Funktion implementiert zusätzlich einen Cache, das XML Feed wird nur von der Google Seite geladen falls die lokale Version älter als 2 Stunden ist.

/* ----- Data Functions ----- */

function parseFeed($location) {
	global $ns, $picasa_user;
	$absolutePath = dirname(__FILE__);
	$cache = $absolutePath.'/cache/yws_'.md5($location);

	//The cached material should only last for 2 hours, so you need the current time.
	$currentTime = microtime(true);
	$tempdir = sys_get_temp_dir();
//	$tempdir = '/home/www/web0/phptmp';

	//First check for an existing version of the time, and then check
	//to see whether or not it's expired.
	if(file_exists($cache) && filemtime($cache) > (time()-7200)) {

		error_log("cached...");
		//If there's a valid cache file, load its data.
		$feedXml = file_get_contents($cache);
	}
	else {
		error_log("NOT cached...");
		//If there's no valid cache file, grab a live version of the
		//data and save it to a temporary file.  Once the file is complete,
		//copy it to a permanent file.  (This prevents concurrency issues.)
		$feedXml = file_get_contents($location);
		$tempName = tempnam($tempdir,'YWS');
		file_put_contents($tempName, $feedXml);
		rename($tempName, $cache);
	}

	$feed = simplexml_load_string($feedXml);
	$feed_arr = array();
	$i = 0;

	$feed_arr['channel']['user'] = $picasa_user;
	$feed_arr['channel']['editor'] = (string)$feed->author->name;
	$feed_arr['channel']['icon'] = (string)$feed->icon;
	$feed_arr['channel']['id'] = (string)$feed->id;


	foreach ($feed->entry as $item) {
		$ns_gphoto = $item->children($ns['gphoto']);
		$ns_media = $item->children($ns['media']);
		$thumb_attr = $ns_media->group->thumbnail->attributes();
		$con_attr = $ns_media->group->content->attributes();

		$feed_arr['entry'][$i]['id'] = (string)$ns_gphoto->id;
		$feed_arr['entry'][$i]['title'] = (string)$ns_media->group->title;
		$feed_arr['entry'][$i]['timestamp'] = (string)$ns_gphoto->timestamp/1000;
		$feed_arr['entry'][$i]['thumbnail'] = (string)$thumb_attr['url'];
		$feed_arr['entry'][$i]['albumid'] = (string)$ns_gphoto->id;		
		$feed_arr['entry'][$i]['thumbnail_w'] = (int)$thumb_attr['width']*2;
		$feed_arr['entry'][$i]['thumbnail_h'] = (int)$thumb_attr['height']*2;
		$feed_arr['entry'][$i]['content'] = (string)$con_attr['url'];
		$i++;
	}

	return $feed_arr;
}

Unsere parseFeed() Funktion gibt einen Array zurück den wir direkt einen Template zuweisen. Ich verwende dazu templatelite[templatelite], die Template Syntax ist mit Smarty smarty nahezu kompatibel.

<h2>Öffentliche Galerie von {$feed.channel.editor}</h2>

{ foreach key=key value=item from=$feed.entry }
	<h2 class="goright">{$feed.entry[$key].title}</h2>

	<a href="?photos={$feed.entry[$key].id}"><img src="{$feed.entry[$key].thumbnail}" alt="{$feed.entry[$key].thumbnail|basename}" /></a><br />
	<hr />
{ /foreach }

Das war soweit bereits alles um einen Index aller öffentlichen Fotos anzuzeigen.


Warner HardnailerWritten by Warner Hardnailer who lives and works in Schwabenland and building useful things for the Web? You should follow him on Twitter & Github