Como adicionar uma nova guia ao gerenciador de upload de mídia com um conjunto personalizado de imagens?

Question

Como adicionar uma nova guia ao gerenciador de upload de mídia com um conjunto personalizado de imagens?

#1 resposta do Touqeer Shafi (5 votos)
#2 resposta do gubbfett (2 votos)
#3 resposta do sarath (-1 votos)

15

Gostaria de adicionar uma nova guia ao gerenciador de upload e imagens internas da lista de

theme_folder/images/patterns

Eu tentei algo assim para adicionar uma guia, mas isso não funciona para mim, pois está adicionando guias ao lado do gerenciador de mídia, mas no upload da imagem essa guia não fica visível.

function custom_media_upload_tab_name( $tabs ) {
    $newtab = array( 'tab_slug' => 'Patterns' );
    return array_merge( $tabs, $newtab );
}

add_filter( 'media_upload_tabs', 'custom_media_upload_tab_name' );

function custom_media_upload_tab_content() {
    // Add you content here.
    echo 'Hello content';
}
add_action( 'media_upload_tab_slug', 'custom_media_upload_tab_content' );

para ser preciso, é aqui que eu gostaria de adicionar uma nova aba e, nessa aba, gostaria de listar imagens da pasta de temas.

EstoucientedequeogerentedemídiaJSprecisaserreescritoparaisso,mas,paraserhonesto,nãoseiporondecomeçar.Parecequeeuprecisoescreverummodelocompletamentenovoparaogerenciadordemídiaparaconseguirisso.

Eupasseiportodasassugestões,masparecequeninguémestálendoapergunta.Comorecomendado"Eu tentei algo assim para adicionar uma guia, mas não funciona para mim, pois está adicionando guias ao lado do gerenciador de mídia, mas no upload da imagem essa guia não é visível."

Então, por enquanto, ninguém é capaz de encontrar a solução para isso.

media uploads

por Benn 24.04.2015 / 17:28

3 respostas

Tags media uploads

Métodos de integração de dados de plug-in com temas Crie API para conexão única com site de terceiros

score 5 · Answer 1

De acordo com o WordPress Codex , você pode adicionar uma guia personalizada ao aplicativo de envio de mídia como este:

// add the tab
add_filter('media_upload_tabs', 'my_upload_tab');
function my_upload_tab($tabs) {
    $tabs['mytabname'] = "My Tab Name";
    return $tabs;
}

// call the new tab with wp_iframe
add_action('media_upload_mytabname', 'add_my_new_form');
function add_my_new_form() {
    wp_iframe( 'my_new_form' );
}

// the tab content
function my_new_form() {
    echo media_upload_header(); // This function is used for print media uploader headers etc.
    echo '<p>Example HTML content goes here.</p>';
}

Espero que isso ajude você.

score 2 · Answer 2

Este é um tópico antigo, mas para mim ainda é relevante. Eu tenho mexido e veio com este código para adicionar uma guia de mídia aqui, talvez alguém queira continuar como o conteúdo do identificador para a guia? :)

add_action('admin_enqueue_scripts', function(){
    wp_enqueue_script( 'my-media-tab', plugin_dir_url( __FILE__ ) . '/js/mytab.js', array( 'jquery' ), '', true );
});

E, em seguida, o arquivo js:

var l10n = wp.media.view.l10n;
wp.media.view.MediaFrame.Select.prototype.browseRouter = function( routerView ) {
    routerView.set({
        upload: {
            text:     l10n.uploadFilesTitle,
            priority: 20
        },
        browse: {
            text:     l10n.mediaLibraryTitle,
            priority: 40
        },
        my_tab: {
            text:     "My tab",
            priority: 60
        }
    });
};

EDITAR: OK então. Para lidar com o conteúdo eu não encontrei uma maneira legal de fazer isso pelo wp.media. Minha solução atual é de 2 liseners, um para abrir a biblioteca de mídia e um para clicar no menu do roteador de mídia;

jQuery(document).ready(function($){
    if ( wp.media ) {
        wp.media.view.Modal.prototype.on( "open", function() {
            if($('body').find('.media-modal-content .media-router a.media-menu-item.active')[0].innerText == "My tab")
                doMyTabContent();
        });
        $(wp.media).on('click', '.media-router a.media-menu-item', function(e){
            if(e.target.innerText == "My tab")
                doMyTabContent();
        });
    }
});

a função doMyTabContent (); é apenas algo parecido;

function doMyTabContent() {
    var html = '<div class="myTabContent">';
    //My tab content here
    html += '</div>';
    $('body .media-modal-content .media-frame-content')[0].innerHTML = html;
}

Tenho certeza de que isso pode ser feito de uma maneira muito mais delicada. Quem lê isso e tem uma solução melhor, por favor preencha :-)

score -1 · Answer 3

   function axcoto_genify_media_menu($tabs) {
            $newtab = array('genify'  => __('Axcoto Genify', 'axcotogenify'));
            return array_merge($tabs, $newtab);
            }
            add_filter('media_upload_tabs', 'axcoto_genify_media_menu');

           array('genify' => __('Axcoto Genify', 'axcotogenify'));


        function axcoto_genify_media_process() {
        media_upload_header();
        echo 'hello';
        }
        function axcoto_genify_media_menu_handle() {
        return wp_iframe( 'axcoto_genify_media_process');
        }



 if ( ( is_array( $content_func ) && ! empty( $content_func[1] ) && 0 === strpos( (string) $content_func[1], 'media' ) ) || 0 === strpos( $content_func, 'media' ) )
        wp_enqueue_style( 'media' );