Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 228b4fb
Showing
6 changed files
with
275 additions
and
0 deletions.
There are no files selected for viewing
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,104 @@ | ||
=== WP Dribbble === | ||
Contributors: davatron5000 | ||
Donate link: http://github.com/davatron5000 | ||
Tags: dribbble, designer, social media, widget | ||
Requires at least: 2.9.2 | ||
|
||
A sidebar widget for Dribbble, the show and tell social network for web designers, developers and other creatives. | ||
|
||
== Description == | ||
|
||
By request, I've created a sidebar widget for Dribbble, the show and tell social network for web designers, developers and other creatives. | ||
|
||
Until the fine folks at Dribbble release their fully functioning API, this plugin will take the latest shots from your RSS feed. | ||
|
||
The page was created to mimic the Popular page (design by Dan Cederholm, aka @simplebits) with the small 200x150 thumbs. | ||
|
||
Features | ||
|
||
* Specify the number of shots (up to 10). | ||
* You can enable/disable drop shadow. | ||
* You can choose to ignore the CSS from the plugin and create your own. | ||
|
||
|
||
|
||
== Installation == | ||
|
||
There are a few ways to get the plugin working. Here's the normal way: | ||
|
||
1. Upload the plugin to your plugins directory. | ||
1. Activate the plugin. | ||
1. Drag the widget into your sidebar and configure the widget. Click save and visit your site and you should see it in the sidebar. | ||
|
||
If you don't use sidebars and are a SUPER-DIY "roll your own" kind of guy/gal, then here's what you do: | ||
|
||
1. Upload the plugin to your plugins directory. | ||
1. Activate the plugin. | ||
1. Drag the widget into your sidebar and configure the widget. Click save. | ||
1. "Remove" the widget immediately or drag it to "Inactive Widgets". | ||
1. In your theme add the following php snippet `<?php do_action('wp_dribbble'); ?>` | ||
|
||
Roll Your Own CSS | ||
|
||
By default the application will include the following CSS in an inline CSS block, which may or may not validate. If you hate inline CSS or think you can it CSS better, just uncheck the option. | ||
|
||
Below is the sample CSS block that will load by default. | ||
|
||
` | ||
<style type="text/css"> | ||
.dribbbles{list-style-type:none;margin:0px 0px 1.5em;} | ||
.dribbbles li{font-size:15px;position:relative;width:220px;padding:0;margin:0 0 1.5em 0;} | ||
.dribbbles .dribbble{font-family:"Helvetica Nueue", Helvetica, Arial, sans-serif;position:relative;clear:left;overflow:hidden;} | ||
.dribbbles .dribbble-shot{padding:10px;background:url(http://yoursite.com/path/to/plugins/wp-dribbble/images/dribbblesprite.png) no-repeat -10px -330px;} | ||
.dribbbles .dribbble-over{position:absolute;top:10px;left:10px;z-index:1;width:180px;height:130px;margin:0!important;padding:10px;font-size:0.8em;line-height:2em;text-decoration:none;color:#888;background:url(http://yoursite.com/path/to/plugins/wp-dribbble/images/dribbblesprite.png) no-repeat -110px -160px;} | ||
.dribbbles .dribbble-link{position:relative;z-index:2;} | ||
.dribbbles img{margin:0;width:200px;height:auto;opacity:1;-webkit-transition:opacity 0.2s linear;-o-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;} | ||
.dribbbles a:hover img{opacity:0.1;-webkit-transition:opacity 0.2s linear;-o-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;} | ||
.dribbbles strong{display:block;font-weight:bold;font-size:1.4em;line-height:1.2em;color:#ea4c88;} | ||
.dribbbles .dim{font-weight:bold;color:#666;} | ||
.dribbbles em{position: absolute;bottom:11px;left:10px;font-size:1em;line-height:1em;font-weight:normal;font-style:normal;} | ||
.dribbbles .dribbble-img{width:200px;height:150px;overflow:hidden;} | ||
</style> | ||
` | ||
|
||
And here's the generated code (pretty much the same as Dribbble's). | ||
|
||
` | ||
<ol class="dribbbles"> | ||
<li class="group"> | ||
<div class="dribbble"> | ||
<div class="dribbble-shot"> | ||
<div class="dribbble-img"> | ||
<a href="http://dribbble.com/shots/..." class="dribbble-link"><img src="http://dribbble.com/..._teaser.jpg" alt="Title"/></a> | ||
<a href="http://dribbble.com/shots/..." class="dribbble-over"><strong>Title</strong> | ||
<span class="dim">Your Player Name</span> | ||
<em>January 01, 2010</em> | ||
</a> | ||
</div> | ||
</div> | ||
</div> | ||
</li> | ||
</ol> | ||
` | ||
|
||
|
||
== Frequently Asked Questions == | ||
|
||
= Can I do my own CSS? = | ||
|
||
Yes. Here's the CSS Dribbble uses (more or less). | ||
|
||
= What about foo bar? = | ||
|
||
Answer to foo bar dilemma. | ||
|
||
== Screenshots == | ||
|
||
1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from | ||
the directory of the stable readme.txt, so in this case, `/tags/4.3/screenshot-1.png` (or jpg, jpeg, gif) | ||
2. This is the second screen shot | ||
|
||
== Changelog == | ||
|
||
= 1.0 = | ||
* First version suckkkkaaz. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,171 @@ | ||
<?php | ||
/* | ||
Plugin Name: WP Dribbble | ||
Plugin URI: http://daverupert.com/category/wordpress/wp-dribbble/ | ||
Description: Pull in your Dribbble Feed. | ||
Author: Dave Rupert | ||
Version: 1 | ||
Author URI: http://daverupert.com/ | ||
*/ | ||
/* | ||
Copyright 2010 Dave Rupert (email : dave@paravelinc.com) | ||
This program is free software; you can redistribute it and/or modify | ||
it under the terms of the GNU General Public License, version 2, as | ||
published by the Free Software Foundation. | ||
This program is distributed in the hope that it will be useful, | ||
but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
GNU General Public License for more details. | ||
You should have received a copy of the GNU General Public License | ||
along with this program; if not, write to the Free Software | ||
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA | ||
*/ | ||
|
||
function wpDribbble() { | ||
include_once(ABSPATH . WPINC . '/rss.php'); | ||
extract($args); | ||
|
||
$options = get_option("widget_wpDribbble"); | ||
$playerName = $options['playerName']; | ||
$maxitems = $options['maxItems']; | ||
|
||
$rss = fetch_rss("http://dribbble.com/players/$playerName/shots.rss"); | ||
$items = array_slice($rss->items, 0, $maxitems); | ||
|
||
if (!empty($items)): ?> | ||
<ol class="dribbbles"> | ||
<?php | ||
foreach ( $items as $item ): | ||
preg_match("/(http).*(jpg|jpeg|gif|png)/", $item['description'], $image_url); | ||
$image = $image_url[0]; | ||
if(!$options['bigImage']) { | ||
$image = preg_replace('/.(jpg|jpeg|gif|png)/', '_teaser.$1',$image); #comment this out if you want to use the big 400x300 image | ||
} | ||
?> | ||
<li class="group"> | ||
<div class="dribbble"> | ||
<div class="dribbble-shot"> | ||
<div class="dribbble-img"> | ||
<a href="<?php echo $item['link']; ?>" class="dribbble-link"><img src="<?php echo $image ?>" alt="<?php echo $item['title'];?>"/></a> | ||
<a href="<?php echo $item['link']; ?>" class="dribbble-over"><strong><?php echo $item['title']; ?></strong> | ||
<span class="dim"><?php echo $options['playerName'] ?></span> | ||
<em><?php echo date('F d, Y', strtotime($item['pubdate'])); ?></em> | ||
</a> | ||
</div> | ||
</div> | ||
</div> | ||
</li> | ||
<?php endforeach;?> | ||
</ol> | ||
<?php endif; | ||
} | ||
|
||
function wpDribbble_head() { | ||
$options = get_option("widget_wpDribbble"); | ||
$dir = WP_PLUGIN_URL.'/'.str_replace(basename( __FILE__),"",plugin_basename(__FILE__)); | ||
?> | ||
<!-- wp-dribbble plugin --> | ||
<style type="text/css"> | ||
.dribbbles{list-style-type:none;margin:0px 0px 1.5em;} | ||
.dribbbles li{font-size:15px;position:relative;width:220px;padding:0;margin:0 0 1.5em 0;} | ||
.dribbbles .dribbble{font-family:"Helvetica Nueue", Helvetica, Arial, sans-serif;position:relative;clear:left;overflow:hidden;<?php if($options['dropShadow']):?>padding:0 0 10px 0;background:url(<?php echo $dir; ?>images/dribbblesprite.png) no-repeat -10px -480px;<?php endif;?>} | ||
.dribbbles .dribbble-shot{padding:10px;background:url(<?php echo $dir; ?>images/dribbblesprite.png) no-repeat -10px -330px;} | ||
.dribbbles .dribbble-over{position:absolute;top:10px;left:10px;z-index:1;width:180px;height:130px;margin:0!important;padding:10px;font-size:0.8em;line-height:2em;text-decoration:none;color:#888;background:url(<?php echo $dir; ?>images/dribbblesprite.png) no-repeat -110px -160px;} | ||
.dribbbles .dribbble-link{position:relative;z-index:2;} | ||
.dribbbles img{margin:0;width:200px;height:auto;opacity:1;-webkit-transition:opacity 0.2s linear;-o-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;} | ||
.dribbbles a:hover img{opacity:0.1;-webkit-transition:opacity 0.2s linear;-o-transition:opacity 0.2s linear;-moz-transition:opacity 0.2s linear;} | ||
.dribbbles strong{display:block;font-weight:bold;font-size:1.4em;line-height:1.2em;color:#ea4c88;} | ||
.dribbbles .dim{font-weight:bold;color:#666;} | ||
.dribbbles em{position: absolute;bottom:11px;left:10px;font-size:1em;line-height:1em;font-weight:normal;font-style:normal;} | ||
.dribbbles .dribbble-img{width:200px;height:150px;overflow:hidden;} | ||
</style> | ||
<?php | ||
} | ||
|
||
function wpDribbble_control() { | ||
$options = get_option("widget_wpDribbble"); | ||
if (!is_array( $options )) { | ||
$options = array( | ||
'playerName'=> 'Your Player Name', | ||
'maxItems' => '5', | ||
'includeCSS' => true, | ||
'dropShadow' => true, | ||
'dropShadow' => false | ||
); | ||
} | ||
if ($_POST['wpDribbble-Submit']) { | ||
$options['playerName'] = htmlspecialchars($_POST['wpDribbble-WidgetPlayerName']); | ||
$options['maxItems'] = htmlspecialchars($_POST['wpDribbble-WidgetMaxItems']); | ||
$options['includeCSS'] = htmlspecialchars($_POST['wpDribbble-WidgetIncludeCSS']); | ||
$options['dropShadow'] = htmlspecialchars($_POST['wpDribbble-WidgetDropShadow']); | ||
$options['bigImage'] = htmlspecialchars($_POST['wpDribbble-WidgetBigImage']); | ||
update_option("widget_wpDribbble", $options); | ||
} | ||
?> | ||
<style type="text/css"> | ||
.labbbel { width: 90px; display:inline-block; } | ||
.quiet { color:#CCC;} | ||
</style> | ||
<p> | ||
<label class="labbbel" for="wpDribbble-WidgetPlayerName">Player Name: </label> | ||
<input type="text" id="wpDribbble-WidgetPlayerName" name="wpDribbble-WidgetPlayerName" value="<?php echo $options['playerName'];?>" /> | ||
</p> | ||
<p> | ||
<label class="labbbel" for="wpDribbble-WidgetMaxItems">No. of Shots: </label> | ||
<select id="wpDribbble-WidgetMaxItems" name="wpDribbble-WidgetMaxItems"> | ||
<option value="1" <?php if($options['maxItems'] == 1) echo "selected";?>>1</option> | ||
<option value="2" <?php if($options['maxItems'] == 2) echo "selected";?>>2</option> | ||
<option value="3" <?php if($options['maxItems'] == 3) echo "selected";?>>3</option> | ||
<option value="4" <?php if($options['maxItems'] == 4) echo "selected";?>>4</option> | ||
<option value="5" <?php if($options['maxItems'] == 5) echo "selected";?>>5</option> | ||
<option value="6" <?php if($options['maxItems'] == 6) echo "selected";?>>6</option> | ||
<option value="7" <?php if($options['maxItems'] == 7) echo "selected";?>>7</option> | ||
<option value="8" <?php if($options['maxItems'] == 8) echo "selected";?>>8</option> | ||
<option value="9" <?php if($options['maxItems'] == 9) echo "selected";?>>9</option> | ||
<option value="10" <?php if($options['maxItems'] == 10) echo "selected";?>>10</option> | ||
</select> | ||
</p> | ||
<p> | ||
<label class="labbbel" for="wpDribbble-WidgetIncludeCSS">Include CSS? </label> | ||
<input type="checkbox" id="wpDribbble-WidgetIncludeCSS" name="wpDribbble-WidgetIncludeCSS" <?php if($options['includeCSS']) echo "checked";?>> | ||
<em class="quiet">Default: On</em> | ||
</p> | ||
<p> | ||
<label class="labbbel" for="wpDribbble-WidgetDropShadow">Drop shadow? </label> | ||
<input type="checkbox" id="wpDribbble-WidgetDropShadow" name="wpDribbble-WidgetDropShadow" <?php if($options['dropShadow']) echo "checked";?>> | ||
<em class="quiet">Default: On</em> | ||
</p> | ||
<p> | ||
<label class="labbbel" for="wpDribbble-WidgetBigImage">Big Image? </label> | ||
<input type="checkbox" id="wpDribbble-WidgetBigImage" name="wpDribbble-WidgetBigImage" <?php if($options['bigImage']) echo "checked";?>> | ||
<em class="quiet">Default: Off</em> | ||
</p> | ||
<input type="hidden" id="wpDribbble-Submit" name="wpDribbble-Submit" value="1" /> | ||
|
||
<?php | ||
} | ||
|
||
function widget_wpDribbble($args) { | ||
extract($args); | ||
echo $before_widget; | ||
echo $before_title;?>Dribbble<?php echo $after_title; | ||
wpDribbble(); | ||
echo $after_widget; | ||
} | ||
|
||
function wpDribbble_init() | ||
{ | ||
$options = get_option("widget_wpDribbble"); | ||
register_sidebar_widget(__('Dribbble'), 'widget_wpDribbble'); | ||
register_widget_control( 'Dribbble', 'wpDribbble_control'); | ||
add_action( 'wp_dribbble', 'wpDribbble' ); | ||
if($options['includeCSS']) { | ||
add_action('wp_head', 'wpDribbble_head'); | ||
} | ||
} | ||
add_action("plugins_loaded", "wpDribbble_init"); | ||
?> | ||
|