bioneural.net

In an earlier post I described a JavaScript-based method to include recently-approved iStockPhoto images in a page on your website. When I migrated from a static blogging system (iBlog) to WordPress I found a useful plugin that worked very well in MAMP. Unfortunately it broke when I moved my developmental site to a live DreamHost server. Here is a bit more background to the problem and an eventual solution that uses SimplePie. Although the focus here is on displaying photographs, it's a solution that should work with practically any feed you might wish to embed.

No go with latestistockimages.php

I was initially using Christine's (of UTW fame) iStockPhoto plug-in for WordPress to display my latest approved images. This worked fine under a localhost development environment, but when I went "live" with DreamHost it stopped working due to the blocking out "outdated" PHP code that posed a security risk. For some reason my e-mails to the author went unanswered, and the download link has been a 404 for ages.

Plugging the gap with Feed2JS

I turned back to Feed2JS, with this in my sidebar:

<?php if (is_page("photos")) { ?>
	<div class="sb-istock"><h2>My iStockPhoto photocast</h2>
	<span class="metalink"><a href="http://www.istockphoto.com/istock_myfiles_rss.php?ID=430123&amp;refnum=bmckenzie" title="RSS feed for iStockPhoto photocast" class="feedlink"><img src="<?php bloginfo('template_directory'); ?>/images/feedicon16px.png" alt="RSS" /></a></span>
	</div>
	<div class="mistock">
		<script type="text/javascript" src="http://jade.mcli.dist.maricopa.edu/feed/feed2js.php?src=http://www.istockphoto.com/istock_myfiles_rss.php?ID=430123&amp;refnum=bmckenzie&amp;num=3&amp;targ=y&amp;html=a"></script>
	<noscript><p class="alert">Please enable JavaScript for full functionality</p></noscript>
	</div>
<?php } ?>

Here's what I got (with appropriate styling):

It worked pretty well for the most part, although relied on an external server which I had hoped to avoid. Sometimes is did seem to increase page loading times considerably.

Let's try feedList

I decided to try and replicate this with feedList, a WordPress plugin by Bill Rawlinson with "the ability to display linked lists imported from an RSS or ATOM feed". Here's what I put in my sidebar:

<?php if (is_page("photos")) { ?>
	<div class="sb-istock"><h2>My iStockPhoto photocast</h2>
	<span class="metalink"><a href="http://www.istockphoto.com/istock_myfiles_rss.php?ID=430123&amp;refnum=bmckenzie" title="RSS feed for iStockPhoto photocast" class="feedlink"><img src="<?php bloginfo('template_directory'); ?>/images/feedicon16px.png" alt="RSS" /></a></span>
	</div>
	<div class="mistock">
		<ul>
		<?php
			feedList(array("rss_feed_url"=>"http://www.istockphoto.com/istock_myfiles_rss.php?ID=430123&amp;refnum=bmckenzie",
							"num_items"=>3,
							"show_description"=>true,
							"random"=>false,
							"sort"=>"none",
							"new_window"=>true,
							"show_date"=>false
					)
			);
		?>
		</ul>
	</div>
<?php } ?>

The result was the "same"—except the image was missing altogether!

I contacted Bill who felt it was an issue with the built-in XML parser, as called by Magpie (probably not the bird), and resulting from an empty <img> tag embedded within an empty link. Hmmm, I see... Well, we did agree it was "very odd", but no fix was on the horizon.

SimplePie to the rescue

SimplePie is:

... a very fast and easy-to-use class, written in PHP, for reading RSS and Atom syndication feeds.

I have to admit when I first encountered SimplePie (as beta 1) I was totally lost. I couldn't make sense of the documentation and was unable to get it working. But Ryan and team have done much of late to reach out to those of us with rudimentary knowledge of PHP. Beta 2 sees the release of a WordPress plugin, and SimplePie has matured into a true easy-to-use solution for "the rest of us". It's so simple that even the potentially scary bit—modifying CHMOD file permissions on the cache folder—was no big deal using Transmit:

With simplepie.inc installed, the cache folder created with appropriate permissions, and the plugin installed and activated, I could then replace the above code blocks with this:

<?php if (is_page("photos")) { ?>
<div class="sb-istock"><h2>My iStockPhoto photocast</h2>
	<span class="metalink"><a href="http://www.istockphoto.com/istock_myfiles_rss.php?ID=430123&amp;refnum=bmckenzie" title="RSS feed for iStockPhoto photocast" class="feedlink"><img src="<?php bloginfo('template_directory'); ?>/images/feedicon16px.png" alt="RSS" /></a></span>
	</div>
	<div class="mistock">
		<?php echo SimplePieWP('http://www.istockphoto.com/istock_myfiles_rss.php?ID=430123&amp;refnum=bmckenzie', 'items:3, showdate:, shortdesc:'); ?>
</div>
<?php } ?>

The output of the SimplePieWP function is sent to the screen with "echo" and is given user-input values for the parameters of feed URL, and for display characteristics (number of items to show e.g. 3, whether and how to show the post date e.g. blank, and how much of the description to show e.g. all). Now to toss in a bit of CSS to the "mistock" class (credit to Dave Kellam at Eightface):

.mistock {
	text-align: center;
	display: inline;
	}

.mistock ul, .mistock li {
	list-style: none;
	}

.mistock h3 {
	display: none;
	}

.mistock a img {
	background: #fff;
	border: 1px #ccc solid !important;
	padding: 3px;
	margin: 5px 3px 5px;
	}

.mistock a:hover img {
	border: 1px #999 solid !important;
	}

The finished product

Your iStockPhoto embedded photocast should now look something like this:

The only persisting problem is that iStockPhoto offer a poorly-formed feed. I've contacted them twice about encoding ampersands and using "alt" tags to avoid validation errors, but I guess they see this as a low priority.

Update 31.08.06: Although I've not seen any official announcements, iStockPhoto began testing new RSS and Atom feeds in June (I was asked to give feedback). They now offer valid RSS 2.0 and Atom 1.0 feeds, but in the process of testing we discovered some bugs in SimplePie 1.0 beta 2 which, as yet, have not been resolved. The new feeds make it much easier to apply custom CSS when embedding the feed into your site.

Update 05.11.06: SimplePie 1.0 beta 3 has been released and allows you to integrate a valid iStockPhoto RSS feed (entity-encoding issues persist with the Atom feeds)..

Actions Send this article link by e-mail Print this article without other content Follow responses to this article: comments Follow tag feeds: advertising, css, istockphoto, javascript, Photography, php, rss, simplepie, webdev, wordpress. Share on Delicious Digg Facebook StumbleUpon Twitter Translate this page: DE | ES | FR