Exibir o Media Uploader no Plug-in Próprio no Wordpress 3.5

10

Eu tenho pouco problema com o Media Uploader no novo WordPress 3.5. Eu criei o próprio plugin que é o upload da imagem. Estou usando este código JS:

<script type="text/javascript">
    var file_frame;

    jQuery('.button-secondary').live('click', function( event ){

        event.preventDefault();

        if ( file_frame ) {
            file_frame.open();
            return;
        }

        file_frame = wp.media.frames.file_frame = wp.media(
            {
                title: 'Select File',
                button: {
                    text: jQuery( this ).data( 'uploader_button_text' )
                },
                multiple: false
            }
        );

        file_frame.on('select', function() {
            attachment = file_frame.state().get('selection').first().toJSON();
            jQuery('#IMGsrc').val(attachment.url);
        });

        file_frame.open();
    });
</script>

O código funciona bem, mas infelizmente os formulários aparecem incompletos. Quando eu seleciono qualquer imagem não me mostra 'Attachment Display Settings' no lado direito. Eu não sei porque. Eu tento adicionar opções à mídia:

displaySettings: true,
displayUserSettings: true

Mas também não funciona.

    
por user1320276 07.01.2013 / 10:55

3 respostas

6

Somente uploader

abaixo de um código de exemplo, funciona apenas na página de edição de postagens. Se você usar também em outra página, inclua a função wp_enqueue_media() , veja o próximo título.

jQuery(document).ready(function($) {

  var _custom_media = true,
      _orig_send_attachment = wp.media.editor.send.attachment;

  $('.stag-metabox-table .button').click(function(e) {

    var send_attachment_bkp = wp.media.editor.send.attachment;
    var button = $(this);
    var id = button.attr('id').replace('_button', '');

    _custom_media = true;
    wp.media.editor.send.attachment = function(props, attachment) {

      if ( _custom_media ) {
        $("#"+id).val(attachment.url);
      } else {
        return _orig_send_attachment.apply( this, [props, attachment] );
      };

    }

    wp.media.editor.open(button);

    return false;
  });

  $('.add_media').on('click', function() {
    _custom_media = false;
  });

});

Uma breve explicação do Media Manager

  1. Primeiramente, inclua os scripts relevantes, use a função principal: wp_enqueue_media(); A função configura todas as configurações relevantes, localiza o texto do menu e carrega todos os arquivos javascript apropriados.

    Você pode adicionar um script personalizado por meio de wp_enqueue_script() .

    // Also adds a check to make sure 'wp_enqueue_media' has only been called once.
    // @see: http://core.trac.wordpress.org/ticket/22843
    if ( ! did_action( 'wp_enqueue_media' ) )
        wp_enqueue_media();
    

    Adicione também um script padrão para o cabeçalho personalizado: wp_enqueue_script( 'custom-header' ); Isso cria um quadro de seleção de imagem e o vincula a um elemento de interface, por exemplo, um botão ou um link. Em seguida, ele chama um URL ou nossa escolha com o ID da imagem selecionada. Este é o mesmo script usado ao selecionar imagens de cabeçalho personalizadas do tema.

  2. Adicione o botão ao gerenciador de mídia:

    <?php
    $modal_update_href = esc_url( add_query_arg( array(
        'page'     => 'my_media_manager',
        '_wpnonce' => wp_create_nonce( 'my_media_manager_options' ),
    ), admin_url( 'upload.php' ) ) );
    ?>
    
    <p>
    <a id="choose-from-library-link" href="#"
        data-update-link="<?php echo esc_attr( $modal_update_href ); ?>"
        data-choose="<?php esc_attr_e( 'Choose a Default Image' ); ?>"
        data-update="<?php esc_attr_e( 'Set as default image' ); ?>"><?php _e( 'Set default image' ); ?>
    </a> |
    </p>
    
  3. Definir função de ação Por último, você precisa adicionar um código para processar o ID da imagem que passaremos para o URL do link de atualização de dados.

    // Add to the top of our data-update-link page
    if ( isset($_REQUEST['file']) ) { 
        check_admin_referer( 'my_media_manager_options' );
    
            // Process and save the image id
        $options = get_option( 'my_media_manager_options', TRUE );
        $options['default_image'] = absint( $_REQUEST['file'] );
        update_option( 'my_media_manager_options', $options );
    }
    

Fontes e dicas:

por bueltge 14.01.2013 / 12:16
0

Eu coloquei uma resposta no site stackoverflow.com também e isso seria útil.

Estou usando esse método para usar o aplicativo de upload de mídia em meu plug-in personalizado. Talvez isso seja útil.

no arquivo de tema principal (index.php) adicione estes.

wp_enqueue_style('thickbox'); // call to media files in wp
wp_enqueue_script('thickbox');
wp_enqueue_script( 'media-upload'); 


// load script to admin
function wpss_admin_js() {
     $siteurl = get_option('siteurl');
     $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/js/admin_script.js';
     echo "<script type='text/javascript' src='$url'></script>"; 
}
 add_action('admin_head', 'wpss_admin_js');


No arquivo admin_script.js ,

jQuery('#wpss_upload_image_button').click(function() {
    formfield = jQuery('#wpss_upload_image').attr('name');
    tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('#wpss_upload_image').val(imgurl);
 tb_remove();

 jQuery('#wpss_upload_image_thumb').html("<img height='65' src='"+imgurl+"'/>");
}

arquivo admin (admin_settings.php),

<div id="wpss_upload_image_thumb" class="wpss-file">
    <?php if(isset($record->security_image) && $record->security_image !='') { ?>
       <img src="<?php echo $record->security_image;?>"  width="65"/><?php } else {    echo $defaultImage; } ?>
</div>
<input id="wpss_upload_image" type="text" size="36" name="wpss_upload_image" value="" class="wpss_text wpss-file" />
<input id="wpss_upload_image_button" type="button" value="Upload Image" class="wpss-filebtn" />

Mais detalhes no meu blog

Mais informações enlace

    
por Sumith Harshan 18.05.2014 / 11:09
0

Use este código apenas para o uploader de mídia. você tem link na resposta do jquery.

<label for="upload_image">
    <input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
    <input id="upload_image_button" class="button" type="button" value="Upload Image" />
    <br />Enter a URL or upload an image
</label>

<?php
add_action('admin_enqueue_scripts', 'my_admin_scripts');

function my_admin_scripts() {
    if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
        wp_enqueue_media();
        wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
        wp_enqueue_script('my-admin-js');
    }
}

?>

<script>
    jQuery(document).ready(function($){


    var custom_uploader;


    $('#upload_image_button').click(function(e) {

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: true
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            console.log(custom_uploader.state().get('selection').toJSON());
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });


});
    </script>
    
por Rutunj sheladiya 19.06.2015 / 12:00

Tags