นำภาพจาก Flickr มาแสดงด้วย Flickr_API (2)

Dec 4th, 2008 by kiterminal

ก่อนหน้านี้ผมเคยเขียน นำภาพจาก Flickr มาแสดงด้วย Flickr_API (1) แล้ว ซึ่งยังไม่มีการแสดงรูปภาพขึ้นมา ต่อไปจะแสดงรูปภาพจากการค้นหา โดยใช้ flickr.photos.search ซึ่งผลการค้นหาจะอยู่ในรูปของ XML สมมติผมจะค้นหาคำว่า สนามจันทร์ เรียงลำดับแบบ relevance และต้องการแสดง 5 รูปต่อหน้า ผลการค้นหาที่ได้มา คือ

<rsp stat="ok">
	<photos page="1" pages="44" perpage="5" total="220">
		<photo id="421883523" owner="80199539@N00" secret="d3241c441e" server="138" farm="1" title="พระราชวังสนามจันทร์" ispublic="1" isfriend="0" isfamily="0" />
		<photo id="346596149" owner="80199539@N00" secret="935e84b2ae" server="153" farm="1" title="ศิลปากร" ispublic="1" isfriend="0" isfamily="0" />
		<photo id="346596151" owner="80199539@N00" secret="3739c5d5d5" server="161" farm="1" title="ศิลปากร" ispublic="1" isfriend="0" isfamily="0" />
		<photo id="421844947" owner="80199539@N00" secret="89750dc200" server="188" farm="1" title="พระราชวังสนามจัันทร์" ispublic="1" isfriend="0" isfamily="0" />
		<photo id="2065457886" owner="90208360@N00" secret="aac6463e67" server="2178" farm="3" title="100 years Sanam Chan Palace" ispublic="1" isfriend="0" isfamily="0" />
	</photos>
</rsp>

เมื่อได้ข้อมูลมาแล้ว จะต้องนำข้อมูลที่มีอยู่มาแสดงผล โดยข้อมูลจะแบ่งเป็น 2 ส่วน คือ

photos มีข้อมูลที่เก็บไว้ คือ page (หน้าที่), pages (หน้าทั้งหมด), perpage (จำนวนรูปต่อหน้า) และ total (จำนวนรูปทั้งหมด)
photo มีข้อมูลของรูปภาพแต่ละรูป คือ id (หมายเลขรูปภาพ), owner (เจ้าของ), secret, server, farm title, ispublic, isfriend และ isfamily

ในการแสดงรูปภาพนั้นจะต้องใช้รูปแบบที่กำหนด คือ

http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}.jpg
หรือ
http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}_[ขนาดรูปภาพ].jpg
หรือ
http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{o-secret}_o.(jpg|gif|png)

โดยขนาดรูปภาพ จะมี

s : กว้าง 75 พิกเซล ยาว 75 พิกเซล
t : ยาว 100 พิกเซล
m : ยาว 240 พิกเซล
- : ยาว 500 พิกเซล
b : ยาว 1024 พิกเซล
o : ภาพต้นฉบับ

สามารถดูเพิ่มเติมได้ที่ Photo Source URLs

http://farm1.static.flickr.com/138/421883523_d3241c441e_m.jpg

หลังจากผมได้เกริ่นมายาวแล้ว ต่อไปก็เริ่มใช้งาน Flickr_API ดีกว่า ซึ่งผมได้ใช้การสืบทอดคุณสมบัติ (Inheritance) มาสร้างคลาสชื่อ API เพื่อจะเพิ่มความสามารถในการค้นหารูปภาพเข้าไป ดังตัวอย่างนี้

<?php
require_once 'Flickr/API.php';
class Flickr extends Flickr_API {
    function photoSearch($params) {
        $xml = $this->callMethod('flickr.photos.search', $params);
        if ($xml) {
            foreach ($xml->children as $key) {
                if($key->name == 'photos') {
                    $photos = $key->attributes;
                    $list_photo = $key->children;
                }
            }
            $photo = array();
            foreach ($list_photo as $key) {
                if($key->name == 'photo') {
                    $photo[] = $key->attributes;
                }
            }
            return array($photos, $photo);
        }
        else {
            echo $this->getErrorMessage();
            return ;
        }
    }
}
?>

เมื่อเราได้คลาสใหม่มาแล้ว ต่อไปก็จะนำมาใช้งาน

<?php
$flickr =& new Flickr(array(
    'api_key'  => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx', 
    'api_secret' => 'xxxxxxxxxxxxxxxx', 
    ));
$search = array(
    'text' => 'สนามจันทร์', 
    'sort' => 'relevance', 
    'per_page' => 5 
    );
list($photos, $photo) = $flickr->photoSearch($search);
?>

ในตอนนี้ข้อมูลจะถูกเก็บลง $photos และ $photo แล้ว สามารถนำไปใช้งานได้ทันที เช่น

<?php
foreach ($photo as $p) {
    $output .= '
    <li>
        <img src="http://farm'.$p['farm'].'.static.flickr.com/'.$p['server'].'/'.$p['id'].'_'.$p['secret'].'_s.jpg" />
    </li>';
}
?>