¿Cómo agregar una nueva pestaña al administrador de carga de medios con un conjunto personalizado de imágenes?

Question

¿Cómo agregar una nueva pestaña al administrador de carga de medios con un conjunto personalizado de imágenes?

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

15

Me gustaría agregar una nueva pestaña para cargar el administrador y las imágenes de la lista interna desde

theme_folder/images/patterns

Intenté algo como esto para agregar una pestaña, pero no funciona para mí, ya que está agregando pestañas en el lado del administrador de medios, pero en la carga de imágenes, esa pestaña no está 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' );

para ser precisos, aquí es donde me gustaría agregar una nueva pestaña y en esa pestaña me gustaría listar imágenes de la carpeta de temas.

SoyconscientedequeeladministradordemediosJSdebeserreescrito,peroparaserhonesto,nosépordóndeempezar.Parecequenecesitoescribirunaplantillacompletamentenuevaparaeladministradordemediosparalograresto.

Revisétodaslassugerencias,peroparecequenadieestáleyendolapregunta.Segúnloaconsejado"Intenté algo como esto para agregar una pestaña, pero no funciona para mí, ya que está agregando pestañas en el lado del administrador de medios, pero en la carga de imágenes, esa pestaña no está visible".

Por ahora, nadie puede encontrar la solución para esto.

media uploads

pregunta Benn 24.04.2015 - 17:28

3 respuestas

Lea otras preguntas en las etiquetas media uploads

Crear API para el inicio de sesión único con un sitio de terceros Eliminar herramienta de enlace en línea

score 5 · Answer 1

Según WordPress Codex puede agregar una pestaña personalizada en el cargador de medios 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 te ayude.

score 2 · Answer 2

Este es un hilo antiguo, pero para mí todavía es tan relevante como es. He estado jugueteando y se me ha ocurrido este código para agregar una pestaña de medios aquí, tal vez alguien quiera continuar para saber cómo manejar el contenido de la pestaña. :)

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

Y luego el archivo 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 entonces. Para manejar el contenido, no he encontrado una buena manera de hacerlo por wp.media. Mi solución actual es 2 liseners, uno para abrir la biblioteca de medios y otro para hacer clic en el menú del enrutador de medios;

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 función doMyTabContent (); es algo así como;

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

Estoy seguro de que esto se puede hacer de una manera mucho más delicada. Quienquiera que lea esto y tenga una mejor solución, rellene :-)

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