jquery - renderizado - quitar el javascript que bloquea la visualización de contenido wp rocket

Carga multimedia personalizada de Wordpress 3.5 para las opciones de tema

Question

Recientemente se ha lanzado Wordpress 3.5, utilicé el sistema de carga de Wordpress Media a través de thickbox y window.send_to_editor para ver algunas opciones en mi tema de Wordpress (fondos, logotipos, etc.).

Pero como sabe que Wordpress ha integrado un nuevo Administrador de medios, quise utilizar esta nueva función para cargar imágenes / archivos como campos personalizados. Así que pasé la mañana buscando una forma de obtener el resultado deseado.

Encontré esta solución, que puede ser útil para algunos de ustedes. ¡Gracias por darme tu opinión sobre el código o cualquier mejora que tengas en mente!

Muestra de HTML:

<a href="#" class="custom_media_upload">Upload</a>
<img class="custom_media_image" src="" />
<input class="custom_media_url" type="text" name="attachment_url" value="">
<input class="custom_media_id" type="text" name="attachment_id" value="">

Código jQuery:

$(''.custom_media_upload'').click(function() {

    var send_attachment_bkp = wp.media.editor.send.attachment;

    wp.media.editor.send.attachment = function(props, attachment) {

        $(''.custom_media_image'').attr(''src'', attachment.url);
        $(''.custom_media_url'').val(attachment.url);
        $(''.custom_media_id'').val(attachment.id);

        wp.media.editor.send.attachment = send_attachment_bkp;
    }

    wp.media.editor.open();

    return false;
});

Si desea ver todas las configuraciones contenidas en la variable de attachment , puede hacer una console.log(attachment) o una alert(attachment) .

Answer 1

Estás yendo de una manera que no fue intencional. Tu código de JavaScript probablemente debería verse más o menos así:

$(''.custom_media_upload'').click(function(e) {
    e.preventDefault();

    var custom_uploader = wp.media({
        title: ''Custom Title'',
        button: {
            text: ''Custom Button Text''
        },
        multiple: false  // Set this to true to allow multiple files to be selected
    })
    .on(''select'', function() {
        var attachment = custom_uploader.state().get(''selection'').first().toJSON();
        $(''.custom_media_image'').attr(''src'', attachment.url);
        $(''.custom_media_url'').val(attachment.url);
        $(''.custom_media_id'').val(attachment.id);
    })
    .open();
});

Answer 2

Modifiqué este código un poco más para que se pueda usar en múltiples campos a la vez:

HTML:

<!-- Image Thumbnail -->
<img class="custom_media_image" src="" style="max-width:100px; float:left; margin: 0px     10px 0px 0px; display:inline-block;" />

<!-- Upload button and text field -->
<input class="custom_media_url" id="" type="text" name="" value="" style="margin-bottom:10px; clear:right;">
<a href="#" class="button custom_media_upload">Upload</a>

jQuery:

jQuery(document).ready(function($){

$(''.custom_media_upload'').click(function() {

        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = $(this);

        wp.media.editor.send.attachment = function(props, attachment) {

            $(button).prev().prev().attr(''src'', attachment.url);
            $(button).prev().val(attachment.url);

            wp.media.editor.send.attachment = send_attachment_bkp;
        }

        wp.media.editor.open(button);

        return false;       
    });

});

Answer 3

No encontré nada para activar una función personalizada si el editor se cierra. Yo uso esto:

wp.media.editor.open();
$(''.media-modal-close, .media-modal-backdrop'').one(''click'', function(){
    //do some stuff
});

o mejor:

var id = wp.media.editor.id();
var editor = wp.media.editor.get( id );
if(''undefined'' != typeof( editor )) editor = wp.media.editor.add( id );

if ( editor ) {
    editor.on(''close'', function(){
        //do some stuff
    });
}

Answer 4

No he tenido muchas oportunidades de jugar con esto, pero para aquellos que buscan aprovechar el elemento de la galería, este código debería ponerlo en su camino.

Es solo un punto de partida, solo proporciona una lista de identificadores de imágenes separados por comas, pero eso debería ser suficiente para comenzar a ser creativo.

<input id="custom_media_id" type="text" name="attachment_id" value="">
<a href="#" class="button custom_media_upload" title="Add Media">Add Media</a>

<script type="text/javascript">
  jQuery(''.custom_media_upload'').click(function() {
    var clone = wp.media.gallery.shortcode;
    wp.media.gallery.shortcode = function(attachments) {
    images = attachments.pluck(''id'');
    jQuery(''#custom_media_id'').val(images);
    wp.media.gallery.shortcode = clone;
    var shortcode= new Object();
    shortcode.string = function() {return ''''};
    return shortcode;
  }
jQuery(this).blur(); // For Opera. See: http://core.trac.wordpress.org/ticket/22445
wp.media.editor.open();
return false;       
});
</script>

Esto llenará el campo de entrada con una lista separada por comas de los identificadores de imagen, en el orden en que fueron configurados en el editor (usando la nueva funcionalidad de arrastrar y soltar).

La función espera que el shortcode se envíe para su colocación en el editor principal, pero no queremos hacer esto, así que creamos un nuevo objeto que devuelve una cadena en blanco para la inserción.

También tenga en cuenta que esto no implica la inserción de una sola imagen como se describió anteriormente; simplemente lo colocará en el editor de publicaciones. Intente combinar los dos oyentes o elimine las pestañas correspondientes.

EDITAR

Después de haber dedicado un tiempo a analizar el núcleo, creo que todo este proceso puede hacerse de manera más fácil utilizando la técnica que here , pero como leerán aún no he descubierto cómo seleccionar previamente las imágenes cuando vuelva a abrir el sistema. Administrador de medios.

Answer 5

No olvides usar wp_enqueue_media (nuevo en 3.5) si no estás en la página de edición de publicaciones.

Para usar el cuadro de carga multimedia anterior, puede hacer esto:

if(function_exists( ''wp_enqueue_media'' )){
    wp_enqueue_media();
}else{
    wp_enqueue_style(''thickbox'');
    wp_enqueue_script(''media-upload'');
    wp_enqueue_script(''thickbox'');
}