0

I have a picture uploader that fits inside a metabox in the administration.

I would like to have four instances of this uploader in the same metabox in order for the administrator to manage 4 different pictures to upload/edit/delete.

Each one should, obviously, be independent from the others (you can add/edit/delete each picture independently).

It's easy enough in four different metaboxes (all I have to do is to duplicate the plugin file and rename the functions) but I just can't make them work together within a same metabox.

How can I do that?

Here is the script for a single uploader (divided in three parts):

1. the add_meta_box part

    function sales_add_poster_metabox()
    {
        add_meta_box(
            'sales_add_poster_metabox',
            'Personal uploader', 
            'sales_show_poster', 
            'sales', 
            'normal', 
            'core'
        );
    }
    add_action("admin_init", "sales_add_poster_metabox");

2. the function for the picture display (with a jQuery management of the rendering)

    function sales_show_poster($post)
    {
        ?>
        <style type="text/css">....</style>

        <script>
            jQuery(document).ready(function($) 
            {
                var img = new Image();
                img.src = $('img').attr('src');
                img.onload = function() 
                {
                    imgHeight = img.height;
                    imgWidth = img.width;
                    if(imgWidth > imgHeight)
                    {
                        dd=imgWidth/imgHeight;
                        hh=558/dd;                  
                        mt=(558-hh)/2;
                        $('.sales_poster_img-preview img').css("width","558px");
                        $('.sales_poster_img-preview img').css("height",hh);
                        $('.sales_poster_img-preview img').css("margin-top",mt);
                    }
                    else if(imgWidth < imgHeight)
                    {
                        dd=imgHeight/imgWidth;
                        ww=558/dd;
                        ml=(558-ww)/2;
                        $('.sales_poster_img-preview img').css("width",ww);
                        $('.sales_poster_img-preview img').css("height","558px");
                        $('.sales_poster_img-preview img').css("margin-left",ml);
                    }
                    else
                    {
                        $('.sales_poster_img-preview img').css("width","558px");
                        $('.sales_poster_img-preview img').css("height","558px");
                    };                      
                }   

                var sales_poster_formfield = null;

                $('.sales_poster_get-image').click(function() 
                {
                    $('html').addClass('sales_poster_image_spe');
                    sales_poster_formfield = $('.sales_poster_id_img').attr('name');
                    var sales_poster_id=$("#post_ID").val();
                    tb_show('', 'media-upload.php?referer=sales_poster&post_id='+sales_poster_id+'&type=image&TB_iframe=true');
                    return false;
                });

                $('.sales_poster_del-image').bind('click', function()
                {
                    $('.sales_poster_img-preview').empty();
                    $('.sales_poster_id_img').val('');
                });

                window.original_send_to_editor = window.send_to_editor;
                window.send_to_editor = function(html)
                {
                    var imgWidth;
                    var imgHeight;
                    if (sales_poster_formfield !== null) 
                    {
                        var sales_poster_matches = html.match(/wp-image-([0-9]*)/);
                        $('input[name="'+sales_poster_formfield+'"]').val(sales_poster_matches[1]);
                        var img = new Image();
                        img.src = $('img',html).attr('src');
                        img.onload = function() 
                        {
                            imgHeight = img.height;
                            imgWidth = img.width;
                            if(imgWidth > imgHeight)
                            {
                                dd=imgWidth/imgHeight;
                                hh=558/dd;
                                mt=(558-hh)/2;
                                var sales_poster_imgfull = $(html).css({width:'558px'});
                                $('.sales_poster_img-preview').empty();
                                $('.sales_poster_img-preview').append($(sales_poster_imgfull));
                                $('.sales_poster_img-preview img').css("width","558px");
                                $('.sales_poster_img-preview img').css("height",hh);
                                $('.sales_poster_img-preview img').css("margin-top",mt);
                            }
                            else if(imgWidth < imgHeight)
                            {
                                dd=imgHeight/imgWidth;
                                ww=558/dd;
                                ml=(558-ww)/2;
                                var sales_poster_imgfull = $(html).css({height:'558px'});
                                $('.sales_poster_img-preview').empty();
                                $('.sales_poster_img-preview').append($(sales_poster_imgfull));
                                $('.sales_poster_img-preview img').css("width",ww);
                                $('.sales_poster_img-preview img').css("height","558px");
                                $('.sales_poster_img-preview img').css("margin-left",ml);
                            }
                            else
                            {
                                var sales_poster_imgfull = $(html).css({width:'558px'});
                                $('.sales_poster_img-preview').empty();
                                $('.sales_poster_img-preview').append($(sales_poster_imgfull));
                                $('.sales_poster_img-preview img').css("width","558px");
                                $('.sales_poster_img-preview img').css("height","558px");
                            };
                            tb_remove();        
                            $('html').removeClass('sales_poster_image_spe');
                            sales_poster_formfield = null;                              
                        }
                    }
                    else
                    {
                        window.original_send_to_editor(html);
                    }
                }       
            });
        </script>
        <?php

        wp_enqueue_script( 'media-upload' );
        wp_enqueue_script( 'thickbox' );
        wp_nonce_field( 'sales_poster_image-liee-save_'.$post->ID, 'sales_poster_image-liee-nonce');

        echo '<div id="sales_poster_undroppable">';

        $sales_poster_meta = get_post_meta($post->ID,'_sales_poster_image',true);

        $img = (isset($sales_poster_meta)) ? '<img src="'.wp_get_attachment_url($sales_poster_meta).'" alt="" >' : '';

        echo '<div class="sales_poster_image-entry">';
        echo '<input type="hidden" name="sales_poster_image" id="sales_poster_image" class="sales_poster_id_img"  value="'.$sales_poster_meta.'">';
        echo '<div class="sales_poster_img-preview" >'.$img.'</div>';
        echo '</div>';
        echo '</div>';
    }

3. the function to save the uploader data on submit

    function sales_poster_save_image_metabox($post_ID)
    { 
        if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ){return $post_id;};

        if ( !empty( $_POST['sales_poster_image'] ) ) 
        {
            check_admin_referer('sales_poster_image-liee-save_'.$_POST['post_ID'], 'sales_poster_image-liee-nonce');
            update_post_meta($post_ID, '_sales_poster_image', esc_html($_POST['sales_poster_image'])); 
        }
        else{delete_post_meta($post_ID, '_sales_poster_image', '');}
    }
    add_action('save_post', 'sales_poster_save_image_metabox'); 

Thank you.

  • 2
    Give your elements unique IDs and use that ID to target them individually. – Milo Nov 10 '15 at 19:16
  • Thank you for you comment. So this means I need to duplicate three times the scripts within this file in order to serve 4 different ID's? – Baylock Nov 10 '15 at 21:56
  • 1
    you could do that, but a better method would be to make a single version work with any number of fields. use loops to generate multiples of things and increment a counter to number them. use jQuery methods like index, sibling selectors like next, and data attributes to store an index or reference to some other element. – Milo Nov 10 '15 at 22:20
  • Yeah... Out of my league but thanks... Not to mention that there are some parts like "img.src = $('img').attr('src');". Even if i rename the variable,it will still target the same tag. Just give different ID's to the 4 different instances and keeping track of all this I mentioned, is out of my reach given my lack of expertise. What you say make sense but without an example, it's just words. Thank you. – Baylock Nov 10 '15 at 22:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.