Get Flickr Images Using SimpleXML

What is it about?

In this article you will learn two main things:

  1. How to parse XML using SimpleXML?
  2. How to get Flickr images from RSS feed and display them on your web page?

Demo   Source

What is SimpleXML?

SimpleXML is a PHP extension used for XML parsing. It makes very easy to convert XML into a PHP object which can be used to display or process information in the XML. You must have PHP 5+ to use it.

Understanding Flickr RSS Hierarchy

Before getting started with the PHP code, let’s take a look at the source of Flickr RSS feeds.
Here’s the RSS source view of my Flickr gallery:

Flickr RSS feed source view

As you can see RSS is nothing more than an XML document. In the above figure, I highlighted important tags which we shall use later in our code. At the root is rss tag, then channel is the child of rss. Similarly title is the child of channel. Following are few examples for accessing these tags.

rss->channel
rss->channel->title
rss->channel->item->description

Note that a very close representation of above examples will be used in PHP code to access them.

Parsing Flickr RSS using SimpleXML

Now we know how Flickr RSS is structured. Let’s parse it using SimpleXML’s function simplexml_load_file() and display the results using print_r to see what it returns:

<?php
$rss_link = "http://api.flickr.com/services/feeds/photos_public.gne?id=24591392@N02&lang=en-us&format=rss_200";
$rss = simplexml_load_file( $rss_link );

echo '<pre>';
print_r( $rss );
echo '</pre>';
?>


Flickr RSS parsed using simplexml_load_file and displayed using print_r

Now using the above output as our reference, we can access title, and link or Flickr user like this:

echo $rss->title;
echo $rss->link;

Again using the above output as our reference, all the images of the Flickr user are stored in [item] Array which is a property of [channel] Object. So to access [item] Array, we can use following loop:

$regx = "/<img(.+)\/>/";
$matches = array();

foreach( $rss->channel->item as $img ) {
    preg_match( $regx, $img->description, $matches );

    echo '<h1>' . $img->title . '</h1>';
    echo '<p>';
    echo '<a href="' . $img->link . '">' . $matches[ 0 ] . '</a>';
    echo '</p>';
}

Note that to extract image thumbnail, we make use of regular expression.
The pattern “/<img(.+)\/>/” searches for an image tag within the $img->description.
After the execution of preg_match, $matches array contains all the matches found in $img->description and the zero index of $matches contains the complete string found according to the provided pattern in $regx.

Creating Reusable Class

Let’s create a reusable class called FlickrImages which can parse any provided Flickr RSS url in constructor and generates an array containing list of all images of the user who’s RSS url is parsed.

class FlickrImages {
	private $xml;
	
	public function __construct( $rss_url ) {
		$this->xml = simplexml_load_file( $rss_url );
	}
	
	public function getTitle() {
		return $this->xml->channel->title;
	}
	
	public function getProfileLink() {
		return $this->xml->channel->link;
	}
	
	public function getImages() {
		$images = array();
		$regx = "/<img(.+)\/>/";
		
		foreach( $this->xml->channel->item as $item ) {
			preg_match( $regx, $item->description, $matches );
			
			$images[] = array(
					  'title' => $item->title,
					  'link' => $item->link,
					  'thumb' => $matches[ 0 ]
					);
		}
		
		return $images;
	}
}

Everything that’s related to parsing XML in this class was already explained before. The advantage for creating a class is that it’s reusable. All you have to do is pass RSS url via constructor.

Following code make use of above class to parse Flickr RSS

$flickr = new FlickrImages( 'http://api.flickr.com/services/feeds/photos_public.gne?id=24591392@N02&lang=en-us&format=rss_200' );

$title = $flickr->getTitle();
$url = $flickr->getProfileLink();
$images = $flickr->getImages();

echo '<h1 id="title"><a target="_blank" href="' . $url . '">' . $title . '</a></h1>';

echo '<ul>';
foreach( $images as $img ) {
	echo '<li>';
	echo '<h3><a href="' . $img[ 'link' ] . '">' . $img[ 'title' ] . '</a></h3>';
	echo '<div class="img_container">' . $img[ 'thumb' ] . '</div>';
	echo '</li>';
}
echo '</ul>';

Here’s the CSS I used in the demo for styling above generated html.

body {
    font-family: Arial;
    font-size: .9em;
    margin: 0;
    padding: 0;
}

h1#title {
    font-size: 2.8em;
    font-weight: normal;
    margin: 12px;
    padding: 4px;
}

h1#title a {
    color: #949494;
    border-radius: 8px;
    padding: 12px;
    text-decoration: none;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

h1#title a:hover { background: #EDEDED; }

h3 {
    color: #E13A00;
    font-size: 1.3em;
    margin: 0 0 12px 0;
    padding: 0;
}

h3 a { color: #E13A00; text-decoration: none; }

h3 a:hover { color: #818181; }

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li {
    background: #EDEDED;
    border-radius: 8px;
    float: left;
    height: 300px;
    position: relative;
    padding: 16px;
    margin: 8px 0 12px 20px;
    text-align: center;
    width: 300px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

ul li img {
    border: solid 2px #000;
    box-shadow: 0 0 14px #000;
    vertical-align: middle;
    -moz-box-shadow: 0 0 14px #424242;
    -webkit-box-shadow: 0 0 14px #000;
}

.img_container { height: 90%; line-height: 235px; }

I am not going to explain the above CSS in this article because it’s not related to our topic.
But as you can see from the above code that many CSS3 properties are used so it will only display properly in modern browsers.


comments powered by Disqus