Version 2 Is available here: http://alanedwardes.com/posts/the-php-sidebar-flickrstream-version-two/

If you look to your left, you will see that I use a Flickr stream, which embeds random photos from my Flickr account right into the sidebar of my blog. And, if you have anything similar, you’re likely to have a call to the JavaScript generator on flickr, which is typically http://www.flickr.com/badge_code_v2.gne?foo=bar.

This is the result of you using the Flickr badge generator, here. There is nothing wrong with using this, and it is a quick and easy way of embedding your photos. There are drawbacks with this method though:

• The user has to have JavaScript enabled to view the photos.
• Loading the stream will stagger page loading, and for instance “clear:both” in a footer won’t be rendered when the page loads, because the browser is still stuck on downloading and displaying the JavaScript from Flickr. This will make the container background jump around until the script is completely loaded.
• You can’t use the stream with overlay image applications like Lightbox JS, or FancyZoom because the links are hardcoded to the photo page.
• The images will send the user off to Flickr, from where they may not return.

So, my aim was to create a small section PHP code that I could just stick in my sidebar. I’m a total PHP rookie, so I started attacking the problem from the photo displaying side of things, trying things like parsing my flickr photo feed. This would have been perfect, but I wanted to display the photos randomly, not recent photos first.

Next, I tried messing with the Flickr API’s, which I have used before, but it seemed like there was just too much I didn’t understand about PHP to use the API’s successfully. It seemed a hell of a lot of work to achieve something that I thought was relatively easy.

So, then it dawned on me. The JavaScript for the badge on the Flickr site isn’t really JavaScript, right? It’s just a piece of code that pulls the user’s flickr photos randomly from the database, and then displays the result using JavaScript. Well, what if I were to remove the JavaScript crap from the badge code, and add in the rel="lightbox" call to make the whole thing Lightbox friendly?

3 hours after that, I had created a file that removes the JavaScript, adds the lightbox call, and links directly to the images instead of the photo page.

How it works

Yeah, I admit, it’s overly complicated and could be optimized LOADS. As I said above, I’m still a PHP rookie, and this is they way that is non-complicated to me.

So, first of all, we need to get the code from Flickr. I’ve chosen to do this using the PHP function cURL, because if the Flickr site or the server connection breaks, it will mean that the user will get a nice message instead of the page taking ages to load, and the user getting bored of waiting. This method avoids using file_get_contents or include.

The variable $target_url would be “http://www.flickr.com/badge_code_v2.gne?count=8
&display=random&size=s&source=user&user=[flickr_user_id]“.
$ch = curl_init();
curl_setopt($ch, CURLOPT_USERAGENT, $userAgent);
curl_setopt($ch, CURLOPT_URL,$target_url);
curl_setopt($ch, CURLOPT_FAILONERROR, true);
curl_setopt($ch, CURLOPT_AUTOREFERER, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);
$file = curl_exec($ch);
if (!$file) { echo "Looks like the flickr site is misbehaving - hit the link below to try and view my photos over on flickr instead.";}

So, you’ve got the code from flickr in your hands, what next? Ahh yes, getting rid of the crap. I made an array of different parts of the script I could remove using str_replace. The below code is what I came up with.

$includedhtml = array('// write the badge', 'var b_txt = ', ' ', '\'', ';', 'document.write(b_txt)', '//document.write(b_txt.split(<).join(&lt))', ' ', 'b_txt+=', ' <td align="center" valign="center" style="padding:0" class="flickr_badge_image" id="', 'flickr_badge_image1">', 'flickr_badge_image2">', 'flickr_badge_image3">', 'flickr_badge_image4">', 'flickr_badge_image5">', 'flickr_badge_image6">', 'flickr_badge_image7">', 'flickr_badge_image8">', '</td>', '
');

Note that the last new line in the array is intentional, I couldn’t get the script to accept /n to count as a new line in the array. Now, let’s use the array:

$nothing = ('');
$html2 = str_replace($includedhtml, $nothing , $file);

Now we’ve cleared all of the JavaScript and removed the image ID’s and unnecessary crap, let’s get on to making the images link to the larger versions of themselves, not the image page.

$html3 = explode('"',$html2);

This makes the variable $html3 an array containing everything in the code, with each different part of it separated by a quotation mark. This allows me to find the image URL’s and strip stuff like links using another simple str_replace.


$a1 = $html3[1];
$img1 = $html3[3];
$img1r = str_replace(”_s”, “”, “$img1″);
$finish = str_replace(”$a1″, “$img1r”, “$html2″);



$a2 = $html3[13];
$img2 = $html3[15];
$img2r = str_replace(”_s”, “”, “$img2″);
$finish = str_replace(”$a2″, “$img2r”, “$finish”);


These two sections need to be repeated until the 8 images and links are fixed, which means that there should be 8 sections of the code in total. This shows the first two.

I’ll explain the first section because the second is pretty much the same.

$a1 is the http://www.flickr.com/photos/[user]/[image_page]“ taken from the first value in the $html3 array. As we don’t want the image page, we need to replace this bit with an image link.

$img1 is the actual small image URL, taken from the 3rd value in the $html3 array.

The next line, $img1r = str_replace("_s", "", "$img1"); in English, means that the result ($img1r) is when _s is replaced with nothing in the image URL.

A bit of knowledge of the Flickr image URL structure is needed here, as you need to know what to replace to get the desired image size.

If I added _s to the end of an image filename, http://farm4.static.flickr.com/3039/2354848704_199d905100_s.jpg, the result would be a 75px x 75px small thumbnail image. For my image link, I want the image to be a bit bigger, and a URL for a larger version of the image is: http://farm4.static.flickr.com/3039/2354848704_199d905100.jpg.

That’s why the script needs to replace the _s with nothing, so that the link can be to a bigger image.

$finish = str_replace("$a1", "$img1r", "$html2");

This code then takes that old image page link, and replaces it with the new bigger image link. So, this needs to be repeated 8 times because this code only replaces the first image in the set, and leaves all of the other images linking to the image page.

After all 8 image links are replaced, the code can now add in things like lightbox calls, and making sure the images are valid XHTML.

$finish = str_replace('a href', 'a rel="lightbox" href', "$finish");
$finish = str_replace('title="', 'title="Click to enlarge: ', "$finish");
$finish = str_replace('75">', '75"/>', "$finish");

And finally:

echo ("$finish");

That’s it. I know, I know it’s a long way to go about the problem, and I can think of other ways of doing it, but this works fine. It doesn’t noticably slow down the page load times, and it plays nice with WP-Cache, which means that the images are randomized when the cache is refreshed again.

You can grab the source here: - http://download.alanedwardes.com/php-flickrstream/flickrstream.php