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.

in this question i've found how to create a custom tab at the image uploader.

this is the code:

add_filter('media_upload_tabs', 'my_media_upload_tabs_filter');

function my_media_upload_tabs_filter($tabs) {
        unset($tabs["type_url"]);
        unset($tabs['library']);
        $newtab = array('ell_insert_gmap_tab' => __('Google Map','insertgmap'));

        return array_merge($tabs,$newtab);
}

add_action('media_upload_ell_insert_gmap_tab', 'media_upload_ell_gmap_tab');

function media_upload_ell_gmap_tab() {
    return wp_iframe('media_upload_ell_gmap_form', $errors );
}

function media_upload_ell_gmap_form() {
    ?>
    echo media_upload_header();
    ?>
    <h2>HTML Form</h2>

<?php
}  

Now i want to use that tab for image choosing function. so i modified the code inside the tab into this:

  <form enctype="multipart/form-data" method="post" action="">
            <h3 class="media-title">Choose Background:</h3>
            Alternatively, you can choose one of these background images:<br/>
            <img style="float:left; margin:15px; cursor:pointer" id="background-Green-stripes" src="<?php bloginfo('url'); ?>/wp-content/themes/mytheme/images/background-Green-stripes-thumb.jpg">
<a class="button choice_button" style="float:left; display:block" id="image 1">choose this</a>
            <img style="float:left; margin:15px; cursor:pointer" id="background-Pail-pink-squares.jpg" src="<?php bloginfo('url'); ?>/wp-content/themes/mytheme/images/background-Pail-pink-squares-thumb.jpg">
<a class="button choice_button" style="float:left; display:block" id="image 2">choose this</a>
            <img style="float:left; margin:15px; cursor:pointer" id="background-Purple-wall.jpg" src="<?php bloginfo('url'); ?>/wp-content/themes/mytheme/images/background-Purple-wall-thumb.jpg">
    <a class="button choice_button" style="float:left; display:block" id="image 3">choose this</a>
        </form> 

and tried to get the html from the "window.send_to_editor" but didn't knew how... can any body help? i'm lost here...

share|improve this question
    
i found out that i need some how to produce the "insert to post" button... how should i do this? someone? –  Asaf Chertkoff Mar 8 '11 at 17:55
    
Not necessarily, take a look at the send to editor function at the top of wp-admin/js/media-upload.dev.js, can you not just call that? Or look at what that function does, and pull what you need from it.. –  t31os Mar 8 '11 at 18:42
    
I don't know how to use it with a new tab in the media-uploader... i don't know how to send information back to the "html" var inside send_to_editor with a simple button... –  Asaf Chertkoff Mar 9 '11 at 10:06
    
i also tried playing with the form action, like this: function media_upload_ell_gmap_form() { echo media_upload_header(); ?> <form enctype="multipart/form-data" method="post" action="http://www.mimi.me/wp-admin/media-upload.php?type=image&amp;tab=insert_c‌​hoose_background&amp;post_id=0&amp;mysetting=myvalue"> <h3 class="media-title">Choose Background:</h3> <input name="send" id="send" class="button" value="Insert into Post" type="submit"> </form> <?php } but i got nothing... any one? –  Asaf Chertkoff Mar 9 '11 at 11:23
add comment

1 Answer

up vote 0 down vote accepted

So i decided that for me, i can settle for changing an input field on the top.parent for it to be used with the native options. i used this for the function of the iframe tab:

function media_upload_choosebackground_form() {
     media_upload_header();
    ?>
    <h3 class="media-title">HTML Form</h3>
        <img src="http://www.mimi.me/wp-content/themes/mimi.me_regular_sites/images/background-Green-stripes-thumb.jpg" style="cursor:pointer; float:left; margin:10px 0 0 10px" id="greenstripes" title="Green Stripes" />
        <img src="http://www.mimi.me/wp-content/themes/mimi.me_regular_sites/images/background-Pail-pink-squares-thumb.jpg" style="cursor:pointer; float:left; margin:10px 0 0 10px" id="Pailpinksquares" title="Pail pink squares" />
        <img src="http://www.mimi.me/wp-content/themes/mimi.me_regular_sites/images/background-Purple-wall-thumb.jpg" style="cursor:pointer; float:left; margin:10px 0 0 10px" id="Purplewall" title="Purple wall" />
<?php
}

and this as the click event for every image:

jQuery('#Purplewall').click(function() {
        imgurl = "http://www.mimi.me/wp-content/themes/mimi.me_regular_sites/images/background-Purple-wall-thumb.jpg";
        $("#MoobBackgroundUpload", top.document).val(imgurl);
        $("#MoobBackgroundUploadButtonImg", top.document).attr('src', imgurl);
        parent.tb_remove();
    });

and what i've got is a second tab with an image picker, and that what i wanted in the first place. good for me!

share|improve this answer
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.