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

2 minutos de lectura

avatar de usuario
bbtimx

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

  • ¡Muchas gracias! Creo que esta fue mi próxima pregunta;) ¡Pero mi problema aún existe! ¡La sección donde puedo seleccionar las miniaturas no está allí!

    – bbtimx

    20 de noviembre de 2013 a las 17:56


¿Ha sido útil esta solución?