Get image type url with Wordpress Media Upload

1
votes

I can't seem to retrieve a specific image type, like thumbnail, thumb, or post-thumbnail with Wordpress Media Upload.

All I get is the images original size url, and because of that I show a huge image instead of a thumbnail or a defined image size.

This is my script:

jQuery("#submit_logo_button").click(function(e){
e.preventDefault();
var custom_file_frame;
if (typeof(custom_file_frame)!=="undefined") {
     custom_file_frame.close();
  }

  //Create WP media frame.
  custom_file_frame = wp.media.frames.customHeader = wp.media({
     //Title of media manager frame
     title: "Thumbs - Choose Logo",
     library: {
        type: 'image'
     },
     button: {
        //Button text
        text: "Select Logo"
     },
     size: "post-thumbnail",//shouldn't this work?!?
     //Do not allow multiple files, if you want multiple, set true
     multiple: false
  });

  //callback for selected image
  custom_file_frame.on('select', function() {
     var attachment = custom_file_frame.state().get('selection').first().toJSON();
     jQuery("#image_thumbnail").attr("src", attachment.url);

  });

  //Open modal
  custom_file_frame.open();

});

Thankyou :)

3
jquerywordpress

3 Answers

1
votes

You could loop in the attachment.sizes sub-object of the object attachment, like this:

custom_file_frame.on('select', function() {
    var attachment = custom_file_frame.state().get('selection').first().toJSON();

    /* 🢃 The Loop here 🢃 */

    $.each(attachment.sizes, function( name, attribs ) {
        console.log( name );
        $.each( attribs, function( attrib, value ) {
            console.log( "\t" + attrib + " ==> " + value);
        });
    });


});

So you could retrieve the custom image sizes too.

;-)

0
votes

Not a complete awnser, I can't get custom image sizes, only these ones listed below.

console.log(attachment.sizes.thumbnail.url);

//I can get any image type using:

jQuery("#indot_under_logo_img").attr("src", attachment.sizes.thumbnail.url);

//or

jQuery("#indot_under_logo_img").attr("src", attachment.sizes.full.url);

//or

jQuery("#indot_under_logo_img").attr("src", attachment.sizes.medium.url);
0
votes
if( attachment.sizes){
    if(   attachment.sizes.thumbnail !== undefined  ) url_image=attachment.sizes.thumbnail.url; 
    else if( attachment.sizes.medium !== undefined ) url_image=attachment.sizes.medium.url;
    else url_image=attachment.sizes.full.url;

    console.log(  url_image  );
    jQuery('<li data-id="'+attachment.id+'"><img src="'+url_image+'"></li>').appendTo(blocImages);
}