Using WordPress to make your own personal ffffound
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.
- Unzip the theme
- Upload the files in the “plugins” directory to your wp-content/plugins directory
- Activate Configurable Tag Cloud plugin, SEO Friendly Images plugin, and Yet Another Related Posts plugin via the WordPress Plugins page
- 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!
Like this post? Bookmark it!
Email to a friend
Your message has been sent!
Please enter a valid email.
Your email failed. Try again later.
Related Posts
Most Popular3
About the Author
Tim is the co-owner of Assault, and tends to think he can party twice as hard as anyone. Follow him on twitter @assault Email this Author | All posts by tim
Amazing! Nice work.
Great work Tim! I might find some use for this.
As far as thumbnails go, have you looked into using the commercial WP plugin called Viva Thumbs? It doesn’t cost much but is very good or you can take a look at the timthumb.php script as used by the Mimbo theme.
I have not looked at either of those–I think the problem is that when we upload the images, the post contains just the image and the “related images” plugin is just actually posting the content of the posts (therefore it’s actually displaying the post’s info and scaling it with CSS)
If there was a way to somehow make it scale based on the fact that it was in the relatedImg div and not in the actual content-entry div then it might work.
This one hell of an idea! Great work so far. Can’t wait to see what you will do with it. I have some ideas about how I’d use it.
[...] Using WordPress to make your own personal ffffound » Assault Blog (tags: tutorial wordpress) [...]
[...] Using WordPress to make your own personal ffffound » Assault Blog (tags: blog wordpress) [...]
waiting for the next revision “Plans for the future”
hope can nearer to ffffound.
when we use it?!
[...] how to create you own FFFFound using wordpress and download the related theme and plugin. Read more about it. 25 Jan 2009 | Uncategorized | Comment (0) Vertical2262 = false; ShowAdHereBanner2262 = [...]
[...] Blog has an interesting tutorial where Tim shows how he built a Ffffound clone on WordPress. Ffffound is a great site for inspiration, and a sort of image bookmarking service for those who [...]
[...] powered ffffound clone. Image post supports only, but still [...]
hi…i don’t understand why i have no “related” thumb’s. i just have the titles…can someone help me? did i make a mistake?
I believe I need to repackage this and do some bugfixes.
You need to have tagged some of your entries and after awhile u will have related images showing up.
The more videos you have the more accurate the tagging of related items will be.
Hello!
Very Interesting post! Thank you for such interesting resource!
PS: Sorry for my bad english, I’v just started to learn this language
See you!
Your, Raiul Baztepo
[...] FFFFound (or FFFound with WordPress) [...]
[...] you take alot of pictures and want them on your FFFFound WordPress photo blog like I do, then you may want to install the WordPress application. It allows you to blog on the go, [...]
hello i was wondering if you know how to make the ffffound tile and list post arrange, that will be cool.
What specifically are you referring to? I’m not sure what you mean by the list post arrange…
[...] Blog has an interesting tutorial where Tim shows how he built a Ffffound clone on WordPress. Ffffound is a great site for inspiration, and a sort of image bookmarking service for those who [...]
[...] via assaultblog [...]
[...] 10. Ffffound Clone with WordPress [...]
Hey great work dude! I have bookmarked you and will take a closer look at this awesome theme. I have also been a longtime fan of ffffound but not fortunate enough to be given an invite.. *sniff
@jimmy
I even emailed the people who run ffffound and I’ve not been able to get an invite!
Yeap Nice work
[...] Ffffound Clone with WordPress [...]
[...] 10. Ffffound Clone with WordPress [...]
First of all, great template! I just have 1 problem I couldn’t solve.
When I klick a certain image the related posts plugin should show me thumbnails of the related images.
Instead of thumbnails I get the full images.
Am I missing something?
The related posts plugin included shows related posts–the images that are in them, and thumbnails them with CSS.
If you click on one of those it takes you to the full view post page, that’s how I had it working. How did you want it to work?
Nice article, thank you!