I have created a meta-box that provides a upload function via the default media uploader from WordPress.
This works fine as long as I have one upload option.
But guess what? I want another one.
If I do this then the media box opens and I can select an image. The problem is that both input-fields are filled with the URL of the image.
I would like to be able to add multiple select options to upload images and preferably use one script.
Here is the script (output):
function dynamic_meta_callback( $post ) {
wp_nonce_field( basename( __FILE__ ), 'dynamic_nonce' );
$dsm = get_post_meta( $post->ID );
$post = get_post($post_id, ARRAY_A);
$pn = $post['post_name'];
$a="_".$pn.'_1';
$b = '_'.$pn.'_2';
?>
<div class="image_large" style="background-image: url(<?php echo $dsm['dynamic-image'.$a.''][0] ?>); background-repeat: no-repeat;">
<p><strong>Image 1</strong></p>
<p>
<label for="dynamic-image" class="dynamic-row-title"><?php _e( 'Image 1', 'dynamic-textdomain' )?></label>
<input type="text" name="dynamic-image<?php echo $a; ?>" class="dynamic-image" value="<?php if ( isset ( $dsm['dynamic-image'.$a.''] ) ) echo $dsm['dynamic-image'.$a.''][0]; ?>" />
<input type="button" class="dynamic-image-button" class="button" value="<?php _e( 'Choose or Upload', 'dynamic-textdomain' )?>" />
</p>
</div>
<div class="image_large" style="background-image: url(<?php echo $dsm['dynamic-image'.$b.''][0] ?>); background-repeat: no-repeat;">
<p><strong>Image 2</strong></p>
<p>
<label for="dynamic-image" class="dynamic-row-title"><?php _e( 'Image2', 'dynamic-textdomain' )?></label>
<input type="text" name="dynamic-image<?php echo $b; ?>" class="dynamic-image" value="<?php if ( isset ( $dsm['dynamic-image'.$b.''] ) ) echo $dsm['dynamic-image'.$b.''][0]; ?>" />
<input type="button" class="dynamic-image-button" class="button" value="<?php _e( 'Choose or Upload', 'dynamic-textdomain' )?>" />
</p>
</div>
<?php
}
Here is the save function
function dynamic_meta_save( $post_id ) {
$post = get_post($post_id, ARRAY_A);
$pn = $post['post_name'];
$a="_".$pn.'_1';
$b = '_'.$pn.'_2';
// Checks save status
$is_autosave = wp_is_post_autosave( $post_id );
$is_revision = wp_is_post_revision( $post_id );
$is_valid_nonce = ( isset( $_POST[ 'dynamic_nonce' ] ) && wp_verify_nonce( $_POST[ 'dynamic_nonce' ], basename( __FILE__ ) ) ) ? 'true' : 'false';
// Exits script depending on save status
if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
return;
}
// Checks for input and sanitizes/saves if needed
// Checks for input and saves if needed
if( isset( $_POST[ 'dynamic-image'.$a.'' ] ) ) { update_post_meta( $post_id, 'dynamic-image'.$a.'', $_POST[ 'dynamic-image'.$a.'' ] );}
if( isset( $_POST[ 'dynamic-image'.$b.'' ] ) ) { update_post_meta( $post_id, 'dynamic-image'.$b.'', $_POST[ 'dynamic-image'.$b.'' ] );}
}
add_action( 'save_post', 'dynamic_meta_save' );
And this is the function that calls the external js and supplies data
function dynamic_image_enqueue() { global $typenow;
$post = get_post($post_id, ARRAY_A);
if( $typenow == 'page' ) { wp_enqueue_media();
wp_register_script( 'dynamic-box-image', plugin_dir_url( __FILE__ ) . 'dynamic-box-image.js', array( 'jquery' ) );
wp_localize_script( 'dynamic-box-image', 'meta_image',
array('title' => __( 'Choose or Upload', 'dynamic-textdomain' ),
'button' => __( 'Use this image', 'dynamic-textdomain' ),
));
wp_enqueue_script( 'dynamic-box-image' ); }}
add_action( 'admin_enqueue_scripts', 'dynamic_image_enqueue' );
}
This is what the external js looks like
jQuery(document).ready(function($){
// Instantiates the variable that holds the media library frame.
var meta_image_frame;
// Runs when the image button is clicked.
$('.dynamic-image-button').click(function(e){
// Prevents the default action from occuring.
e.preventDefault();
// If the frame already exists, re-open it.
if ( meta_image_frame ) { meta_image_frame.open(); return;}
// Sets up the media library frame
meta_image_frame = wp.media.frames.meta_image_frame = wp.media({title: meta_image.title,button: { text: meta_image.button },library: { type: 'image' }});
// Runs when an image is selected.
meta_image_frame.on('select', function(){ var media_attachment = meta_image_frame.state().get('selection').first().toJSON();
$('.dynamic-image').val(media_attachment.url); });
// Opens the media library frame.
meta_image_frame.open();
});
});
Hope somebody can help me out!
———— UPDATE ————
I have tried giving the input button a unique value and pass this on to the external .js. Found out that I have to save the value to the database everytime I have selected an image. If I don’t every input field wil have the value of the last image selected!
Still struggling with this one!