Orkut Application Platform

On-Site Application Developer Guide: Photos, Part 2

Now that we have covered the most common operations you will need to do with Albums, let's move on to individual photos. As we have seen before, photos are always part of an album, so to list photos, you will need to supply an album ID. This ID can come from the albums listing that we saw in the Photos, part 1 section.

Contents

Listing Photos in an Album

To list the photos in an album, you have to issue a FetchMediaItemsRequest:

var idspec = opensocial.newIdSpec({'userId':'VIEWER'});
var albumId = /* the ID of the album you want to list */
var req = opensocial.newDataRequest();
req.add(req.newFetchMediaItemsRequest(idspec, albumId), 'photos');
req.send(callback);

When your callback is called, the photos will be available in the response data:

function callback(resp) {
   if (resp.hadError()) {
      debug.say("*** error loading album.");
      // ...handle error here...
      return;
   }
   var photos = resp.get('photos').getData().asArray();
   for (var i in photos) {
      // ... do something with the photo here ...
  }
}

Here is a full example that lists the albums and then lists the photo in each album in order to get all of the user's photos and display them in one huge mosaic.

<div id='photos'>Loading...</div>
<script type='text/javascript'>
function init() {
   var req = opensocial.newDataRequest();
   var idspec = opensocial.newIdSpec({'userId':'VIEWER'});
   req.add(req.newFetchAlbumsRequest(idspec),'albums');
   req.send(onLoadAlbums);
}

var albums = [];
var mosaicHtml = [];
var nextAlbumToLoad = 0;

function onLoadAlbums(resp) {
   if (resp.hadError()) {
      debug.say("*** error: " + resp.getErrorMessage());
      try {
         debug.say("*** details: " + resp.get('albums').getErrorMessage());
      } catch (ex) {}
      return;
   }

   debug.say("Response received successfully. Listing albums.");
   albums = resp.get('albums').getData().asArray();
   debug.say(albums.length + " albums returned.");
   requestNextAlbum();
}

function requestNextAlbum() {
   if (nextAlbumToLoad >= albums.length) {
      displayPhotos();
      return;
   }
   debug.say("Requesting album " + nextAlbumToLoad);
   var idspec = opensocial.newIdSpec({'userId':'VIEWER'});
   var albumId = albums[nextAlbumToLoad].getId();
   var req = opensocial.newDataRequest();
   req.add(req.newFetchMediaItemsRequest(idspec, albumId), 'photos');
   req.send(onAlbumArrived);
}

function onAlbumArrived(resp) {
   if (resp.hadError()) {
      debug.say("*** error loading album.");
      return;
   }
   var photos = resp.get('photos').getData().asArray();
   debug.say("Album fetched. Listing photos (" + photos.length + ").");

   for (var i in photos) {
      mosaicHtml.push("<img src='");
      mosaicHtml.push(photos[i].getField(opensocial.MediaItem.Field.THUMBNAIL_URL));
      mosaicHtml.push("'>");
   }

   nextAlbumToLoad++;
   requestNextAlbum();
}

function displayPhotos() {
   debug.say("Done. Displaying.");
   document.getElementById('photos').innerHTML = mosaicHtml.join('');
}

gadgets.util.registerOnLoadHandler(init);

</script>

You noticed that we used the getField() function on the photo object. This function will retrieve the specified field according to the parameter:

  • opensocial.MediaItem.Field.THUMBNAIL_URL - the URL of the photo's thumbnail
  • opensocial.MediaItem.Field.URL - the URL of the actual photo
  • opensocial.MediaItem.Field.TITLE - title of the photo

Uploading Photos

Orkut does not yet support uploading a photo specified by URL (which would require support for MediaItem creation). Instead, what is available is a way to have the user choose some photos from his disk to upload to a specific album:

var albumId = /* your album ID here */;

opensocial.requestUploadMediaItem(albumId,callback);

function callback(resp) {
   if (resp.hadError()) {
      debug.say("Error: " + resp.getErrorMessage());
   }
   else debug.say("success.");
}

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.