How to Integrate Google Picasa into your website with PHP Part2

In this follow on article to ‘How to Integrate Google Picasa into your website with PHP‘ I will explain how to display thumbnails of the photos contained in your Google Picasa albums.

Step by Step

Step 1

Firstly, make sure you have familairised yourself with Part 1 of this series

Step 2

Set up the variables to grab the photo album id, the photo id and the page number . A little explanation, $albumId grabs the album id from the album thumbnail you clicked. $page is the page number being displayed. $maxResults is the number of photos to display on a page.

    $albumId = $_GET['albumId'] ;
    $page = $_GET['page'];
 
    // the size of the photo to embed 
    // 800 is the max size google allow you to embed
    // The acceptable values are 144, 288, 400, 640,s720 and 800
    $maxImageSize = 800;  

Step 3

Load the required Zend classes and authenticate

    require_once 'Zend/Loader.php';
    Zend_Loader::loadClass('Zend_Gdata_Photos');
    Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
    Zend_Loader::loadClass('Zend_Gdata_AuthSub');
    Zend_Loader::loadClass('Zend_Gdata_Photos_PhotoQuery');
    Zend_Loader::loadClass('Zend_Gdata_Photos_AlbumQuery');
 
    // Authenticate
    // Parameters for ClientAuth authentication
    $serviceName = Zend_Gdata_Photos::AUTH_SERVICE_NAME;
    $user = "username";
    $pass = "password";
  
    // Create an authenticated HTTP client
    $client = Zend_Gdata_ClientLogin::getHttpClient($user, $pass, $serviceName);
    $photos = new Zend_Gdata_Photos($client);  
 

Step 4

The meat and veg…

function outputPhotoFeed($client, $user, $albumId, $photoId, $numResults, $maxResults, $page)
{
  global $maxImageSize ;
    $photos = new Zend_Gdata_Photos($client); 
 
    // List photos from album
    if( !isset($albumId)) 
    {
    ?>
        <div class="grid">
        <p>Choose a photo album to view.</p>    
        </div>      
    <?php
    } 
    else 
    {
    $query = $photos->newAlbumQuery();
        $query->setUser("default");
        $query->setAlbumId($albumId);
        $query->setImgMax($maxImageSize); 
        $query->setMaxResults($maxResults);
 
        if(isset($page)) 
        {
            $query->setStartIndex((($page-1) * $maxResults)+1);
        }
    ?>
        <div class="grid">
        <?php  
        try 
        {  
            $albumFeed = $photos->getAlbumFeed($query);
            // Number of results
            $numResults = $albumFeed->gphotoNumPhotos->text;
 
           $albumName = $albumFeed->getTitle();
       ?> <h3>Photos from <?php echo $albumName ?></h3>
     
     <?php
 
            // You should probably check if $numResults is a number...
            // If there are more than $maxResults, we need to paginate this...
            $numPages = ceil($numResults / $maxResults);
 
            if($numPages > 1) 
            {              
                echo Paginate( $numPages, $page, $albumName, $albumId);
            }
 
      foreach ( $albumFeed as $photoEntry) 
      {
        // get image title
        // $title = $photoEntry->getTitle();
        // echo "title = $title";
        $contentUrl = "";
        $thumbnailUrl = "";
        
        $title = $photoEntry->getSummary();
 
                if ( $photoEntry->getMediaGroup()->getContent() != null) 
                {
          $mediaContentArray = $photoEntry->getMediaGroup()->getContent();
          $contentUrl = $mediaContentArray[0]->getUrl();
                }
 
                if ( $photoEntry->getMediaGroup()->getThumbnail() != null) 
                {
          $mediaThumbnailArray = $photoEntry->getMediaGroup()->getThumbnail();
          $thumbnailUrl = $mediaThumbnailArray[1]->getUrl();
                }
 
                echo "<div class='photo'><a title='" . $title ."' rel='lightbox[$albumId]' href='".$contentUrl."'><img src='" . $thumbnailUrl . "' alt='" . $photoEntry->title->text ."' title='" . $title ."' /></a></div>\n"; 
 
            }
 
            echo "<div style='clear:both;margin-bottom:6px;'>&nbsp;</div>";
 
            if( $numPages > 1) 
            {              
                echo Paginate( $numPages, $page, $albumName, $albumId);
            }
        } 
 
        catch (Zend_Gdata_App_HttpException $e) 
        {
            echo "Error: " . $e->getMessage() . "<br />\n";
            if ($e->getResponse() != null) 
            {
                echo "Body: <br />\n" . $e->getResponse()->getBody() . 
                     "<br />\n"; 
            }
        } 
 
        catch (Zend_Gdata_App_Exception $e) 
        {
            echo "Error: " . $e->getMessage() . "<br />\n"; 
        }
        ?>
        </div>
    <?php
    }
}

Step 5

Call the main function

outputPhotoFeed($client, $user, $albumId, $photoId, $numResults, $maxResults, $page) ;
 

Step 6

Paging through the result set is managed with the function ‘Pages()’

function Pages( $numPages, $currentPage, $albumName, $albumId) 
    {
      // Create page links
      $pagination = "<ul class='page-nav'>\n";
    
      for( $i=1 ; $i <= $numPages ; $i++ ) 
      {
        $class = "";
        // Is this the current page current page?
        // add class
        if( $i == $currentPage) 
        {
          $class = " class='selected'";
        }
    
        $pagination .= "<li".$class.">";
        $pagination .= "<a href='?albumId=".$albumId."&amp;albumName=".$albumName."&amp;page=".$i."'>".$i."</a></li>\n";
      }
    
      $pagination .= "</ul>\n";
    
      return $pagination;
    }
 

Conclusion

So now we know how to display thumbnails of your Picasa Web albums into your website aswell as showing the photos in the albums. Next time I will show you how to sex it with the fabulous LightBox2

Download source code (.zip)