I’ve been a daily visitor of ffffound for some time now, but I have never been lucky enough to receive an invite to actually use it. It’s a GREAT source of inspiration for all types of design, and I constantly refer to it and the QBN pic of the day thread for some good laughs and beautiful pictures. After realizing that I had a spare domain name I decided it was time to try and hack together a WordPress theme with a few plugins that would emulate ffffound, and its related images feature.

Download the theme and necessary plugins: VNovember_ffff.zip
To see the final working version of this theme+plugins: VNovember Image Bookmarking

Preface – What this theme + plugins will/will not do

I knew my version wouldn’t function exactly like the real thing, because I don’t really know how it works, and because I am somewhat limited to what WordPress has to offer. There were a few key elements of ffffound that I felt were the most important and useful part of its service, and I’ll be trying to replicate that functionality with WordPress and a few Firefox addons:

• Related images and recommendations based on post content and tags
• Displaying related images on homepage and post pages
• Displaying tag counts on the left side of the page
• Come up with an easy way to post the images via iPhone, Scribefire (direct from Firefox) and an easy way to thumbnail the images. (CSS for now)

***I recommend using a blank, fresh WordPress installation with no posts. (Not even the Hello World post) Or else you’ll have to go through your database and unpublish all your content posts or else they will start showing up in your related posts section when we only want images to show up

Upload the theme + plugins

I was able to accomplish most of this with some fancy CSS for IE and a few workarounds. For the most part the site is very easy to post to and looks very similar to ffffound. All you need to get this theme working is the VNovember_ffff.zip which contains the WordPress theme and the necessary plugins. To get these plugins individually you can go to their respective homepages:

• Yet Another Related Posts plugin (This one you’ll have to take from my zip as it is modified to work with images instead of using only text)
  
• Configurable Tag Cloud plugin
• SEO Friendly Images plugin

After downloading the zip do the following to get your files in the right place.

1. Unzip the theme
2. Upload the files in the “plugins” directory to your wp-content/plugins directory
3. Activate Configurable Tag Cloud plugin, SEO Friendly Images plugin, and Yet Another Related Posts plugin via the WordPress Plugins page
4. Upload the theme files to wp-content/themes so that the vnovember_ffff directory resides in yoursite.com/wp-content/themes/vnovember_ffff

Configure the plugins

Now that you have all the files in place you need to configure them. The Yet Another Related Posts plugin has settings, but I’ve made custom function arrays for them so you should not have to modify the settings page for this plugin. If you would like more/less related images to show up you can edit the functions in the single.php file and the index.php  file included in the vnovember_ffff theme directory.

From your WordPress Administration you need to add the Configurable Tag Cloud plugin to your sidebar. There are two sidebars with this theme, one on the left column and one in the bottom above the footer. Add the Configurable Tag Cloud plugin to your sidebar1 and apply these settings:

Tags, Uploading Images, making it work

The way this theme works is by using the tags you apply to each post to determine which images are somewhat alike. Every time you tag something the plugin will search through your posts and find other images that are similar and display the closest matches.

The easiest way to get images posted quickly is by using the Scribefire Firefox plugin. It takes just a few seconds to upload an image, add the tags, and publish the post all from your browser window. (You can still post from the WordPress Admin if you’d like) You can also snap pictures with your iPhone and use the WordPress iPhone application to post images directly from your phone.

If you decide to use the Scribefire Firefox plugin I recommend turning off the max image with option so that Scribefire isn’t trying to put inline styles in your image tags.

Some important things to remember:

• This theme does not have any commenting or trackbacks enabled
• There’s no need for multiple categories-just use tags
• This theme will only work and display properly if you only post images in your post body section
• You can hot link to images or upload them. I recommend uploading images to your own server and putting them in your posts rather than stealing someone else’s hosted images.
• This theme assumes your WordPress blog only has images, no textual, content related posts. If you want to have content related posts as well then I recommend using pages.

Plans for the future

A couple of plans for the future of this experiment (hopefully with some help from others!) would be to:

• Automatically pull the images src attribute for creating a link to the full size image from individual post pages using JQuery. (I haven’t quite gotten this to work yet)
• Create and cache thumbnails to related images on the fly with phpThumb. (not quite sure how to get this done either)
• Keep thumbnails to their proper aspect ratio (currently the related thumbnails scale improperly if they’re too tall)
• Possibly port this to WordPress MU so you can actually have user accounts with their own image bookmarking

A head start on the JQuery solution that I couldn’t seem to get working:

$(function() {

var imageSrc = $(“div.entry-content p img”).attr(“src”);
$(‘<a href=’+ imageSrc +).prependTo(“div.entry-content p img”);
$(“</a>”).appendTo(“div.entry-content p img”);
});

This seemed to get the proper image source URL, but it would never append the proper link href to the images. Please let me know of any problems you are having as well as bug reports in the comments, and if you can offer solutions to any of the three items I outlined above.

Happy image bookmarking!