web-dev-qa-db-fra.com

Métabox de téléchargement de média image

J'ai créé ma première métabox de téléchargement d'images, mais je semble avoir des problèmes.

  1. Les données ne sont pas sauvegardées lorsque j'ajoute une image, puis met à jour la page - je suis sûr que c'est une faute de frappe que je ne vois pas.

  2. Le bouton de téléchargement d'image de la deuxième zone de saisie ne charge pas la boîte de la médiathèque, contrairement à la première - Js, éventuellement?

Voici mon code

<?php

/*
Plugin Name: Meta Box Media Library Image 
Plugin URI: 
Description: Adds the ability to select an image from the media library
Version: 1.0
Author: Danny Wardle
Author URI: www.thevisionists.com
License: GPLv2
*/

//second metabox

?>
<?php 
add_action( 'add_meta_boxes', 'dd_image_create' );

function dd_image_create() {

//create a custom meta image box
add_meta_box ( 'dd-meta-image', 'Display chosen image', 'dd_image_function', 'page', 'normal', 'high' );

}

?>

<?php

function dd_image_function( $post ) {
$dd_image_one = get_post_meta ($post->ID, 'dd_image_one', true);
$dd_image_two = get_post_meta($post->ID, 'dd_image_two', true);
?>
Image One
<input id="dd_image_one" type="text" size="75" name="dd_image_one" value="<?php echo esc_url( $dd_image_one ); ?>" />
<input id="upload_image_button" value="Media Library Upload" class="button-secondary" />
<br /> Enter an image URL or use an image from the Media Library
<br />
<br />
Image Two
<input id="dd_image_two" type="text" size="75" name="dd_image_two" value="<?php echo esc_url( $dd_image_two ); ?>" />
<input id="upload_image_button" value="Media Library Upload" class="button-secondary" />
<br /> Enter an image URL or use an image from the Media Library

<?php

}

//script actions with page detection
add_action('admin_print_scripts-post.php', 'dd_image_admin_scripts');
add_action('admin_print_scripts-post-new.php', 'dd_image_admin_scripts');

function dd_image_admin_scripts() {
wp_enqueue_script( 'boj-image-upload',
plugins_url( '/dd-meta-box/dd-meta-image.js' ),
array( 'jquery', 'media-upload', 'thickbox' ) );
}

//style actions with page detection
add_action('admin_print_styles-post.php', 'dd_image_admin_styles');
add_action('admin_print_styles-post-new.php', 'dd_image_admin_styles');

function dd_image_admin_styles() {
wp_enqueue_style( 'thickbox' );
}

// hook to save the meta data 

add_action ( 'save_post', 'dd_image_save_meta' );

function dd_image_save_meta( $post_id ) {
//save the metadata

//verify the metadata is set
if ( isset ($_POST['dd_image_one'])) {
//save the metadata
update_post_meta( $post_id, 'dd_image_one', esc_url_raw( $_POST['dd_image']));

}

if ( isset ($_POST['dd_image_two'])) {
    update_post_meta( $post_id, 'dd_image_two', esc_url_raw( $_POST['dd_image']));
}

}

?>

code de fichier js

jQuery(document).ready(function($) {
var formfield = null;

$('#upload_image_button').click(function() {
$('html').addClass('Image');
formfield = $('#dd_image').attr('name');
tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
return false;
});

// user inserts file into post.
//only run custom if user started process using the above process
// window.send_to_editor(html) is how wp normally handle the received data

window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function(html){
var fileurl;

if (formfield != null) {
fileurl = $('img',html).attr('src');
$('#dd_image').val(fileurl);
tb_remove();
$('html').removeClass('Image');
formfield = null;
} else {
window.original_send_to_editor(html);
}
};
});
phpfunctionsmetabox
1
Dannyw24

Dans votre JS, vous avez deux fois l'appel à $('#dd_image')et dans votre code HTML, vous n'avez aucune entrée nommée dd_image, mais dd_image_one et dd_image_two ...

Et aussi dans votre code HTML, vous avez deux fois id="upload_image_button"et c'est mauvais :-). Ainsi, lorsque vous cliquez sur le premier ou le deuxième bouton, vous effectuez le même appel et ne modifiez qu'une entrée inexistante (#dd_image).

Votre bouton doit avoir deux identifiants différents.

Une fois que vous avez modifié les identifiants, le moyen le plus simple de gérer les deux boutons consiste à dupliquer votre appel JS et à modifier les identifiants comme il se doit (saisie de boutons et d'images).

J'espère que ça fonctionnera pour vous.

1
anou