First of all welcome to FlyCasual, this is my inaugural posting so please…be gentle.
My partner Jason was looking to add a FFFFound stream to the blog. We thought it would be cool to showcase images we had bookmarked on the site, rather than a stream of that community’s postings (although the FFFFound community is producing a pretty hot set of content).
Our plans were quickly foiled when we realized it was rather difficult (if not impossible) to get a FFFFound user account. This seems to be a very popular problem amongst the design community. I wonder if the fascination with their site’s image bookmarking would be so high if the invites where more open. That being said I’ve come across a few that think FFFFound would not have the consistently strong content if just anybody could sign up. Maybe they should stay in *BETA* forever. I could just see this elusive club of art-nerds nonchalantly greeting each other by username at house party screenings of Helvetica.
Then we came across Dropular. Although they are in *BETA*, their registration invites are a bit easier to come by. The keyboard navigation is handy and they have also broadened the concept from “image bookmarking” to “media bookmarking” (which just means that you can bookmark video and links as well as images). The interface to bookmark a piece of media is really slick, and the barebones design of the site puts all the focus on the content. Not that it’s a contest, but I think Dropular has won me over.
When looking at parsing the Dropular feed, all I really needed to do was sort out some php to parse the feed’s XML, then resize the images to fit the design (in our case this was a vertical column, 150px in width). Wordpress conveniently comes with a handy enough parser for the job. I’m pretty sure that it’s the old Magpie parser (or is some incarnation thereof). The Wordpress rss.php file is located in the wp-admin directory and must be included in your script to fetch the feed (as shown below).
//include the rss parser
require_once (ABSPATH . WPINC . '/rss.php');
// fetch the rss feed (you will want to replace “flycasual” with your Dropular username)
$rss = @fetch_rss('http://dropular.net/feed/rss/flycasual');
Once you have the feedback object returned, it’s just a matter of looping through the items and extracting the image URLS from each element. The complete script below:
//include the rss parser
require_once (ABSPATH . WPINC . '/rss.php');
// fetch the rss feed (you will want to replace “flycasual” with your Dropular username)
$rss = @fetch_rss('http://dropular.net/feed/rss/flycasual');
$i = 0;
foreach ($rss->items as $item) {
if (strpos($item['description'], “
$size = GetImageSize($image[1]);
$width = $size[0];
$height = $size[1];
if ($width > 150){
$ratio = 150 / $width;
$height = round($height * $ratio); ?>
<a href=”<?php echo $item['link']; ?>” target=”_blank”><img src=”<?php echo $image[1];?>” width=”150″ height=”<?php echo $height; ?>”/></a><br/><br/>
<?php
}else{
?>
<a href=”<?php echo $item['link']; ?>” target=”_blank”><img src=”<?php echo $image[1];?>” width=”<?php echo $width; ?>” height=”<?php echo $height; ?>”/></a><br/><br/>
<?php }
$i += 1;
if ($i == 5){
break;
}
}
}
Explanations:
if (strpos($item['description'], “<img”)) {A “drop” can also contain website links or video. I was not interested in putting either in our little feed column. The strpos() function is used to check for the tag syntax.
$image = explode('"', $item['description']);
$size = GetImageSize($image[1]);The explode function is similar to a split() and returns an array on the input string delimited by whatever you supply (in our case double-quotes). This isolates the URL for the image in the 2nd position of our zero-based array $image (which would be $image[1]). Now that we have the URL, we pass it to the GetImageSize() function so we can see how big it is. Obviously you can remove this logic if you want to display the images in their actual sizes. The remaining lines of code just do some basic math to resize and display the image. I’m also incrementing a counter ($i) because I wanted to limit my column of images to only display five at a time. Obviously you can adjust this area for whatever type of markup you are looking to produce.
As usual with showing an external feed, it’s “internet correct” to give some love and linage back to the host.
Just for silliness, below is another variation of the loop that randomizes your feed (instead of returning the last [n] items).
require_once (ABSPATH . WPINC . '/rss.php');
// insert the feed URL here
$rss = @fetch_rss('http://dropular.net/feed/rss/flycasual');
$show_count = 0;
$items = $rss->items;
$id_list = range(0, (count($items) - 1));
shuffle($id_list);
for ($i = 0; $i <= (count($items) - 1); $i++){
$item_index = $id_list[$i];
$item = $items[$item_index];
if (strpos($item['description'], "
$image = explode('"', $item['description']);
$size = GetImageSize($image[1]);
$width = $size[0];
$height = $size[1];
if ($width > 150){
$ratio = 150 / $width;
$height = round($height * $ratio); ?>
<a href=”<?php echo $item['link']; ?>” target=”_blank”><img src=”<?php echo $image[1];?>” width=”150″ height=”<?php echo $height; ?>”/></a><br/><br/>
<?php }else{ ?>
<a href=”<?php echo $item['link']; ?>” target=”_blank”><img src=”<?php echo $image[1];?>” width=”<?php echo $width; ?>” height=”<?php echo $height; ?>”/></a><br/><br/>
<?php }
//only increment show_scount when we find a drop that has an image
$show_count++;
}
if ($show_count >= 5) break;
}
hate to be blowing my own horn, but built a WP plugin for this.
http://nitzan.co.uk/dropularrss/
Just wondering if you had any Dropular invites to give / swap…? Would be appreciated.
Very interesting… thanks.
Steven -
Sorry for the dealy, but if you are still looking for an invite we do have one to spare, is [stevenkirby@f2s.com] the email you want to use?
If Steven wont use the dropular invite, I would love to have it.
[cassilomo at gmail.com]
thanks!