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

18

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

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 costado 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 enumerar las imágenes de la carpeta de temas.

ingrese la descripción de la imagen aquí

Soy consciente de que el gerente de medios JS necesita ser reescrito para ello, pero para ser honesto, no sé por dónde empezar. Parece que necesito escribir una plantilla completamente nueva para el administrador de medios para lograr esto.

Revisé todas las sugerencias pero parece que nadie está leyendo la pregunta. Como se aconseja "Intenté algo como esto para agregar una pestaña, pero no funciona para mí ya que está agregando pestañas en el costado del administrador de medios pero en la carga de imágenes esa pestaña no está visible".

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

Benn
fuente

Respuestas:

6

Este es un hilo viejo pero para mí sigue siendo tan relevante. He estado jugando y he creado este código para agregar una pestaña de medios aquí, ¿tal vez alguien quiere continuar por 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 con wp.media. Mi solución actual son 2 oyentes, 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 solo 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 muy seguro de que esto se puede hacer de una manera mucho más delicada. Quien lea esto y tenga una mejor solución, complete :-)

gubbfett
fuente
Gracias por esto se verá en ello. Viejo o no, nunca se resolvió. y esto es exactamente lo que pedí prntscr.com/kse5yk . ¡Gran trabajo!
Benn
¿Intentaste combinar este wordpress.stackexchange.com/a/190604/67176 y la creación de tu pestaña? Estoy 99% seguro de que podría funcionar, especialmente si las pestañas tienen la misma identificación.
Benn
1
Sí, lo examiné primero, pero no soy realmente un fanático de la solución de iframe que viene con esta solución. Recepción de datos de imagen con mensajes de iframe. Mostrar el contenido es una cosa, pero manejar las acciones es otra. :) Tal vez me estoy perdiendo algo.
gubbfett
Hola, @Benn acaba de atrapar de nuevo las pesadillas de wp.media. El código que proporcioné arriba donde hago mi "doMyTabContent" solo se activa en un evento. Por ejemplo: cargue una publicación, haga clic en Agregar imagen destacada y cierre. Después de este clic, agregue medios para la publicación, y no carga nada, probablemente porque el wp.media está en una nueva instancia (la pestaña todavía está allí). No estoy seguro de cómo seguir adelante aquí. ¿Has hecho algún progreso con respecto a agregar una pestaña e insertar medios de alguna manera? ¿Quieres compartir un código? :)
gubbfett
@gubbfett, ¿alguna vez encontraste una solución para esto?
RaajTram
5

De acuerdo con WordPress Codex , puede agregar una pestaña personalizada en el cargador de medios de esta manera:

// 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.

Touqeer Shafi
fuente
77
Para ser claros, esa pestaña no se agrega a la parte superior del cuadro modal, sino a la barra lateral izquierda. No pude encontrar una manera de agregar realmente la pestaña a la parte superior de la pestaña Insertar medios. También tuve problemas al tratar de usar los estilos CSS ya disponibles porque el contenido se inserta dentro de un iframe. Lo que probablemente significa que necesitaría agregar su propio CSS para mostrar las imágenes correctamente. Y solo para completar la respuesta, puede usar la función php scandir () para recuperar todos los elementos dentro de la carpeta de imágenes.
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
fuente
1
Su código está lleno de errores de sintaxis. Utilice la sintaxis adecuada de php, ya que la sintaxis que está utilizando ni siquiera existe en php. Además, explique qué hace su código y cómo funciona. Gracias
Pieter Goosen
Acababa de editar el código. Su código de trabajo. Prueba este código.
sarath
2
Vuelva a leer mi comentario, pero omita la parte de sintaxis. Volcar el código no es una respuesta de calidad. Agregue una explicación de cómo funciona su código y qué hace
Pieter Goosen