I have recently completed an eCommerce site My Dream Mobile built using the Magento eCommerce platform.

Man Magento is a BEAST. Weighing in with around 10 000 files this giant certainly packs a punch. This is the heavy weight of all opensource eCommerce platforms and if I may say has dealt a killer blow to them all!.

Before:

  $.ready(function(){
    $('select#numThumbs').change(function(){
    document.gallery.action = "<?php echo base_url(); ?>index.php/gallery/updateThumbs";
    document.gallery.submit();
      
      return false;
    });
    });  

After: This is where jQuery.noConflict(); comes to the rescue!

jQuery.noConflict();
  jQuery().ready(function(){
    jQuery('select#numThumbs').change(function(){
    document.gallery.action = "<?php echo base_url(); ?>index.php/gallery/updateThumbs";
    document.gallery.submit();
      
      return false;
      
    });
    });  

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)

In a recent project I needed to have a simple way for the client to be able to display their snapshots on their website. I thought Google Picasa Web Albums would be ideal for this and began to put the wheels in motion. The end results can be seen in action here. Today I thought I would share with you how I went about this.

OK grab yourself some strong coffee or a bevarage of your own choice and lets get started.

This ‘how to’ assumes you have a fairly decent knowledge of PHP and that you already have installed the Google Data PHP Client Library, this is part of the Zend Framework. If not get this done at head right back here.

Step by Step

Step 1

First of all you require a Google account, if you don’t have one grab one of those (they are free) and head right back here.

Step 2

If you haven’t done so already, upload some albums. You can do this either through iPhoto using Picasa Web Albums Uploader utility on a Mac or Picasa on a Windows.

Step 3

Let’s write some PHP. First we need to load the Zend classes.

<?php
 
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Gdata');
Zend_Loader::loadClass('Zend_Gdata_ClientLogin');
Zend_Loader::loadClass('Zend_Gdata_Photos');
Zend_Loader::loadClass('Zend_Gdata_Photos_UserQuery');

Step 4

We write the PHP to grab the album feed.

function processPageLoad() 
{
  // Parameters for ClientAuth authentication
  $service = Zend_Gdata_Photos::AUTH_SERVICE_NAME;
  $user = "username";
  $pass = "password";
 
  // Create an authenticated HTTP client
  $client = Zend_Gdata_ClientLogin::getHttpClient($user, $pass, $service);
 
  $photos = new Zend_Gdata_Photos($client);
 
  $query = new Zend_Gdata_Photos_UserQuery();
    $query->setUser($user);
    
  // set num of columns
  $columns = 3 ;
  // counter used to determine whether to end row
  $i = 0 ;
  
    // crop albmun thumbnail img to 72px
    $query->setThumbsize("72c");
    $query->setMaxResults(9);
 
    $userFeed = $photos->getUserFeed(null, $query);
    $numResults = $userFeed->getTotalResults()->text;

Step 5

Write the PHP to display the albums.

<?php 
  echo "<table border='0'>\n";
 
    foreach ($userFeed as $entry) 
  {
   
    if( $i % $columns == 0) 
    {
      //if there is no remainder, we want to start a new row
      echo "<tr>\n";                
    }   
   
    if ($entry instanceof Zend_Gdata_Photos_AlbumEntry) 
    {
      echo "\t<td>";
      
      $var = ($i % $columns);
      
      echo "<a href='gallery.php?albumId=". $entry->getGphotoId();
      echo "'>";
      $thumb = $entry->getMediaGroup()->getThumbnail();
      echo "<img alt='pic' class='galleryimg' src='" . $thumb[0]->getUrl() . "' /><br />";
      echo "</a></td>";
    }
 
    if( ($i % $columns) == ( $columns - 1) || ($i + 1) == $numResults) 
    {
      echo "</tr>\n";
    }
    
    $i ++ ;
    }
 
  echo "</table>";  
}
 
}
?>

Step 6

All that is left is to call the function where you want to display the albums.

<?php
  processPageLoad();
?>

Conclusion

Now that wasn’t too difficult was it. Thanks Google. Next time I will be showing you how access the pictures in each of the albums. In the meantime download the complete code and if you have any questions or comments please let me know.