Multiple media upload custom post

  • PureRushh

    (@purerushh)


    10 years ago

    Hello!

    I am making a custom post type with a custom meta box. In this meta box I want to add a function to select multiple images. So I have made a function that get’s all the ID’s from the selected images and storing them in the postmeta table in the DB. The ID’s are saved as a string and the ID’s are separated by a ‘,’.

    However here is my problem, I want to make it possible that when you close the media uploader a preview of all the images you have chosen would appear in the meta box. Here is my code: 

    imageUploader.on( 'close', function() {
    //var attachment = imageUploader.state().get('selection').first().toJSON();
    var attachment = imageUploader.state().get('selection');
    var ids = attachment.map( function (attachment) {
        return attachment.id;
        console.log(ids);
    });
    jQuery.each(ids,function(i) {
        if (i > 0)
           jQuery('#image-tag').prepend( function(attachment) {
             var output = '';
             output += '<img src="'+attachment.url+'" width="150" height="150" />';
             return output;
           });
        });
    hidden.setAttribute( 'value', ids.join() );
    console.log(attachment);
  });

    it works, but for one reason I cant get the image URL. I can’t get the image ID, title or thumbnail url either. In the inspector console I get a message that says “undefined”.

    Hope someone could help me out 😄

Viewing 2 replies - 1 through 2 (of 2 total)
  • infotheme

    (@infothemecom)

    9 years, 12 months ago

    Hey! do something like this 

    jQuery.each(ids,function(i) {
        if (i >= 0)
 var image_url = attachment.toJSON()[i].url;
           jQuery('#image-tag').prepend( function(attachment) {
             var output = '';
             output += '<img src="'+image_url+'" width="150" height="150" />';
             return output;
           });
        });

    Enjoy!
    We just created two plugins, they can improve your blog / website and you can also donate an amount to improve wordpress plugin development.
    https://wordpress.org/plugins/advanced-facebook-page-promoter-lighbox/
    https://wordpress.org/plugins/adsense-booster-manager/
    Thanks & Regards
    Rahul Negi

    Thread Starter PureRushh

    (@purerushh)

    9 years, 12 months ago

    Hi, Tanks for your replay!

    Actually I managed to solve my problem. It was a small problem, I just had to edit ‘attachment.url’ to ‘selection.models[i].attributes.sizes.thumbnail.url’ because when I selected more images all the data was saved in a JSON array. 😄 so here is my code 

    imageUploader.on( 'close', function() {
    var selection = imageUploader.state().get('selection');
    var ids = selection.map( function (attachment) {
        return attachment.id;
        console.log(ids);
    });
     jQuery("#test-img").empty();
    jQuery.each(ids,function(i) {
        if (i > 0)
           jQuery('#test-img').prepend( function(attachment) {
             var output = '';
             output += '<div class="image" id=",'+selection.models[i].attributes.id+'">';
             output += '<img src="'+selection.models[i].attributes.sizes.thumbnail.url+'" alt="'+selection.models[i].attributes.id+'," />';
             output += '<a href="#" style="margin-left: 10px;" class="delete class button-secondary">Delete Image</a></div>';
             return output;
           });
        });
    hiddenSelected.setAttribute( 'value', ids.join() );
  });
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Multiple media upload custom post’ is closed to new replies.