< Browse > Home /

| RSS

Show pictures from Picasa albums in your custom website using Zend Framework

[ More ] Jun 13, 2010 | 2 Comments | Posted in General, HowTo, PHP, Web Development |

Zend Framework and Zend Gdata API provide a simple and effective solution to display pictures and galleries from your picasa account in your own custom website. Lets take one of the public galleries in picasa show it in a custom php page in this website.

Zend Framework
Before we start. In order to use Zend Gdata API, you need to have Zend framework (1.6 or higher) installed, If you have the full framework package installed , you won’t need to worry about anything, you can go ahead and start calling the APIs directly, In case if you don’t have the full framework package installed, you will have to download and configure Google Data Client Library. Details of setup and configuration are listed in the following link

http://code.google.com/apis/gdata/articles/php_client_lib.html#gdata-installation

CODE :)
The following url refers to a public picasa gallery

http://picasaweb.google.com/shasankar/SampleGallery#

The URL has two important pointers, the picasa user id the one that follows the picasaweb.google.com domain, its usually the picasa user name, in some cases it can also be a long alphanumeric string, this is the user id, the other one is the gallery name, in this case it is ‘SampleGallery’

The following script allows you to load pictured directly into your website


<?php
error_reporting(E_ALL);
require_once 'Zend/Loader.php';
Zend_Loader::loadClass('Zend_Gdata_Photos');

// Album and User
$sUserID = "shasankar";
$sAlbumName = "SampleGallery";

$serviceName = Zend_Gdata_Photos::AUTH_SERVICE_NAME;
$gp = new Zend_Gdata_Photos();
$query = $gp->newAlbumQuery();
$query->setUser($sUserID);
$query->setAlbumName($sAlbumName);
$query->setImgMax("800");
$query->setThumbSize("160");
$albumFeed = $gp->getAlbumFeed($query);
$sPrintThumbs = "";

