I have created gallery metabox but it does not work - wordpress

Question

here is the code which I got from github page:
define('MY_POST_TYPE', 'my');
define('MY_POST_SLUG', 'gallery');
function my_register_post_type () {
$args = array (
'label' => 'Gallery',
'supports' => array( 'title', 'excerpt' ),
'register_meta_box_cb' => 'my_meta_box_cb',
'show_ui' => true,
'query_var' => true
);
register_post_type( MY_POST_TYPE , $args );
}
add_action( 'init', 'my_register_post_type' );
function my_meta_box_cb () {
add_meta_box( MY_POST_TYPE . '_details' , 'Media Library', 'my_meta_box_details', MY_POST_TYPE, 'normal', 'high' );
}
function my_meta_box_details () {
global $post;
$post_ID = $post->ID; // global used by get_upload_iframe_src
printf( "<iframe frameborder='0' src=' %s ' style='width: 100%%; height: 400px;'> </iframe>", get_upload_iframe_src('media') );
}
It shows my gallery page and media up-loader section on that page nicely, but there is no insert into post button inside that uploader and I am unable to insert image to that post. Additionally, If I upload image from my computer it has insert into post button, once I click upon that button page all my media up-loader screen disappears and nothing happens ? what's wrong with my code or approach please

Answer 1

You are missing editor in your supports:
define('MY_POST_TYPE', 'my');
define('MY_POST_SLUG', 'gallery');
function my_register_post_type () {
$args = array (
'label' => 'Gallery',
'supports' => array( 'title', 'excerpt', 'editor' ),
'register_meta_box_cb' => 'my_meta_box_cb',
'show_ui' => true,
'query_var' => true
);
register_post_type( MY_POST_TYPE , $args );
}
add_action( 'init', 'my_register_post_type' );
function my_meta_box_cb () {
add_meta_box( MY_POST_TYPE . '_details' , 'Media Library', 'my_meta_box_details', MY_POST_TYPE, 'normal', 'high' );
}
function my_meta_box_details () {
global $post;
$post_ID = $post->ID; // global used by get_upload_iframe_src
printf( "<iframe frameborder='0' src=' %s ' style='width: 100%%; height: 400px;'> </iframe>", get_upload_iframe_src('media') );
}
Once you add the editor, when you click 'Insert into post' you can see the inserted link in the editor. Which is presumably what you need.
There is a problem with disappearing metabox when you do upload the image.
In my opinion, you don't really need the extra uploader in a metabox. You have 'Add Media' Button above the editor - you can add images, videos or galleries in your CPT that way.
EDIT
You could ditch the media uploader and just call the default wp.media like this:
function my_meta_box_details () {
global $post;
// Here we get the current images ids of the gallery
$custom = get_post_custom($post->ID);
$my_gallery = (isset($custom["my_gallery"][0])) ? $custom["my_gallery"][0] : '';
// We display the gallery
?>
<style>
.gallery-item{
width:150px;
display: inline-block;
margin-right: 10px;
}
.gallery-item img{
width: 150px;
}
</style>
<div class="gallery_images">
<?php
$img_array = (isset($my_gallery) && $my_gallery != '') ? explode(',', $my_gallery) : '';
if ($img_array != '') {
foreach ($img_array as $img) {
echo '<div class="gallery-item">'.wp_get_attachment_image($img).'</div>';
}
}
?>
</div>
<p class="separator">
<input id="my_gallery_input" type="hidden" name="my_gallery" value="<?php echo $my_gallery; ?>" data-urls=""/>
<input id="manage_gallery" title="Manage gallery" type="button" value="Manage gallery" />
<input id="empty_gallery" title="Empty gallery" type="button" value="Empty gallery" />
</p>
<script>
jQuery(document).ready(function($) {
$(document).on('click', '#manage_gallery', upload_gallery_button);
function upload_gallery_button(e) {
e.preventDefault();
var $input_field = $('#my_gallery_input');
var ids = $input_field.val();
var gallerysc = '[gallery ids="' + ids + '"]';
wp.media.gallery.edit(gallerysc).on('update', function(g) {
var id_array = [];
var url_array = [];
$.each(g.models, function(id, img){
url_array.push(img.attributes.url);
id_array.push(img.id);
});
var ids = id_array.join(",");
ids = ids.replace(/,\s*$/, "");
var urls = url_array.join(",");
urls = urls.replace(/,\s*$/, "");
$input_field.val(ids);
var html = '';
for(var i = 0 ; i < url_array.length; i++){
html += '<div class="gallery-item"><img src="'+url_array[i]+'"></div>';
}
$('.gallery_images').html('').append(html);
});
}
$(document).on('click', '#empty_gallery', empty_gallery_button);
function empty_gallery_button(e){
e.preventDefault();
var $input_field = $('#my_gallery_input');
$input_field.val('');
$('.gallery_images').html('');
}
});
</script>
<?php
}
function my_metabox_save(){
global $post;
if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) {
return;
} elseif(is_object($post)){
$my_gallery = (isset($_POST['my_gallery'])) ? $_POST['my_gallery'] : '';
update_post_meta($post->ID, 'my_gallery', $my_gallery);
}
}
add_action('save_post', 'my_metabox_save');
And remove the editor from your supports argument. Should be working fine.