web-dev-qa-db-fra.com

Comment ajouter un nouveau gestionnaire de téléchargement multimédia avec un jeu d'images personnalisé?

Je voudrais ajouter un nouvel onglet pour télécharger des images de gestionnaire et de liste intérieure à partir de

theme_folder/images/patterns

J'ai essayé quelque chose comme ceci pour ajouter un onglet mais cela ne fonctionne pas pour moi car il ajoute des onglets sur le côté du gestionnaire de média, mais sur le téléchargement d'image cet onglet n'est pas visible.

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' );

pour être précis, c’est là que je voudrais ajouter un nouvel onglet et dans cet onglet je voudrais lister les images du dossier de thème.

enter image description here

Je suis conscient que le responsable des médias JS doit être réécrit pour cela, mais pour être honnête, je ne sais pas par où commencer. On dirait que je dois écrire un tout nouveau modèle pour le gestionnaire de média afin d'y parvenir.

Je suis allé à travers toutes les suggestions, mais il semble que personne ne lit la question. Comme conseillé "J'ai essayé quelque chose comme ceci pour ajouter un onglet mais cela ne fonctionne pas pour moi car il ajoute des onglets sur le côté du gestionnaire de média, mais sur le téléchargement d'images, cet onglet n'est pas visible."

Donc, pour le moment, personne ne peut trouver la solution à ce problème.

uploadsmedia
17
Benn

Selon WordPress Codex vous pouvez ajouter un onglet personnalisé dans l’éditeur de média comme ceci:

// 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>';
}

J'espère que cela vous aidera.

5
Touqeer Shafi

C'est un vieux fil, mais pour moi toujours aussi pertinent. J'ai été bidouiller et a mis au point ce code pour ajouter un onglet de média ici, peut-être que quelqu'un voudra continuer pour savoir comment gérer le contenu de l'onglet? :)

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

Et puis le fichier 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, alors. Pour gérer le contenu, je n'ai pas trouvé de moyen agréable de le faire par wp.media. Ma solution actuelle consiste en 2 lecteurs, un pour ouvrir la médiathèque et un pour cliquer dans le menu du routeur multimé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();
        });
    }
});

la fonction doMyTabContent (); est juste quelque chose comme;

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

Je suis très sûr que cela peut être fait d'une manière beaucoup plus délicate. Quiconque lira ceci et aura une meilleure solution, veuillez remplir :-)

4
gubbfett