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

18

Gostaria de adicionar uma nova guia para fazer upload de imagens do gerenciador e da lista interna de

theme_folder/images/patterns

Tentei algo assim para adicionar uma guia, mas ela não funciona para mim, pois está adicionando guias ao lado do gerenciador de mídia, mas no upload de imagens, essa guia não está 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 mais preciso, é aqui que eu gostaria de adicionar uma nova guia e nessa guia eu gostaria de listar imagens da pasta do tema.

insira a descrição da imagem aqui

Estou ciente de que o gerente de mídia JS precisa ser reescrito para isso, mas para ser sincero, não sei por onde começar. Parece que preciso escrever um modelo completamente novo para o gerenciador de mídia para conseguir isso.

Passei por todas as sugestões, mas parece que ninguém está lendo a pergunta. Conforme recomendado "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 de imagens, essa guia não está visível".

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

Benn
fonte

Respostas:

6

Este é um tópico antigo, mas para mim ainda é o mais relevante. Eu tenho brincado e surgiu esse código para adicionar uma guia de mídia aqui, talvez alguém queira continuar com a forma como o conteúdo da guia é manipulado? :)

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

E então 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
        }
    });
};

EDIT: Ok, então. Para lidar com o conteúdo, não encontrei uma boa maneira de fazer isso pelo wp.media. Minha solução atual são 2 liseners, um para abrir a biblioteca de mídia e outro 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 como;

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 ler isso e tiver uma solução melhor, preencha :-)

gubbfett
fonte
thnx para isso vai olhar para ele. Velho ou não, nunca foi resolvido. e foi exatamente isso que pedi prntscr.com/kse5yk . Bom trabalho!
Benn
você tentou combinar este wordpress.stackexchange.com/a/190604/67176 e a criação da sua guia? Tenho 99% de certeza de que poderia funcionar, especialmente se as guias tiverem o mesmo ID.
Benn
1
Sim, analisei isso primeiro, mas não sou realmente fã da solução iframe que vem com essa solução. Recebendo dados de imagem com mensagens iframe. Exibir o conteúdo é uma coisa, mas lidar com ações é outra. :) Talvez eu esteja perdendo alguma coisa.
Gbbfett # 11/18
Olá, @Benn, apanhados novamente nos pesadelos do wp.media. O código que forneci acima, onde faço meu "doMyTabContent", é acionado apenas em um evento. Por exemplo: Carregue uma postagem, clique em adicionar imagem em destaque e feche. Após esse clique, adicione mídia à postagem e ela não carrega nada, provavelmente porque o wp.media está em uma nova instância (a guia ainda está lá). Não sei como seguir em frente aqui. Você fez algum progresso em relação à adição de uma guia e à inserção de mídia de alguma forma? Quer compartilhar algum código? :)
gubbfett 17/06
@gubbfett você já encontrou uma solução para isso?
RaajTram
5

De acordo com o WordPress Codex, você pode adicionar uma guia personalizada ao upload 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 ajude você.

Touqeer Shafi
fonte
7
Para ficar claro, essa guia não é adicionada à parte superior da caixa modal, mas à barra lateral esquerda. Não consegui encontrar uma maneira de adicionar a guia na parte superior da guia Inserir mídia. Também tive problemas ao tentar usar os estilos css já disponíveis porque o conteúdo é inserido dentro de um iframe. O que provavelmente significa que você precisará adicionar seu próprio css para exibir as imagens corretamente. E apenas para completar a resposta, você pode usar a função php scandir () para recuperar todos os itens dentro da pasta da imagem.
gdaniel
-1
   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' );
sarath
fonte
1
Seu código está cheio de erros de sintaxe. Por favor, use a sintaxe php adequada, pois a sintaxe que você está usando nem existe no php. Além disso, explique o que seu código faz e como ele funciona. Obrigado
Pieter Goosen
Eu tinha acabado de editar o código. Seu código de trabalho.Tente este código.
sarath
2
Releia meu comentário, mas pule a parte da sintaxe. Código de despejo não é uma resposta de qualidade. Por favor, adicione uma explicação de como seu código funciona eo que ele faz
Pieter Goosen