Ever since the day we were drafted to Dribbble, we at Paravel have fell in love and have become more and more interested in it.
Trent Walton seeded the idea and asked me to make a Dribbble plugin, so I created a plugin that by default mimic’d the wonderful UI created by Dan Cederholm and Rich Thornett. After a couple emails with those gentlemen for their permission to use some assets and a day of coding, we got something we were proud of.
One of the most important thing I wanted to maintain was flexibility in the plugin so there are lots of options you can turn on and off. Have a look at all the features, or just download it.
Features
- Uses the signature Dribbble shot CSS.
- Specify the number of shots (up to 10).
- You can enable/disable drop shadow.
- Super optimized. No fluff.
- Use the sidebar widget or embed anywhere.
- Choose to ignore the CSS and roll your own.
- Grab the 200×150 teaser image OR the use the full 400×300 shot.
Updated Version 1.0.1
- Now with less deprecated functions!
- Fixed issue with needless expand($args) call.
- Added border-bottom to shots CSS with no-shadow.
- Fixed issue where RSS feed/site rendered invalid because of extra whitespace.
Make Dribbbles Appear Faster
The default WordPress cache time for RSS feeds is 12 hours. This is not ideal. In order to switch that to something more reasonable open up your functions.php and add this line:
add_filter( 'wp_feed_cache_transient_lifetime', create_function( '$a', 'return 1800;' ) );
This will set the wp_feed_cache_transient_lifetime (that’s a mouthful!) to 1800 seconds (30minutes). Change 1800 to whatever number you’d like greater than 60. I rarely Dribbble daily, so I could set that threshold much higher and not be too out-of-date.
Rebound it!
Naturally, I posted a shot of this on Dribbble. If you use the plugin, why not rebound it with a screenshot and a link to your site. I really enjoy checking out people’s portfolios. Or post a link in the comments. Or both! You decide how much social media wizardry you want to perform.
Amazing, can’t wait to use this. Thanks a lot.
This is great, dribble has made me want to design more (I’m mainly a developer) and this plugin makes it even worse. Can’t wait to implement this, once I get more stuff in my account that is, heh.
You’re a wizard.
You’re like totally awesome… to the max!
Genius.
I’m using the plugin in my next premium theme at themeforest :) http://tf.ivorpadilla.net/communitie/
Thanks a lot mate.
Really great work! I’m using a modified version of the plugin on my blog:
http://www.4muladesign.com/creative-blog/
Many thanks ;)
Awesome guys, love this.
It doesn’t seem to be pulling in my latest dribbbles though, any ideas? Does it take a while for them to update or something?
I think WordPress’ default fetch time for feeds is 12 hours. I’ll work up some documentation on how to set that to something reasonable. Also, I’m planning on a version 2 of the plugin that will be way more robust and will be based on the new Dribbble API.
Awesome work pal, thanks a lot.
nice work…I look forward to using this :)
Cool plugin, but getting the following error:
Warning: extract() [function.extract]: First argument should be an array in /home/xxx/public_html/blog/wp-content/plugins/wp-dribbble/wp-dribbble.php on line 29
Also, an option to turn off the numbering would be cool as well.
thanks! that should be fixed in the latest version, but the quick fix is to just comment out that line 29. it was causing errors on some servers.
re: turning off numbers, sounds simple enough i can look into it. but the quick fix for that would be to add to your stylesheet:
.dribbbles { list-style-type:none;}
Hello Dave,
I was wondering if you’d mind if I made a port of this as a Drupal module as perhaps members of the Drupal community could find this useful also?
Have at it! I don’t use Drupal so I would never get to it. It might also be worth checking out the Dribble API and some of the javascript libraries people have made. Check out Rebbbounds for some of those tools.
Thanks Dave. This is what I have done so far:
http://github.com/ylynfatt/triple_double
Keep up the good work.
Thanks a ton!
I’m currently working on my blog design and am wanting to know how to change the format for multiple images from a vertical layout to a horizontal vertical. Any thoughts?
Thanks again!
Hey Bo,
You’ll want to uncheck the “Include CSS?” box and use your own CSS. But feel free to use what’s bundled as a starter. You’ll probably need to change .dribbbles .dribbble a little:
.dribbbles .dribbble { position:relative; display:inline-block; overflow:hidden; border-bottom:1px solid #e5e5e5 }Although you’ll need to read this blog post on cross browser compatibilty to get it full working. Let me know if that helps!
Great! Can wait to embed it in my site! Thanks for the effort!
Thanks, that fixed it (the number listing thing)!
For some reason every other image is not loading. The images are not pulling from dribble for some reason. Check out the site and see what I am talking about and if you have any ideas.
Love your site and all your tips.
Hello. Thanks for the great plugin! Is there a way to exclude certain shots? A lot of times I post the same work on my blog and dribbble and would like to hide those dribbble shots that duplicate work already posted on the blog…
Thanks!
@Jawn, there’s not a way to do that at the moment. You may want to try Half Court Shot (a jQuery plugin from @mediahack) http://www.mediahack.com/apps/half-court-shot
With that you’d be able to pull in individual shots you want via javascript. It **should** be embedabble in a wordpress text widget. Good luck!
Thanks! Ill give it a shot…
Is it possible to size down the thumbnail image? My sidebar is just a bit small for this. Using the twentyten theme with child theme modifications (but not to the sidebar).
You can use the smaller thumbs (200×150). But if that doesn’t work, then maybe you’ll want to make your own CSS for it which you can do.
As I move my own site over to a responsive design, I may rework the plugin a bit… I haven’t touched it in a long time. Or I may just do my own custom CSS.
My friend Nishant made a Dribbble plugin that requires a bit of custom coding, but you could get as granular as you’d like – check it out here http://rainypixels.com/writings/journal/rainyshots-a-dribbble-plugin/
I will use this plugin in my website http://www.vietnamcomputer.org
Very nice, I am using it in my site too .
Hello Dave,
I love your plugin. Thank you for developing it!
However, I have a grey line under my shot and can’t for the life of me find how to make it disappear…
http://www.melissabrunet.com/blog/?p=221
If you could help me figure it out, would greatly appreciate it :)
Thank you!
A quick look at Web Inspector, it looks like the grey line is coming from ~line 22 of your style.css file. You’ll maybe want to hack the plugin or add 2 lines towards the bottom of your style.css file:
Hopefully that’ll do the trick.
It did do the trick! Thank you so much for your help, I really appreciate it :)