Last year I was approached by an old work associate/buddy who needed someone to program a basic photo display web component that he could use with a WordPress blog site he was designing. Since I am pretty decent at WordPress, and quite versed at PHP, I accepted. Here is what I ended up with. Quick and dirty.
It utilized the Flickr developer API's, PHP and a little HTML/CSS/JavaScript knowhow and turned out to work quite well.
I'm sure there are much more robust exampes of a similar component, this one just worked for what they needed at Solitude Ski Resort.
<?php
function _pre($out,$kill=false)
{
echo '<pre>';
if (is_array($out))
{
print_r($out);
}
else
{
echo $out;
}
if ($kill)
{
die('</pre>');
}
else
{
echo '</pre>';
}
}
class daily_candy
{
var $candy = array();
var $candy_count = 0;
var $api_key = '';
var $service_url = 'http://api.flickr.com/services/rest/?';
function daily_candy($api_key)
{
// set props
$this->api_key = $api_key;
// we need posts
if ($this->get_photo_ids())
{
$this->get_photo_sizes();
$this->get_photo_info();
$this->candy_count = count($this->candy);
}
}
function get_photo_ids($photoset_id,$per_page = '4',$format='php_serial')
{
// build the main url
$params = array(
'api_key' => $this->api_key,
'photoset_id' => $photoset_id,
'per_page' => $per_page,
'method' => 'flickr.photosets.getPhotos',
'format' => $format
);
$encoded_params = array();
foreach ($params as $k => $v)
{
$encoded_params[] = $k.'='.urlencode($v);
}
$url = $this->service_url.implode('&', $encoded_params);
$rsp = file_get_contents($url);
$rsp_obj = unserialize($rsp);
if ($rsp_obj['stat'] == 'ok' && count($rsp_obj['photoset']['photo']) > 0)
{
foreach($rsp_obj['photoset']['photo'] as $photo)
{
array_push($this->candy,new daily_candy_photo($photo['id']));
}
}
else
{
// do nothing
}
return count($this->candy);
}
function get_photo_sizes($format='php_serial')
{
// build the main url
$params = array(
'api_key' => $this->api_key,
'method' => 'flickr.photos.getSizes',
'format' => $format
);
$encoded_params = array();
foreach ($params as $k => $v)
{
$encoded_params[] = urlencode($k).'='.urlencode($v);
}
for($i = 0; $i < count($this->candy); $i++)
{
$url_format = $this->service_url.implode('&', $encoded_params).'&photo_id=%s';
$url = sprintf($url_format,$this->candy[$i]->photo_id);
$rsp = file_get_contents($url);
$rsp_obj = unserialize($rsp);
if ($rsp_obj['stat'] == 'ok')
{
$this->candy[$i]->thumb_url = $rsp_obj['sizes']['size'][0]['source'];
$this->candy[$i]->photo_url = $rsp_obj['sizes']['size'][3]['source'];
}
else
{
// do nothing
}
}
}
function get_photo_info($format='php_serial')
{
// build the main url
$params = array(
'api_key' => $this->api_key,
'method' => 'flickr.photos.getInfo',
'format' => $format
);
$encoded_params = array();
foreach ($params as $k => $v)
{
$encoded_params[] = urlencode($k).'='.urlencode($v);
}
$url_format = $this->service_url.implode('&', $encoded_params).'&photo_id=%s';
for($i = 0; $i < count($this->candy); $i++)
{
$url = sprintf($url_format,$this->candy[$i]->photo_id);
$rsp = file_get_contents($url);
$rsp_obj = unserialize($rsp);
if ($rsp_obj['stat'] == 'ok')
{
$this->candy[$i]->description = $rsp_obj['photo']['description']['_content'];
}
else
{
// do nothing
}
}
}
function render_candy()
{
// hold script output
$script = "\n";
$script_imgs = "\n";
// _pre($this->candy);
// write out the HTML for the visual display of the page
for($i = 0; $i < $this->candy_count; $i++)
{
$item = $this->candy[$i];
// fill script
$script .= "dc_photos.push(['".$item->photo_url."','".htmlspecialchars(addslashes($item->description))."']);\n";
$script_imgs .= "dc_imgs[$i] = new Image();\ndc_imgs[$i].src = '".$item->photo_url."';\n";
// first loop?
if ($i == 0)
{
echo <<<HTML
<!-- Daily Candy -->
<style type="text/css">
#dc-shell
{
height:520px;
width:600px;
clear:both;
margin-left:20px;
}
#dc-shell h2
{
width:600px;
padding:0px;
margin:0px 0px 5px 0px;
}
#dc-bottom
{
float:left;
height:80px;
width:500px;
}
.dc-lft
{
width:510px;
height:375px;
float:left;
position:relative;
}
.dc-rgt
{
width:85px;
float:left;
}
.dc-sml
{
height:96px;
}
</style>
<script type="text/javascript" language="javascript">
var dc_photos = []; // hold generated photos and links
var dc_imgs = new Array();
// show the daily candy player
function dc_show_candy(id)
{
var img = document.getElementById("dc-img");
var txt = document.getElementById("dc-bottom");
if (img != undefined && txt != undefined)
{
try
{
img.src = dc_imgs[id].src;
txt.innerHTML = dc_photos[id][1];
}
catch(ex)
{
}
}
}
</script>
<div id="dc-shell" class="post-info">
<div class="dc-lft">
<div class="dc-top"><a href="$item->photo_url" target="_blank"><img src="$item->photo_url" border="0" alt="" title="" width="500" height="375" id="dc-img" /></a></div>
<div id="dc-bottom">$item->description</div>
</div>
<div class="dc-rgt">
HTML;
}
// smaller thumbnail item
echo <<<HTML
<div class="dc-sml"><a href="javascript:dc_show_candy($i);"><img src="$item->thumb_url" border="0" alt="" title="" width="85" height="85" /></a></div>
HTML;
// last loop
if ($i == $this->candy_count - 1)
{
echo <<<HTML
</div>
</div>
<!-- /Daily Candy -->
HTML;
}
}
// write out the javascript array needed
echo <<<JS
<script type="text/javascript" language="javascript">
$script
$script_imgs
</script>
JS;
}
};
class daily_candy_photo
{
var $photo_id = '';
var $thumb_url = '';
var $photo_url = '';
var $description = '';
function daily_candy_photo($photo_id)
{
$this->photo_id = $photo_id;
}
};
$dc = new daily_candy('FLICKR_API_KEY');
$dc->render_candy();
?>