Obtenga la URL de la miniatura del cargador de medios


8

Quiero seleccionar la imagen del cargador de medios de WordPress 3.5. Puedo obtener la URL de la imagen con el siguiente código, pero obtiene la imagen a tamaño completo. Quiero obtener la url de la imagen en miniatura, ¿cómo puedo obtenerla?

 var custom_uploader;
 $('.upload-image').click(function(e) {
        e.preventDefault();

        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: false
        });

        //When a file is selected, grab the URL
        custom_uploader.on('select', function() {
            attachment = custom_uploader.state().get('selection').first().toJSON();
            var abc = attachment.url;    //this is full image url. 
            alert (abc);
        });

        custom_uploader.open(); 
    });

Respuestas:


8

Puede depurar el resultado del archivo adjunto:

console.log(attachment); 

y si el tamaño de miniatura disponible puede recuperarlo usando:

 var thumb = attachment.sizes.thumbnail.url;
 alert(thumb);

Esta es una muy buena solución, pero una pequeña corrección para las personas que leen en el futuro: la url se puede encontrar en attach.attributes.sizes.thumbnail.url . En los tamaños también hay disponibles otras opciones, como mediano , mediano_grande y completo , así como tamaños personalizados.
AncientRo

0

Encontré esta pregunta haciendo mi propia investigación y terminé desarrollando una solución más rica que pensé que podría ser valiosa.

Si desea conocer la URL del tamaño de medio seleccionado por el usuario, entonces el siguiente código (código jQuery completo a continuación) lo hará por usted:

jQuery(function($) {
    // Bind to my upload butto
    $(document).on('click', 'a.custom-media-upload', function() {
        customUpload($(this));
        return false;
    });

    function customUpload(el) {
        formfield = $(el);
        custom_media = true;
        var _orig_send_attachment = wp.media.editor.send.attachment;
        wp.media.editor.send.attachment = function(props, attachment) {
            if ( custom_media ) {
                formfield = renderUpload(formfield, attachment, props);
            } else {
                return _orig_send_attachment.apply( this, [props, attachment] );
            }
        }

        wp.media.editor.open(1);
    }

    function renderUpload(field, attachment, props) {
        // This gets the full-sized image url
        var src = attachment.url;

        // Get the size selected by the user
        var size = props.size;

        // Or, if you'd rather, you can set the size you want to get:
        // var size = 'thumbnail'; // or 'full' or 'medium' or 'large'...

        // If the media supports the selected size, get it
        if (attachment.sizes[size]) {
            src = attachment.sizes[size].url;
        }

        // Do what you want with src here....
    }
});

-3

Tendría que hacer una llamada al servidor para ejecutar PHP.

$thumb_src = wp_get_attachment_image_src( $id, 'thumbnail' );

Donde $ id es el id del archivo adjunto

attach.attributes.id en su función de selección custom_uploader le dará el valor. Puede publicarlo nuevamente con una llamada ajax y obtener la URL en miniatura de esa manera.


Esto es simplemente incorrecto.
Andy Mercer
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.