how to display image from uploads folder in wordpress - image

Question

I am just learning to create meta box to upload file in wp-content/uploads folder through below code:
//display image meta box
function display_image_box() {
global $post;
wp_nonce_field( plugin_basename( __FILE__ ), 'wp_custom_noncename' );
echo '<input id="post_media" type="file" name="post_media" value="" size="25" />';
}
//upload image
function update_custom_meta_data( $id, $data_key, $is_file = false ) {
global $post;
if( $is_file && ! empty( $_FILES ) ) {
$upload = wp_handle_upload( $_FILES[$data_key], array( 'test_form' => false ) );
if( isset( $upload['error'] ) && '0' != $upload['error'] ) {
wp_die( 'There was an error uploading your file. ' );
} else {
update_post_meta( $id, $data_key, $upload );
}
}
}
//save image
function save_custom_meta_data( $id ) {
if( ! wp_verify_nonce( $_POST['wp_custom_noncename'], plugin_basename( __FILE__ ) ) ) {
return;
}
if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return;
}
update_custom_meta_data( $id, 'post_media', true );
}
add_action( 'save_post', 'save_custom_meta_data' );
//register script
function register_admin_scripts() {
wp_register_script( 'custom_admin_script', get_template_directory_uri() . '/js/admin.js' );
wp_enqueue_script( 'custom_admin_script' );
}
add_action( 'admin_enqueue_scripts', 'register_admin_scripts' );
this working & uploaded file nicely but i cant display it cause getting the array something like this:
> [post_media] => Array
(
[0] => a:3:{s:4:"file";s:81:"E:wampwwwtestchild/wp-content/themes/twentyeleven/uploads/2012/12/coffee_star.jpg";s:3:"url";s:60:"wp-content/themes/twentyeleven/image/2012/12/coffee_star.jpg";s:4:"type";s:10:"image/jpeg";}
)
so how can i display the image file now ?

Answer 1

Since the custom fields are saved in _postmeta table, we will get it by $post->ID.
$media = stripslashes(get_post_meta($post->ID, 'post_media', true));
if (isset($media[0])){
echo '<img src="'.$media.'" alt="images" />';
}
Hope it helps...
And if you want to try this code.
Upload Script
<script type="text/javascript">
var formfield = '';
$j(document).ready(function(){uploadimagebutton();});
function uploadimagebutton() {
$j('#upload_image_button').click(function() {
formfield = $j(this).prev().attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function(html){
if (formfield) {
imgurl = $j(html).attr('src');
$j('#'+formfield).val(imgurl);
tb_remove();
$j('#pagebackgroundthumb').html('<img src="'+imgurl+'" alt="" style="max-width:85%;" />');
} else {
window.original_send_to_editor(html);
}
};
$j('#delete_image_button').click(function(){
formfield = $j(this).prev().prev().attr('name');
$j('#'+formfield).attr('value', '');
$j('#pagebackgroundthumb').html('');
});
}
</script>
place this in your theme function.php
<?php
/* -------------------------------------------------------------
Meta boxes
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
add_action('edit_post', 'adj_update');
add_action('save_post', 'adj_update');
add_action('publish_post', 'adj_update');
/* Use the admin_menu action to define the custom boxes */
add_action('admin_menu', 'adj_add_custom_box');
/* Adds a custom section to the "advanced" Post and Page edit screens */
function adj_add_custom_box() {
if( function_exists( 'add_meta_box' )) {
add_meta_box( 'addsettings', 'Additional Settings',
'adj_inner_custom_box', 'page', 'advanced', 'high' );
}
}
/* Prints the inner fields for the custom post/page section */
function adj_inner_custom_box() {
// Use nonce for verification
echo '<input type="hidden" name="myplugin_noncename" id="myplugin_noncename" value="' .
wp_create_nonce( plugin_basename(__FILE__) ) . '" />';
// The actual fields for data entry
global $post;
$subtitle = stripslashes(get_post_meta($post->ID, 'subtitle', true));
$pagebackground = stripslashes(get_post_meta($post->ID, 'pagebackground', true));
?>
<div class="inside">
<label for="subtitle"><strong>Page Subtitle:</strong> </label>
<input type="text" name="subtitle" value="<?php echo $subtitle ?>" id="subtitle" style="width:95%" />
<p>If menu title is different with page title, please type here the desired page title.</p>
<label for="pagebackgroundthumb"><strong>Page Background Image:</strong> </label>
<div id="pagebackgroundthumb"><?php if(!empty($pagebackground))echo '<img src="'.$pagebackground.'" alt="" width="80%" />';?></div>
<input id="upload_image" name="pagebackground" type="hidden" size="45" value="<?php echo $pagebackground;?>">
<input class="button-secondary" id="upload_image_button" value="Upload/Select an image" type="button"><input class="button-secondary" id="delete_image_button" value="Delete" type="button">
</div>
<?php
}
function adj_update($id) {
// verify this came from the our screen and with proper authorization,
// because save_post can be triggered at other times
if ( !wp_verify_nonce( $_POST['myplugin_noncename'], plugin_basename(__FILE__) )) {
return $post_id;
}
if ( 'page' == $_POST['post_type'] ) {
if ( !current_user_can( 'edit_page', $post_id ))
return $post_id;
} else {
return $post_id;
}
$label = $_POST['subtitle'];
$pagebackground = $_POST['pagebackground'];
if (!empty($label)) {
$meta_value = get_post_meta($id, 'subtitle', true);
if(!empty($meta_value)) {
update_post_meta($id, 'subtitle', $label);
} else {
add_post_meta($id, 'subtitle', $label, true);
}
} else {
delete_post_meta($id, 'subtitle');
}
if (!empty($pagebackground)) {
$meta_value = get_post_meta($id, 'pagebackground', true);
if(!empty($meta_value)) {
update_post_meta($id, 'pagebackground', $pagebackground);
} else {
add_post_meta($id, 'pagebackground', $pagebackground, true);
}
} else {
delete_post_meta($id, 'pagebackground');
}
}
?>