bioneural.net

Maybe you've seen the almost ubiquitous Flickr badge? This small bit of code lets you display images from your Flickr RSS feed on your website. If you have an iStockPhoto account you might want to do the same; a feed is available for your recently approved images. Trawling the iStockPhoto site for information about making use of this feed isn't very rewarding. However, where there's a will there's a way...

Update 15.06.06: This problem has been revisited here.

The iStockPhoto feeds are in the Atom XML format. They look like this:

http://www.istockphoto.com/istock_myfiles_rss.php?ID=430123

...where ID= is your iStockPhoto member ID number. You can subscribe to such a feed using an RSS newsreader or aggregator to view the 10 most recently approved images.

What about modifying the feed to customise display of the images on your own site? It is possible; there is a (free) plug-in for WordPress by Christine Davis here that will parse the feed to display the images with or without descriptions, relying on PHP scripting (and therefore a server you can configure). Sean Locke has written a PHP module to do a similar thing using the Mambo content management system. But what if you don't have access to a PHP-based parser—is there another option?

Yes. If you use blogging software that generates static pages (e.g. iBlog), you could use a JavaScript and CSS-based solution to achieve a similar result. The first step is to input your iStockPhoto feed into Feed2JS. Choose your own options, or copy-and-paste from the file download below (changing the ID and referral number to your own). This will give you something like this (I chose to display the most recent 3):

But say we don't want to see the descriptions. We can hide them and otherwise tweak the appearance using CSS. Something like this:

.istock {
	margin: 0;
	padding: 0;
	font-family: Verdana, sans-serif;
	text-align: center;
	line-height: 1.5em;
	color: #FFF;
	background: #FFF;
	font-size: x-small; /* IE5 Win */
	voice-family: ""}"";
	voice-family: inherit;
	font-size: small;
	}

html>.istock{ /* be nice to Opera */
	font-size: small;
	}

a {
	background: #FFF;
	color: blue;
	}

a:visited {
	background: #FFF;
	color: purple;
	}

a:hover {
	background: #FFF;
	color: red;
}

You can insert this into the page you want the images to appear on (in the head element), or reference an external CSS file. You should now see something like this:

The description is still there—it's just been hidden as we made the description text the same colour as the background. We've specified different colours for the title links, so they are still visible.

If you want to play with the code above, here is the XHTML and CSS in one file for download (right-click) here.

I had actually written to iStockPhoto asking if there was any way to rotate images from one's iStockPhoto portfolio in an external website, "much as is possible with Flickr". Having since worked it out for myself as above, I'm pleased to be able to share the informative response I received from iStockPhoto:

Thanks for contacting us. You may use flickr to rotate your images.

Actions Send this article link by e-mail Print this article without other content Follow responses to this article (comments feed) Share this on Delicious, Digg, StumbleUpon Translate this page: DE | ES | FR Follow tag feeds: css, istockphoto, javascript, Photography, php, wordpress. Buy for yourself on Amazon.com or Amazon.co.uk, leave a "tip"