foreach ($albumFeed as $albumEntry) {
if ($albumEntry->getMediaGroup()->getThumbnail() != null) {
// Load Thumbnail Info
$mediaThumbnailArray = $albumEntry->getMediaGroup()->getThumbnail();
$ThumbnailUrl = $mediaThumbnailArray[0]->getUrl();
$ThumbnailHeight = $mediaThumbnailArray[0]->getHeight();
$ThumbnailWidth = $mediaThumbnailArray[0]->getWidth();
// Load Picture Info
$mediaArray = $albumEntry->getMediaGroup()->getContent();
$ImageUrl = $mediaArray[0]->getUrl();
$sImageTitle = $albumEntry->getMediaGroup()->getDescription()->text;
$url = $albumEntry->getLink('alternate')->href;

$sLinkString = <<<LTEXT
<a href="$ImageUrl" title="$sImageTitle"><img src="$ThumbnailUrl" width="$ThumbnailWidth" height="$ThumbnailHeight" /></a>
LTEXT;
$sPrintThumbs .=$sLinkString ;
}
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> Loading pictures from Picasa Gallery</title>
</head>
<body >
<div>
<div>
<h3>SampleGallery (Picasa)</h3>

</div>
<div>
<?php echo $sPrintThumbs; ?>
</div>
</div>
<div class="clear"></div>
</body>
</html>

The Api allows lot of customization options, thumbnail size, final image size, number of results per page, etc, these setting have to passed along with the Album query that is sent to picasa.

Picasa album in Custom Webpage

Related Links

If you want to display private picasa galleries in your website, you can make use of zend authentication api, you can read more about it here

http://www.ibm.com/developerworks/library/x-picasalbum/#c5
[ View Post ]

Customizing FCK Editor toolbars in PHP

[ More ] Jan 18, 2009 | 1 Comment | Posted in PHP, Tech, Web Development |

The ’CustomConfigurationsPath’ setting of FCK editor provides a great deal of customizations and configurations for users of FCKEditor. I was implementing FCK editor in one of the projects and the default interface toolbars occupy almost 50 % of the screen area of the editor control. Most of the toolbar options are unnecessary, so I used the ‘’CustomConfigurationsPath’ property to provide FCKEditor with a custom configuration file to get the right settings.

Default Code

/TestProject/test1.php


include_once 'includes/fckeditor/fckeditor.php';
$oFCKeditor = new FCKeditor('txtQuesText') ;
$oFCKeditor->BasePath = './includes/fckeditor/' ;
$oFCKeditor->Width = 600;
$oFCKeditor->Height = 300;
$oFCKeditor->Value = '' ;
$oFCKeditor->Create() ;

The code will render as follows

In order to customize the FCK editor, you will have create a FCK Editor Setting file, like the following javascript file
/TestProject/includes/fck_editor_config.js


FCKConfig.ToolbarSets["TestToolbar"] = [
['Source','-'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink'],
];

The settings file has to be connected to the PHP script that loads the FCKEditor and the appropriate settings that have to be loaded have to be configured in the PHP Script (in this case it is “TestToolbar”). This methods, multiple settings to be configured as a part of the settings file and allows dynamic swapping of editor control properties.

PHP Script with settings file loaded


$oFCKeditor = new FCKeditor('txtQuesText') ;
$oFCKeditor->BasePath = './includes/fckeditor/' ;
$oFCKeditor->Config["CustomConfigurationsPath"] = "/TestProject/includes/fck_editor_config.js";
$oFCKeditor->ToolbarSet = 'TestToolbar';
$oFCKeditor->Width = 600;
$oFCKeditor->Height = 200;
$oFCKeditor->Value = '' ;
$oFCKeditor->Create() ;

Result

[ View Post ]

Creating a simple bar chart using pChart Library in PHP

[ More ] Dec 28, 2008 | 6 Comments | Posted in PHP, Tech, Web Development |

pChart is a charting library for PHP that allows generation of dynamic good looking GD based charts. Ever since I saw a small demo of charts in their website, it was attracted to try this product; I didn’t get a chance until last week.

Installing pChart in XAMPP and in Linux (Ubuntu)

The ‘pChart‘ download comes with a numerous list of files and folders, although you will need only about two major folders. They are

  • /pChart
  • /Fonts

In XAMPP

You can copy both the folders to your global includes folder, so that they can be accessed from anywhere across the system. Say C:\xampp\php-includes\pChart and
C:\xampp\php-includes\Fonts or you can reference them directly using the full path name. The library includes are usually kept outside the htdocs folder for security reasons.

In Linux (Ubuntu)

You can copy both the folders to your global includes folder, so that they can be accessed from anywhere across the system. Say /var/www/php-includes/pChart and
/var/www/php-includes/fonts or you can reference them directly using the full path name.

In this example of creating a bar chart we will use XAMPP, full paths, whereas the examples provided in the pChart download will tell you about how to use the includes folder option. It is best add the folder to the php include setting, so that it can be referenced from anywhere.

Configuring the pChart charting setup in XAMPP

Now we will start placing the php file that will generate the chart, lets create some folders called

  • C:\xampp\htdocs\charting-test\
  • C:\xampp\htdocs\charting-test\cache-images\

Now create a file called index.php in charting-test folder that will generate the chart. The generated charts are stored in cache-images folder and can be rendered from that folder.


<?php
define ('CHART_ENGINE_ROOT','C:\\xampp\\php-includes\\');
include_once CHART_ENGINE_ROOT.'pChart\\pChart.class';
include_once CHART_ENGINE_ROOT.'pChart\\pData.class';

$chartFileName = $_SERVER['REQUEST_TIME']."_testChart.png";

$dataRow = Array();
$dataRow[0]['studentName']= "Praveen";
$dataRow[0]['studentMarks']= 52;
$dataRow[1]['studentName']= "Krishna";
$dataRow[1]['studentMarks']= 20;
$dataRow[2]['studentName']= "Joseph";
$dataRow[2]['studentMarks']= 35;
$dataRow[3]['studentName']= "Deepak";
$dataRow[3]['studentMarks']= 26;
$dataRow[4]['studentName']= "Martin";
$dataRow[4]['studentMarks']= 37;
$dataRow[5]['studentName']= "Vijay";
$dataRow[5]['studentMarks']= 19;

// Dataset definition
$DataSet = new pData;
for ($i=0; $i<6; $i++) {
$dispStudName = $dataRow[$i]['studentName'];
$dispStudMarks = $dataRow[$i]['studentMarks'];
$DataSet->AddPoint($dispStudName,"Names");
$DataSet->AddPoint($dispStudMarks,"Marks");
}
$DataSet->AddAllSeries();
$DataSet->RemoveSerie("Names");
$DataSet->SetAbsciseLabelSerie("Names");
$DataSet->SetSerieName("Marks","Marks");
$DataSet->SetYAxisName("Marks");

// Initialise the graph
$Test = new pChart(700,270);
$Test->setFontProperties(CHART_ENGINE_ROOT."Fonts\\tahoma.ttf",9);
$Test->setGraphArea(70,30,680,200);
$Test->drawFilledRoundedRectangle(7,7,693,263,5,240,240,240);
$Test->drawRoundedRectangle(5,5,695,265,5,270,270,270);
$Test->drawGraphArea(255,255,255,TRUE);
$Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,45,2,TRUE);
$Test->drawGrid(4,TRUE,230,230,230,50);

// Draw the 0 line
$Test->setFontProperties(CHART_ENGINE_ROOT."Fonts\\tahoma.ttf",6);
$Test->drawTreshold(0,143,55,72,TRUE,TRUE);

// Draw the bar graph
$Test->drawBarGraph($DataSet->GetData(),$DataSet->GetDataDescription());

// Finish the graph
$Test->setFontProperties(CHART_ENGINE_ROOT."Fonts\\tahoma.ttf",8);
$Test->drawLegend(575,35,$DataSet->GetDataDescription(),255,255,255);
$Test->setFontProperties(CHART_ENGINE_ROOT."Fonts\\tahoma.ttf",10);
$Test->drawTitle(60,22,"Student Marks Comparision",50,50,50,585);
$Test->Render("cache-images/".$chartFileName);
$Test->ReportWarnings();

$webPrintStr = <<<
<img src="cache-images/$chartFileName" alt="" />
ETEXT;

echo $webPrintStr;
?>

Resulting Chart

The charts are really cool :)
[ View Post ]

Recent Post

Most Popular

Popular Today