Attaching media to post type without editor support

Question

I'm trying to add attachments to a custom post type that hasn't editor support (only excerpt).

I've managed to show the Media Manager dialog box, but I can only see the "Insert into post" button (that does nothing anyway) and when uploading images, they don't get attached to the post.

To implement what I did so far, I've added a very simple meta box to the post type:

function add_gallery_post_media_meta_box()
{

    add_meta_box(
        'gallery_post_media',
        'Gallery Media',
        'gallery_post_media',
        'gallery',
        'side',
        'high'
    );

} // add_file_meta_box
add_action('add_meta_boxes', 'add_gallery_post_media_meta_box');

function gallery_post_media()
{

    echo '<a href="#" id="gallery-add-media" title="' . __('Add media') .'">' . __('Add media') .'</a>';

} // end post_media

function register_admin_scripts() {
    wp_enqueue_media();
    wp_register_script( 'gallery_post_media_admin_script', get_template_directory_uri() . '/library/cpt/gallery.js' );
    wp_enqueue_script( 'gallery_post_media_admin_script' );

} // end register_scripts
add_action( 'admin_enqueue_scripts', 'register_admin_scripts' );

And the script:

jQuery(document).ready(function ($) {
    $('#gallery-add-media').click(function (e) {
        var send_attachment_bkp = wp.media.editor.send.attachment;
        var button = $(this);
        var id = button.attr('id').replace('_button', '');
        wp.media.editor.send.attachment = function (props, attachment) {
            $("#" + id).val(attachment.url);
            wp.media.editor.send.attachment = send_attachment_bkp;
        }

        wp.media.editor.open(button);
        event.preventDefault();
        return false;
    });
});

If I would able to find some documentation about wp.media.editor.send.attachment, I'd probably manage to get what I want, but I can't find anything useful. The only solutions I've found all relies on custom fields, instead I want to simply attach these images to the post, without inserting them in the post content, as I would do with normal posts.

As a side question: is it possible to tell the Media Manager to only accept images?

Daniel Iser Daniel Iser · Accepted Answer · 2013-09-03T22:14:09

This is the JavaScript I use for media fields. Once you hit insert you can do whatever you want with the data from the image's selected

jQuery(document).ready(function() {
   //uploading files variable
   var custom_file_frame;
   jQuery(document).on('click', '.meida-manager', function(event) {
      event.preventDefault();
      $this = jQuery(this);
      //If the frame already exists, reopen it
      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: "Sample title of WP Media Uploader Frame",
         library: {
            type: 'image'
         },
         button: {
            //Button text
            text: "insert text"
         },
         //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();
         //do something with attachment variable, for example attachment.filename
         //Object:
         //attachment.alt - image alt
         //attachment.author - author id
         //attachment.caption
         //attachment.dateFormatted - date of image uploaded
         //attachment.description
         //attachment.editLink - edit link of media
         //attachment.filename
         //attachment.height
         //attachment.icon - don't know WTF?))
         //attachment.id - id of attachment
         //attachment.link - public link of attachment, for example ""http://site.com/?attachment_id=115""
         //attachment.menuOrder
         //attachment.mime - mime type, for example image/jpeg"
         //attachment.name - name of attachment file, for example "my-image"
         //attachment.status - usual is "inherit"
         //attachment.subtype - "jpeg" if is "jpg"
         //attachment.title
         //attachment.type - "image"
         //attachment.uploadedTo
         //attachment.url - http url of image, for example "http://site.com/wp-content/uploads/2012/12/my-image.jpg"
         //attachment.width
         $this.val(attachment.url);
         $this.siblings('img').attr('src',attachment.url);
      });

      //Open modal
      custom_file_frame.open();
   });
});

Attaching media to post type without editor support

1 Answers