• I’m trying to create a metabox that allows the user to upload an image, almost like a second feature image.

    With my metabox, the user can open the WP Media Manager and select an image. The problem is that when the image is selected, the URL is inserted into my post instead of going into my metabox.

    Here is my PHP:

    function lacuna2_image_enqueue() {
        global $typenow;
        if( $typenow == 'case-study' ) {
            wp_enqueue_media();
    
            // Registers and enqueues the required javascript.
            wp_register_script( 'meta-box-image-upload', get_template_directory_uri() . '/js/meta-box-image-upload.js', array( 'jquery' ) );
            wp_localize_script( 'meta-box-image-upload', 'meta_image',
                array(
                    'title' => 'Choose or Upload an Image',
                    'button' => 'Use this image',
                )
            );
            wp_enqueue_script( 'meta-box-image-upload' );
        }
    }
    add_action( 'admin_enqueue_scripts', 'lacuna2_image_enqueue' );
    
    /**
     * Create Case Study background image metabox
     */
    
    function lacuna2_case_study_bg( $post ) {
        wp_nonce_field( 'case_study_bg_submit', 'case_study_bg_nonce' );
        $lacuna2_stored_meta = get_post_meta( $post->ID ); ?>
    
        <p>
            <label for="case-study-bg" class="lacuna2-row-title">Case Study Background Image</label>
            <input type="text" name="meta-image" id="meta-image" value="<?php if ( isset ( $lacuna2_stored_meta['meta-image'] ) ){ echo $lacuna2_stored_meta['meta-image'][0]; } ?>" />
            <input type="button" id="meta-image-button" class="button" value="Choose or Upload an Image" />
        </p>
    
    <?php    
    
    }
    
    /**
     * Add Case Study background image metabox to the back end of Case Study posts
     */
    
    function lacuna2_add_meta_boxes() {
        add_meta_box( 'case-study-bg', 'Case Study background image', 'lacuna2_case_study_bg', 'case-study', 'side', 'low' );
    }
    add_action( 'add_meta_boxes', 'lacuna2_add_meta_boxes' );
    
    /**
     * Save background image metabox for Case Study posts
     */
    
    function save_case_study_bg_meta_box( $post_id ) {
        $is_autosave = wp_is_post_autosave( $post_id );
        $is_revision = wp_is_post_revision( $post_id );
        $is_valid_nonce = ( isset( $_POST[ 'case_study_bg_nonce' ] ) && wp_verify_nonce( $_POST[ 'case_study_bg_nonce' ], 'case_study_bg_submit' ) ) ? '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
        if( isset( $_POST[ 'meta-image' ] ) ) {
            update_post_meta( $post_id, 'meta-image', $_POST[ 'meta-image' ] );
        }
    }
    
    add_action( 'save_post', 'save_case_study_bg_meta_box' );

    And here is my JS:

    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 ) {
                wp.media.editor.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(){
    
                return false;
    
                // 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.
            wp.media.editor.open();
        });
    });
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Using the media manager with an "image upload" metabox’ is closed to new replies.