0

I have added a custom image upload option in custom CPT page and here is the screenshot - enter image description here

The image is showing well in side bar of admin page after updating a post, screenshot- enter image description here

But when I add that same meta box in bottom, the image is not being shown or printed there, screenshot - enter image description here

Although meta key and meta value is being updated in database, screenshot - enter image description here

But when I remove other metabox in my CPT, the image is being shown or printed in bottom of admin page. The issue is strange. Here is the PHP and JS codes of image uploader -


<?php

// Add Meta Boxes

add_action( 'add_meta_boxes', 'listing_image_add_metabox' );
function listing_image_add_metabox () {
    add_meta_box( 'listingimagediv', __( 'Listing Image', 'text-domain' ), 'listing_image_metabox', 'event_hosts', 'normal', 'high');
}


function listing_image_metabox ( $post ) {
    global $content_width, $_wp_additional_image_sizes;


    $image_id = get_post_meta( $post->ID, '_listing_image_id', true );


    $old_content_width = $content_width;
    $content_width = 254;


    if ( $image_id && get_post( $image_id ) ) {


        if ( ! isset( $_wp_additional_image_sizes['post-thumbnail'] ) ) {
            $thumbnail_html = wp_get_attachment_image( $image_id, array( $content_width, $content_width ) );
        } else {
            $thumbnail_html = wp_get_attachment_image( $image_id, 'post-thumbnail' );
        }


        if ( ! empty( $thumbnail_html ) ) {
            $content = $thumbnail_html;
            $content .= '<p class="hide-if-no-js"><a href="javascript:;" id="remove_listing_image_button" >' . esc_html__( 'Remove listing image', 'text-domain' ) . '</a></p>';
            $content .= '<input type="hidden" id="upload_listing_image" name="_listing_cover_image" value="' . esc_attr( $image_id ) . '" />';
        }


        $content_width = $old_content_width;
    } else {


        $content = '<img src="" style="width:' . esc_attr( $content_width ) . 'px;height:auto;border:0;display:none;" />';
        $content .= '<p class="hide-if-no-js"><a title="' . esc_attr__( 'Set listing image', 'text-domain' ) . '" href="javascript:;" id="upload_listing_image_button" id="set-listing-image" data-uploader_title="' . esc_attr__( 'Choose an image', 'text-domain' ) . '" data-uploader_button_text="' . esc_attr__( 'Set listing image', 'text-domain' ) . '">' . esc_html__( 'Set listing image', 'text-domain' ) . '</a></p>';
        $content .= '<input type="hidden" id="upload_listing_image" name="_listing_cover_image" value="" />';


    }


    echo $content;
}


add_action( 'save_post', 'listing_image_save', 10, 1 );
function listing_image_save ( $post_id ) {
    if( isset( $_POST['_listing_cover_image'] ) ) {
        $image_id = (int) $_POST['_listing_cover_image'];
        update_post_meta( $post_id, '_listing_image_id', $image_id );
    }
}





jQuery(document).ready(function($) {


    // Uploading files
    var file_frame;


    jQuery.fn.upload_listing_image = function( button ) {
        var button_id = button.attr('id');
        var field_id = button_id.replace( '_button', '' );


        // If the media frame already exists, reopen it.
        if ( file_frame ) {
          file_frame.open();
          return;
        }


        // Create the media frame.
        file_frame = wp.media.frames.file_frame = wp.media({
          title: jQuery( this ).data( 'uploader_title' ),
          button: {
            text: jQuery( this ).data( 'uploader_button_text' ),
          },
          multiple: false
        });


        // When an image is selected, run a callback.
        file_frame.on( 'select', function() {
          var attachment = file_frame.state().get('selection').first().toJSON();
          jQuery("#"+field_id).val(attachment.id);
          jQuery("#listingimagediv img").attr('src',attachment.url);
          jQuery( '#listingimagediv img' ).show();
          jQuery( '#' + button_id ).attr( 'id', 'remove_listing_image_button' );
          jQuery( '#remove_listing_image_button' ).text( 'Remove listing image' );
        });


        // Finally, open the modal
        file_frame.open();
    };


    jQuery('#listingimagediv').on( 'click', '#upload_listing_image_button', function( event ) {
        event.preventDefault();
        jQuery.fn.upload_listing_image( jQuery(this) );
    });


    jQuery('#listingimagediv').on( 'click', '#remove_listing_image_button', function( event ) {
        event.preventDefault();
        jQuery( '#upload_listing_image' ).val( '' );
        jQuery( '#listingimagediv img' ).attr( 'src', '' );
        jQuery( '#listingimagediv img' ).hide();
        jQuery( this ).attr( 'id', 'upload_listing_image_button' );
        jQuery( '#upload_listing_image_button' ).text( 'Set listing image' );
    });


});

5
  • 1
    please edit your question to include the code directly, don't link to a google doc containing the code, you can use triple back ticks or indent by one to add a code block. Also there's a really obvious mistake that's been made that prevents save from working, look at the name attributes then look at the save function. This has nothing to do with the metabox location
    – Tom J Nowell
    Commented May 16, 2023 at 18:59
  • Hi Tom, I just added the code in question. Could you please check if there's any mistake? Commented May 17, 2023 at 18:24
  • Hi, just wondering if any expert can reply here. Commented May 20, 2023 at 8:33
  • can you be more specific about what you meant by "But when I remove other metabox in my CPT"? There is only one metabox in the code you shared. It's also unclear if you mean you can set an image and it saves but the metabox does not show, or if you meant you cannot set the image. I also see this if check if ( $image_id && get_post( $image_id ) ) { but it's unclear wether $image_id is false or if get_post is what's false, there's no debugging information to work with. It's also very likely there's a PHP warning being generated that points directly at the cause
    – Tom J Nowell
    Commented May 21, 2023 at 15:23
  • Hi Tom, I will be more specific and send a message here today. Thanks Commented May 22, 2023 at 11:59

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.