The script working on the site I created for Working Group. Each image caption is pulled in from the caption's set in NG Gallery.

I also used it on my own website on my portfolio pages - here each image is represented with a clickable dot. This could easily be changed for a number or thumbnail image if desired.

Installation and setup

Click here to download a package containing all the necessary files. There is some PHP code you’ll need to insert into your WordPress page template (usually page.php), some to go into your header.php, and images, a stylesheet and Javascript file for upload into your theme’s folder.

Just go into the NG Gallery plugin’s ‘Manage Gallery’ page, select a gallery, and set the ‘Page Link’ to your desired page. You may also need to tweak the CSS file depending on your gallery’s image dimensions.

Be sure to set the "Page link to:" field to your desired page.

This package includes Javascript code from Dynamic Drive’s Featured Content Slider.

Old website - homepage

Old website - thumbnail menu

Old website - project page

Five years on, and I’m pleased with how the website has aged. By keeping the layout simple and refraining from using stylistic cues, it doesn’t look outdated. However the company wished to refresh the design, a cosmetic facelift if you like.

New website - homepage

The layout was simplified, some extraneous pages removed, and thumbnail image menus reduced to simple text navigation. The typography was simplified to Akzidenz-Grotesk for titles (via the excellent Cufon method) and Arial for body copy. The result is a simple, to-the-point website which lets the work speak for itself.

New website - project page

By converting the website from Flash to HTML, the company have already seen increased traffic through improved SEO. Building with WordPress means the company staff can easily update project text and manage the images using the NextGen Gallery plugin.

New website - project page

After quickly getting tired of copying settings across manually, I developed a tool which will output a Lightroom or Photoshop preset file based on the metadata found for that Flickr photo. Simply enter the full URL of the photo into the tool below and you’re away!

It is limited to photos which have metadata publicly available. Also custom point tone curve information isn’t converted- as the Flickr metadata page unfortunately doesn’t show all it.

Let me know if you have any suggestions or find any bugs. If you find it useful and have a website, please link to this blog post.

UPDATE 05/05/2010: Flickr doesn’t show the processing settings on their metadata page anymore – so unfortunately this converter won’t work any longer. Hope you enjoyed it whilst you had time to use it. Since it’s creation it’s done 3962 conversions!

Flickr API integration on my (now old) website

We will be using the phpFlickr class which you can download from here. Once uploaded to your web server, you will need find three variables:

1. Your Flickr username – this is usually pretty obvious (mine is “joesmalley” – I know this as the URL to my photos is http://www.flickr.com/photos/joesmalley/).
2. Your Flickr API key – you can get yours from http://www.flickr.com/services/api/key.gne.
3. Your Flickr ‘secret’ – you will be given this when you receive your API key.

Once you have those three things, you just need some of my PHP wizardry to make it all work:

<?php

// Settings
$flickrUsername = "";
$flickrApiKey = "";
$flickrSecret = "";
$photosPerRow = 5;
$totalPhotos = 10;

include_once("phpFlickr-2.3.0.1/phpFlickr.php");

if(class_exists('phpFlickr')){

 $f = new phpFlickr($flickrApiKey, $flickrSecret, false );

 if (!empty($f)) {
 $person = $f->people_findByUsername($flickrUsername);
 $photos_url = $f->urls_getUserPhotos($person['id']);
 $photos = $f->people_getPublicPhotos($person['id'], NULL, 1,$totalPhotos);

 // Get the date
 $lastphoto = $f->photos_getInfo($photos['photos']['photo'][0]['id']);
 echo "<p class=\"flickr-last-updated\">Last updated: ". date("l M j, Y", $lastphoto['dateuploaded']) ."</p>
 <ul id='flickr'>";    

 // Get the photos
 $i = 1;
 foreach ($photos['photos']['photo'] as $photo) {

 echo "<li";
 if ($i % $photosPerRow == 0) {
 echo " class=\"last\"";
 }
 echo "><a href=\"" . $photos_url . $photo['id'] . "\" target=\"_blank\">";
 echo "<img width=\"50\" height=\"50\" src=\"http://farm".$photo['farm'].".static.flickr.com/".$photo['server']."/".$photo['id']."_".$photo['secret']."_s.jpg\" alt=\"\"/></a></li>\n";

 $i++;

 }
 }
 echo "</ul>";

} else {
 echo "Error: phpFlickr has not been imported";
}

?>

And some CSS to get it looking nice:

br.clear {
	clear: both;
	display: block;
	overflow: hidden;
	width: 0;
	height: 0;
}

p.flickr-last-updated{
	color: #999999;
	font-size: 11px;
	margin-bottom: 6px;
}

ul#flickr li{
	display: block;
	float: left;
	margin: 0 4px 4px 0;
	width: 50px;
	height: 50px;
}

ul#flickr li.last{
	margin-right: 0;
}