Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I find it very unnecessary to have an "add image" button that brings me to yet another screen that will let me upload content to my post.

Ideally I would like to have a meta box with the option to add images directly in a meta box.

I managed to get some functionality by copy the source for the media-upload form and paste it in a meta box. The image I choose gets uploaded, however I doesn't show any progressbar, and I need to find a way to list attached images below for better overview.

Anyone managed to do this?

Code:

function add_image_test() { 
?>
<script type="text/javascript">
//<![CDATA[
addLoadEvent = function(func){if(typeof jQuery!="undefined")jQuery(document).ready(func);else if(typeof wpOnload!='function'){wpOnload=func;}else{var oldonload=wpOnload;wpOnload=function(){oldonload();func();}}};
var userSettings = {'url':'/','uid':'2','time':'1300489693'};
var ajaxurl = 'http://xxx.com/wp-admin/admin-ajax.php', pagenow = 'media-upload-popup', adminpage = 'media-upload-popup',
isRtl = 0;
//]]>
</script>

<script type='text/javascript'>
/* <![CDATA[ */
var swfuploadL10n = {
    queue_limit_exceeded: "You have attempted to queue too many files.",
    file_exceeds_size_limit: "This file exceeds the maximum upload size for this site.",
    zero_byte_file: "This file is empty. Please try another.",
    invalid_filetype: "This file type is not allowed. Please try another.",
    default_error: "An error occurred in the upload. Please try again later.",
    missing_upload_url: "There was a configuration error. Please contact the server administrator.",
    upload_limit_exceeded: "You may only upload 1 file.",
    http_error: "HTTP error.",
    upload_failed: "Upload failed.",
    io_error: "IO error.",
    security_error: "Security error.",
    file_cancelled: "File canceled.",
    upload_stopped: "Upload stopped.",
    dismiss: "Dismiss",
    crunching: "Crunching&hellip;",
    deleted: "moved to the trash.",
    error_uploading: "&#8220;%s&#8221; has failed to upload due to an error"
};
try{convertEntities(swfuploadL10n);}catch(e){};
/* ]]> */
</script>
<script type='text/javascript' src='http://xxx.com/wp-admin/load-scripts.php?c=1&amp;load=jquery,utils,swfupload-all,swfupload-handlers,json2&amp;ver=2af6dbb1e89d69a2363895fac893188d'></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery('form#post').attr('enctype','multipart/form-data');
    jQuery('form#post').attr('encoding','multipart/form-data');
    });
</script>


<form enctype="multipart/form-data" method="post" action="http://xxx.com/wp-admin/media-upload.php?type=image&amp;tab=type&amp;post_id=1622" class="media-upload-form type-form validate" id="image-form">
<input type="submit" name="save" id="save" class="hidden" value="Save Changes"  /><input type="hidden" name="post_id" id="post_id" value="1622" />
<input type="hidden" id="_wpnonce" name="_wpnonce" value="2460ab002a" /><input type="hidden" name="_wp_http_referer" value="/wp-admin/media-upload.php?post_id=1622&amp;type=image&amp;" />

<script type="text/javascript">
//<![CDATA[
var uploaderMode = 0;
jQuery(document).ready(function($){
    uploaderMode = getUserSetting('uploader');
    $('.upload-html-bypass a').click(function(){deleteUserSetting('uploader');uploaderMode=0;swfuploadPreLoad();return false;});
    $('.upload-flash-bypass a').click(function(){setUserSetting('uploader', '1');uploaderMode=1;swfuploadPreLoad();return false;});
});
//]]>

