I have added a custom image upload option in custom CPT page and here is the screenshot -
The image is showing well in side bar of admin page after updating a post, screenshot-
But when I add that same meta box in bottom, the image is not being shown or printed there, screenshot -
Although meta key and meta value is being updated in database, screenshot -
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' );
});
});
name
attributes then look at the save function. This has nothing to do with the metabox locationif ( $image_id && get_post( $image_id ) ) {
but it's unclear wether$image_id
is false or ifget_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