1

First, thank you for your help.

I have created a custom template, added two metaboxes in Pages using a 'Page_Fiche_Metier.php' template. One meta box is to upload an image. But the Upload Button is not opening the media library, although I have added the jQuery script.

Here is the code for the meta-boxes.php

    <?php

function prfx_custom_meta(){
  global $post;
    if ( 'page_fiche_metier.php' == get_post_meta( $post->ID, '_wp_page_template', true ) ) {
    add_meta_box( 'prfx_meta', __( 'Vidéo Présentation Bas de Page', 'prfx-textdomain' ), 'prfx_meta_callback', 'page' );
  }
}
add_action( 'add_meta_boxes', 'prfx_custom_meta' );


function prfx_meta_callback( $post ) {
    wp_nonce_field( basename( __FILE__ ), 'prfx_nonce' );
    $prfx_stored_meta = get_post_meta( $post->ID );
    ?>

    <p>
        <label for="meta-text" class="prfx-row-title"><?php _e( 'Titre', 'prfx-textdomain' )?></label>
        <input type="text" name="meta-text" id="meta-text" value="<?php if ( isset ( $prfx_stored_meta['meta-text'] ) ) echo $prfx_stored_meta['meta-text'][0]; ?>" />
    </p>


      <p>
        <label for="meta-url" class="prfx-row-title"><?php _e( 'URL', 'prfx-textdomain' )?></label>
        <input type="text" name="meta-url" id="meta-url" value="<?php if ( isset ( $prfx_stored_meta['meta-url'] ) ) echo $prfx_stored_meta['meta-url'][0]; ?>" />
    </p>

    <p>
        <label for="meta-image" class="prfx-row-title"><?php _e( 'Example File Upload', 'prfx-textdomain' )?></label>
        <input type="text" name="meta-image" id="meta-image" value="<?php if ( isset ( $prfx_stored_meta['meta-image'] ) ) echo $prfx_stored_meta[
        'meta-image'][0]; ?>" />
        <input type="button" id="meta-image-button" class="button" value="<?php _e( 'Choisir un fichier', 'prfx-textdomain' )?>" />
    </p>

    <?php
}


function prfx_meta_save( $post_id ) {

    // Checks save status
    $is_autosave = wp_is_post_autosave( $post_id );
    $is_revision = wp_is_post_revision( $post_id );
    $is_valid_nonce = ( isset( $_POST[ 'prfx_nonce' ] ) && wp_verify_nonce( $_POST[ 'prfx_nonce' ], basename( __FILE__ ) ) ) ? 'true' : 'false';

    // Exits script depending on save status
    if ( $is_autosave || $is_revision || !$is_valid_nonce ) {
        return;
    }


    if( isset( $_POST[ 'meta-text' ] ) ) {
        update_post_meta( $post_id, 'meta-text', sanitize_text_field( $_POST[ 'meta-text' ] ) );
    }



    if( isset( $_POST[ 'meta-url' ] ) ) {
        update_post_meta( $post_id, 'meta-url', sanitize_text_field( $_POST[ 'meta-url' ] ) );
    }

    if( isset( $_POST[ 'meta-image' ] ) ) {
    update_post_meta( $post_id, 'meta-image', $_POST[ 'meta-image' ] );
    }

}
add_action( 'save_post', 'prfx_meta_save' );


function prfx_image_enqueue() {
    global $typenow;
    if( $typenow == 'post' ) {
        wp_enqueue_media();

        // Registers and enqueues the required javascript.
        wp_register_script( 'meta-box-image', plugin_dir_url( __FILE__ ) . 'meta-box-image.js', array( 'jquery' ) );
        wp_localize_script( 'meta-box-image', 'meta_image',
            array(
                'title' => __( 'Choose or Upload an Image', 'prfx-textdomain' ),
                'button' => __( 'Use this image', 'prfx-textdomain' ),
            )
        );
        wp_enqueue_script( 'meta-box-image' );
    }
}
    add_action( 'admin_enqueue_scripts', 'prfx_image_enqueue' );

And the code for js:

/*
 * Attaches the image uploader to the input field
 */
jQuery(document).ready(function($){

    // Instantiates the variable that holds the media library frame.
    var meta_image_frame;

    // Runs when the image button is clicked.
    $('#meta-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(){

            // Grabs the attachment selection and creates a JSON representation of the model.
            var media_attachment = meta_image_frame.state().get('selection').first().toJSON();

            // Sends the attachment URL to our custom image input field.
            $('#meta-image').val(media_attachment.url);
        });

        // Opens the media library frame.
        meta_image_frame.open();
    });
});
0

You mentioned that you've added the meta box for pages:

I have created a custom template, added two metaboxes in Pages using a 'Page_Fiche_Metier.php' template.

However, in prfx_image_enqueue(), the code only runs if the post type is post. Changing prfx_image_enqueue() so that it checks for the page post type will fix the issue.

function prfx_image_enqueue() {
    global $typenow;
    if ( $typenow == 'page' ) {
        wp_enqueue_media();

        // Registers and enqueues the required javascript.
        wp_register_script( 'meta-box-image', plugin_dir_url( __FILE__ ) . 'meta-box-image.js', array( 'jquery' ) );
        wp_localize_script( 'meta-box-image', 'meta_image',
                array(
                        'title' => __( 'Choose or Upload an Image', 'prfx-textdomain' ),
                        'button' => __( 'Use this image', 'prfx-textdomain' ),
                )
        );
        wp_enqueue_script( 'meta-box-image' );
    }
}
add_action( 'admin_enqueue_scripts', 'prfx_image_enqueue' );
0

Thank you for your response. I found the issue. The path "plugin_dir_url( FILE ) . 'meta-box-image.js' " was not the correct one. I just changed to the correct directory! Best

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.