</script>
<div id="media-upload-notice">
</div>
<div id="media-upload-error">
</div>
<script type="text/javascript">
var swfu;
SWFUpload.onload = function() {
    var settings = {
            button_text: '<span class="button">Select Files<\/span>',
            button_text_style: '.button { text-align: center; font-weight: bold; font-family:"Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif; font-size: 11px; text-shadow: 0 1px 0 #FFFFFF; color:#464646; }',
            button_height: "23",
            button_width: "132",
            button_text_top_padding: 3,
            button_image_url: 'xxx.com/wp-includes/images/upload.png?ver=20100531',
            button_placeholder_id: "flash-browse-button",
            upload_url : "xxx.com/wp-admin/async-upload.php",
            flash_url : "http://xxx.com/wp-includes/js/swfupload/swfupload.swf",
            file_post_name: "async-upload",
            file_types: "*.*",
            post_params : {
                        'post_id' : '1622', 
        'auth_cookie' : 'admin|1301439526|5e5e63158e880597c782656a719f1738', 
        'logged_in_cookie' : 'admin|1301439526|e01206ec12b5cee4a605f9abff385cc0', 
        '_wpnonce' : '2460ab002a', 
        'type' : 'image', 
        'tab' : 'type', 
        'short' : '1'           },
            file_size_limit : "4194304b",
            file_dialog_start_handler : fileDialogStart,
            file_queued_handler : fileQueued,
            upload_start_handler : uploadStart,
            upload_progress_handler : uploadProgress,
            upload_error_handler : uploadError,
            upload_success_handler : uploadSuccess,
            upload_complete_handler : uploadComplete,
            file_queue_error_handler : fileQueueError,
            file_dialog_complete_handler : fileDialogComplete,
            swfupload_pre_load_handler: swfuploadPreLoad,
            swfupload_load_failed_handler: swfuploadLoadFailed,
            custom_settings : {
                degraded_element_id : "html-upload-ui", // id of the element displayed when swfupload is unavailable
                swfupload_element_id : "flash-upload-ui" // id of the element displayed when swfupload is available
            },
            debug: false
        };
        swfu = new SWFUpload(settings);
};
//]]>
</script>

<div id="flash-upload-ui" class="hide-if-no-js">

    <div>
    Choose files to upload  <div id="flash-browse-button"></div>
    <span><input id="cancel-upload" disabled="disabled" onclick="cancelUpload()" type="button" value="Cancel Upload" class="button" /></span>

    </div>
    <p class="media-upload-size">Maximum upload file size: 4MB</p>
</div>

<div id="html-upload-ui">
    <p id="async-upload-wrap">

        <label class="screen-reader-text" for="async-upload">Upload</label>
        <input type="file" name="async-upload" id="async-upload" />
        <input type="submit" name="html-upload" id="html-upload" class="button" value="Upload"  />      <a href="#" onclick="try{top.tb_remove();}catch(e){}; return false;">Cancel</a>
    </p>
    <div class="clear"></div>
    <p class="media-upload-size">Maximum upload file size: 4MB</p>

</div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($){
    var preloaded = $(".media-item.preloaded");
    if ( preloaded.length > 0 ) {
        preloaded.each(function(){prepareMediaItem({id:this.id.replace(/[^0-9]/g, '')},'');});
    }
    updateMediaForm();
});
//]]>
</script>
<div id="media-items">
</div>
<p class="savebutton ml-submit">
<input type="submit" name="save" id="save" class="button" value="Save all changes"  /></p>
</form>
<script type='text/javascript'>
/* <![CDATA[ */
var commonL10n = {
    warnDelete: "You are about to permanently delete the selected items.\n  \'Cancel\' to stop, \'OK\' to delete."
};
try{convertEntities(commonL10n);}catch(e){};
var setPostThumbnailL10n = {
    setThumbnail: "Use as featured image",
    saving: "Saving...",
    error: "Could not set that as the thumbnail image. Try a different attachment.",
    done: "Done"
};
try{convertEntities(setPostThumbnailL10n);}catch(e){};
/* ]]> */
</script>
<script type='text/javascript' src='http://xxx.com/wp-admin/load-scripts.php?c=1&amp;load=hoverIntent,common,jquery-color,imgareaselect,image-edit,set-post-thumbnail&amp;ver=6356b0bc2df931d1f1d78f0d91f6539d'></script>
<script type="text/javascript">if(typeof wpOnload=='function')wpOnload();</script>

<?php
}
share|improve this question
add comment

1 Answer

up vote 4 down vote accepted

As Apple might've put it "There's a plugin for that" :)

(Faster Image Insert)

share|improve this answer
1  
Praise the lord, my prayers have been answered. Been googling/looking for hours. With some minor tweaks this is exactly what I wanted. Thanks alot! (They really should add more "relevant" information so that it shows up on google searches) –  INT Mar 19 '11 at 0:29
    
I know right! You're in luck that I only stumbled upon it a week or so ago (I think even from WP.SE!) –  TheDeadMedic Mar 19 '11 at 0:31
    
That's a real handy plugin, also note it's compatible with wplupload, should you be wanting to use that to... –  t31os Mar 20 '11 at 11:08
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.