SB Uploader

I originally wrote this for a client as a way to get company logos to appear inside WordPress posts… easy you say huh? What about if we were dealing with people who had no idea what to do when looking at the standard WordPress ‘Add Media’ or ‘Add Image’ page. It all seemed a bit too complicated for the average person so SB Uploader was born.

The idea of the plugin is that it means the act of uploading an image can be done on the same page as the Post/Page editor and there is no separate upload button, just the Save/Publish Post/Page button as normal. This ensures that as part of their blog post or copywriting process an image could be chosen before publishing.

This plugin lets you add as many images as you like to any WordPress object.. be it Posts, Pages, Categories, Tags, Custom Post Types or Custom Taxomonies. It optionally can set the WordPress Featured Image to take advantages of themes that use this feature. It also allows for a fallback image which will be provided in the event that an image was not uploaded. Shortcodes are created for each image so that you can upload images and use the resultant shortcode anywhere in your template/widget structure.

There is a fallback feature with each uploader to allow you to centrally specify the URL of an image to put in place when one is not uploaded to an object. There are always times when you don’t want an image on a specific page so I have added a ‘disable fallback’ option to facilitate this.

I’m pretty sure that’s all bases covered for now.. Do let me know if you want to see this plugin extended in ANY way.

Integration Instructions

How does it work (Posts/Pages/Custom Post Types)?

A metabox is added to the top right hand corner of the edit page interface with a simple file selector with browse button. When the user hits Publish/Save the file is uploaded and the URL put into an object custom field named per the settings page included with the plugin.

A lot of themes will make use of the Featured Image and as such this plugin can easily set this with no theme modification necessary. Alternatively if you wish to use them more fully within your theme you can use one of the following pieces of code. Note that these are the function declarations themselves. The usage instructions are below them:

function sbu_get_the_image($custom_field, $post_id=false, $url_only=false, $width=false, $height=false, $quality=100) {
    global $sbu;

    return $sbu->get_the_post_image($custom_field, $post_id, $url_only, $width, $height, $quality);
}

function sbu_the_image($custom_field, $post_id=false, $url_only=false, $width=false, $height=false, $quality=100) {
    echo sbu_get_the_image($custom_field, $post_id, $url_only, $width, $height, $quality);
}

function sbu_get_the_image_resized($custom_field, $width=false, $height=false, $quality=100, $post_id=false) {
    return sbu_get_the_image($custom_field, $post_id, false, $width, $height, $quality);
}

function sbu_the_image_resized($custom_field, $width=false, $height=false, $quality=100, $post_id=false) {
    echo sbu_get_the_image_resized($custom_field, $width, $height, $quality, $post_id);
}

function sbu_get_the_category_image($custom_field, $post_id=false) {
    global $sbu;

    return $sbu->get_taxonomy_image($custom_field, $post_id);
}

The following code to grab images from the core uploader for the Featured Image functionality. This method resizes and saves multiple versions within the system as you would expect from the normal WP uploader but with a simpler, more customer friendly, interface.

<?php
function sbu_the_wp_image($image_size_name='full', $post_id=false) {
    global $sbu;

    return $sbu->get_image($image_size_name, $post_id);
}
?>

If the above doesn’t make sense then, in basic terms, you just need to put something like this in your theme:

<?php sbu_the_image('post_image'); ?>

or if you wish to resize an image to fit a slot use this:

<?php sbu_the_image_resized('post_image', 700, 200); ?>

This would output the image as 700×200. Both parameters are optional so if you wanted a proportional resize based on 700 pixels in width then use this:

<?php sbu_the_image_resized('post_image', 700); ?>

Or the old fashioned direct method of retrieving the image.

if ($image = get_post_meta(get_the_ID(), 'post_image', true)) {
 $image = '<img src="' . $image . '" alt="Image" />';
}
echo $image;

How does it work (Tags/Categories/Taxonomies)?

As above but the file upload boxes are added to the taxonomy edit pages instead. Just click browse, choose an image and save the taxonomy/tag/category and you’re done.

I would normally wrap the image variable in a div tag with a class or give the image itself a class so that I can restrict the size or float the image (or both?) using the stylesheet. It simply means that you can include that image inside a template if it exists. Of course you could use the resize function I have provided above to get that perfect sized image on your site.

Note

I would like to add that there are coffee/donation adverts in this plugin. I personally hate it when, on adding a new plugin, dashboard widgets, donate buttons and begging messages appear. This plugin is clutter free and support is always available via my site (best responses here) and the WP forums (slower responses but I will get back to you). Have fun!

More info at http://www.sean-barton.co.uk/sb-uploader/