Add link to image with Add media - wordpress

Question

function tshirt_gif_text() {
woocommerce_wp_text_input(
array(
'id' => 'gif_tshirt',
'label' => __( 'GIF T-Shirt', 'woocommerce' ),
'placeholder' => 'http://',
'desc_tip' => 'true',
'description' => __( 'Them GIF links.', 'woocommerce' ),
'value' => get_post_meta( get_the_ID(), 'gif_tshirt', true )
)
);
}
add_action( 'woocommerce_product_options_advanced', 'tshirt_gif_text' );
function tshirt_gif_text_save( $post_id ) {
// update_post_meta( $post_id, 'gif_tshirt', $checkbox );
if (isset($_POST['gif_tshirt'])){
update_post_meta( $post_id, 'gif_tshirt', $_POST['gif_tshirt'], false );
}
if (!isset($_POST['gif_tshirt'])){
delete_post_meta( $post_id, 'gif_tshirt');
}
}
add_action( 'woocommerce_process_product_meta', 'tshirt_gif_text_save' );
I made a custom text field to add a link to a image. I'd like to use the Media uploader to upload or choose an image from the existent ones and update the "gif_tshirt" post meta with the link, but I don't know exactly how to start.
Add my media
I think as a button I can use this one.
And this is the JS
jQuery(function($) {
$(document).ready(function(){
$('#insert-my-media').click(open_media_window);
});
function open_media_window() {
if (this.window === undefined) {
this.window = wp.media({
title: 'Insert a media',
library: {type: 'image'},
multiple: false,
button: {text: 'Insert'}
});
var self = this; // Needed to retrieve our variable in the anonymous function below
this.window.on('select', function() {
var first = self.window.state().get('selection').first().toJSON();
wp.media.editor.insert('[myshortcode id="' + first.id + '"]');
});
}
this.window.open();
return false;
}
});
But it inserts this in the main description, how can i choose the destination?

Answer 1

I did it!
add_action('plugins_loaded', function(){
if($GLOBALS['pagenow']=='post.php'){
add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');
}
});
function my_admin_scripts(){
wp_enqueue_script('jquery');
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
}
function my_admin_styles(){
wp_enqueue_style('thickbox');
}
add_action(
'add_meta_boxes',
function(){
add_meta_box(
'my-metaboxx1', // ID
'Hover MP4 Catalog', // Title
'func99999', // Callback (Construct function)
get_post_types(), //screen (This adds metabox to all post types)
'side', // Context
'core'
);
},
999
);
function func99999($post){
$url =get_post_meta($post->ID,'gif_tshirt', true); ?>
<label for="video_URL">
<input id="video_URL" type="text" name="video_URL" value="<?php echo $url;?>" />
<input id="upload_video_button" class="button" type="button" value="Choose a Video" />
<br />Choose a video from the media library then, update your post/page to save it.<br /><br />
<?php
if ($url != "") {
?>
<video class="video" controls>
<source src="<?php echo $url;?>" type="video/mp4" id="vidsrc">
Your browser does not support HTML5 video.
</video>
<?php
}
?>
</label>
<script>
jQuery(document).ready(function($){
$('#video-metabox.postbox').css('margin-top','30px');
var custom_uploader;
$('#upload_video_button').click(function(e) {
e.preventDefault();
//If the uploader object has already been created, reopen the dialog
if (custom_uploader) {
custom_uploader.open();
return;
}
//Extend the wp.media object
custom_uploader = wp.media.frames.file_frame = wp.media({
title: 'Choose a Video',
button: {
text: 'Choose a Video'
},
multiple: false
});
//When a file is selected, grab the URL and set it as the text field's value
custom_uploader.on('select', function() {
attachment = custom_uploader.state().get('selection').first().toJSON();
$('#video_URL').val(attachment.url);
});
//Open the uploader dialog
custom_uploader.open();
});
});
</script>
<?php
}
add_action( 'save_post', function ($post_id) {
if (isset($_POST['video_URL'])){
update_post_meta($post_id, 'gif_tshirt',$_POST['video_URL']);
}
});