php – Pasar el valor de carga de medios al campo de entrada

Pregunta:

He creado un meta-box que proporciona una función de carga a través del cargador de medios predeterminado de WordPress.

Esto funciona bien siempre que tenga una opción de carga.
¿Pero adivina que? Quiero otro.

Si hago esto, se abre el cuadro de medios y puedo seleccionar una imagen. El problema es que ambos campos de input están llenos de la URL de la imagen.

Me gustaría poder agregar múltiples opciones de selección para cargar imágenes y, preferiblemente, usar un script.

Aquí está el script (salida):

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
}

Aquí está la función de guardar

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' );

Y esta es la función que llama a los js externos y proporciona datos

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' );
    }

Así es como se ve el js externo

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();
});
});

¡Espero que alguien pueda ayudarme!

———— ACTUALIZAR ————
Intenté darle al botón de entrada un valor único y pasarlo al .js externo. Descubrí que tengo que guardar el valor en la base de datos cada vez que selecciono una imagen. ¡Si no lo hago, todos los campos de entrada tendrán el valor de la última imagen seleccionada!

¡Todavía estoy luchando con este!

Respuesta:

Puede usar algo como esto para agregar tantas imágenes como desee con el botón de clic, por ejemplo, agregar logotipos o anuncios, etc.

jQuery(document).ready(function($){
    var mediaUploader;
        /* function to add partner logo */
    function display_ad( button,  title, btnTxt,  inputFieldId,  outputDivId,formClass, e){
        e.preventDefault();
        if (mediaUploader) {
            mediaUploader.open();
            return;
        }
        mediaUploader = wp.media.frames.file_frame =wp.media({
            title: title,
            button:{
                text: btnTxt,
            },
            multiple:false,
        });
        mediaUploader.on('select',function(){
            attachment = mediaUploader.state().get('selection').first().toJSON();


            $( inputFieldId ).val(attachment.url);
            $( outputDivId ).css('background-image','url(' + attachment.url +')' );
            $(formClass).submit();
        });
        mediaUploader.open();
    }

    function remove_ad(inputFieldId, formClass,e){
        e.preventDefault();
        var answer = confirm("Are you sure you want to remove this logo?");
        if ( answer == true ) {
            $(inputFieldId).val('');
            $(formClass).submit();

        }
        return;
    }

    /** Different button clicks **/
    $('#logo-one').on('click',function(e){
            //display_ad( button,  title, btnTxt,  inputFieldId,  outputDivId, e)
            display_ad('#logo-one', 'Choose Logo One','Choose Logo','#sunshine-partner-one','#sunshine-partner-one-preview','.sunshine-admin-form',e);
        });
    $('#logo-two').on('click',function(e){
            display_ad('#logo-two', 'Choose Logo two','Choose Logo','#sunshine-partner-two','#sunshine-partner-two-preview','.sunshine-admin-form',e);
        });
    $('#logo-three').on('click',function(e){
            display_ad('#logo-three', 'Choose Logo Three','Choose Logo','#sunshine-partner-three','#sunshine-partner-three-preview','.sunshine-admin-form',e);
        });
    $('#logo-four').on('click',function(e){
            display_ad('#logo-four', 'Choose Logo Four','Choose Logo','#sunshine-partner-four','#sunshine-partner-four-preview','.sunshine-admin-form',e);
        });
    $('#logo-five').on('click',function(e){
            display_ad('#logo-five', 'Choose Logo Five','Choose Logo','#sunshine-partner-five','#sunshine-partner-five-preview','.sunshine-admin-form',e);
        });
    $('#logo-six').on('click',function(e){
            display_ad('#logo-six', 'Choose Logo Six','Choose Logo','#sunshine-partner-six','#sunshine-partner-six-preview','.sunshine-admin-form',e);
        });
    /*Romove button click*/
    $('#remove-logo-one').on('click',function(e){
        remove_ad('#sunshine-partner-one','.sunshine-admin-form',e);
    });
    $('#remove-logo-two').on('click',function(e){
        remove_ad('#sunshine-partner-two','.sunshine-admin-form',e);
    });
    $('#remove-logo-three').on('click',function(e){
        remove_ad('#sunshine-partner-three','.sunshine-admin-form',e);
    });
    $('#remove-logo-four').on('click',function(e){
        remove_ad('#sunshine-partner-four','.sunshine-admin-form',e);
    });
    $('#remove-logo-five').on('click',function(e){
        remove_ad('#sunshine-partner-five','.sunshine-admin-form',e);
    });
    $('#remove-logo-six').on('click',function(e){
        remove_ad('#sunshine-partner-six','.sunshine-admin-form',e);
    });

}); 

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

web tasarım