Cargador de medios de WordPress con selección de tamaño

Quiero agregar una entrada de imagen a mi propio complemento de WordPress. Para eso, uso el cargador de medios estándar de WordPress así:

var custom_uploader;

$('.upload_image_button').click(function(e) {
    input = $(this);
    e.preventDefault();

    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Choose Collage Image',
        library: {
            type: 'image'
        },
        button: {
            text: 'Choose Collage Image'
        },
        multiple: false,

        displaySettings: true,

        displayUserSettings: false
    });

    custom_uploader.on('select', function() {
        attachment = custom_uploader.state().get('selection').first().toJSON();
        input.prev('input').val(attachment.url);
    });

    custom_uploader.open();

});

Esto funciona perfecto. Agrego dos tamaños de imagen más que eran exactos para mi complemento:

if ( function_exists( 'add_image_size' ) ) {
    add_image_size( 'collage-large', 460, 660, true );
    add_image_size( 'collage-small', 460, 325, true );
}

Mi problema: el selector para el tamaño de la imagen o mejor el selector de miniaturas no se muestra en el formulario de carga de medios. ¿Cómo puedo hacer eso?

Puede usar el cuadro de diálogo de inserción de medios como se muestra en el sitio “editar página”, que agrega alineación, enlace a y Talla campos de entrada Para hacerlo agrega frame: 'post' a su matriz de opciones:

file_frame = wp.media.frames.file_frame = wp.media({
    title: 'Select a image to upload',
    button: {
        text: 'Use this image',
    },
    multiple: false,
    frame:    'post',    // <-- this is the important part
    state:    'insert',
});

En lugar de escuchar el evento “seleccionar”, escuche el evento “insertar”. Este código muestra cómo recuperar las propiedades adicionales, incluido el tamaño:

// When an image is inserted, run a callback.
file_frame.on( 'insert', function(selection) {
    var state = file_frame.state();
    selection = selection || state.get('selection');
    if (! selection) return;
    // We set multiple to false so only get one image from the uploader
    var attachment = selection.first();
    var display = state.display(attachment).toJSON();  // <-- additional properties
    attachment = attachment.toJSON();
    // Do something with attachment.id and/or attachment.url here
    var imgurl = attachment.sizes[display.size].url;
    jQuery( '#filenameFromURL' ).val( imgurl );
});

Encuentro algo en Internet. Puede ser útil.

attachment = custom_uploader.state().get('selection').first().toJSON();

Con archivo adjunto se puede trabajar con:

1. alternativa
2. autor
3. subtítulo
4. compat (
5. artículo
6. meta
7. fecha
8. fechaformateada
9. descripción
10. editarEnlace
11. Nombre del archivo
12. altura
13. icono
14. identificación
15. Enlace
16. menúPedir
17. mímica
18. modificado
19. nombre
20. nonces (
21. Eliminar
22. actualizar
23. prototipo
24. orientación
25. tamaños (
26. completo (
27. altura
28. orientación
29. URL
30. ancho
31. prototipo
32. medio (
33. altura
34. orientación
35. URL
36. ancho
37. prototipo
38. miniatura (
39. altura
40. orientación
41. URL
42. ancho
43. prototipo
44. prototipo (
45. estado
46. subtipo
47. título
48. escribe
49. subido a
50. URL
51. ancho

Para resolver su problema, sugiero usar con el caso 20 anterior:

input.prev('input').val(attchment.sizes.collage-large.url);

Espero que este trabajo!

Estás MUY cerca. Para hacer que el tamaño sea seleccionable dentro del panel de administración, revise el add_image_size Entrada del códice:

add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'your-custom-size' => __('Your Custom Size Name'),
    ) );
}

Entonces, en su caso, esto debería hacer lo que necesita:

add_filter( 'image_size_names_choose', 'my_custom_sizes' );
function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'collage-large' => __('Collage Large'),
        'collage-small' => __('Collage Small'),
    ) );
}