How to access my uploaded images via Wordpress Media Uploader? - php

Question

It is my first time trying to use Wordpress Media Uploader inside my theme but I am having difficulties accessing my uploaded images. Here is the problem: I can upload my images but I don't know how to retrieve them. For example when i click my upload button it uploads my image but my textfield is blank (it should display path to my uploaded image) so I can use it inside my theme like so :<?php echo $options['body_background'];?>
My functions inside options-page.php look's like this:
//Heading Text (works fine and i can echo value out...)
function text_heading_setting(){
$options = get_option('plugin_options');
$get_options = $options['text_heading'];
echo '<input type="text" name="plugin_options[text_heading]" value="'.$get_options.'" >';
}
//Menu Image upload field (can upload image but can't echo its path)
function body_background_setting(){
$options = get_option('plugin_options');
$get_options_menu = $options['menu_background'];
echo '<div class="uploader">
<input type="text" name="plugin_options[menu_background]" id="menu_image_bg" value="'.$get_options_menu.'" />
<input class="button" name="_unique_name_button" id="_unique_name_button" value="Upload" />
</div>';
}
//Body Image upload field (can upload image but can't echo its path)
function body_background_setting(){
$options = get_option('plugin_options');
$get_options_body_bg = $options['body_background'];
echo '<div class="uploader">
<input type="text" name="plugin_options[body_background]" id="menu_image_bg" value="'.$get_options_body_bg.'" />
<input class="button" name="_unique_name_button" id="_unique_name_button" value="Upload" />
</div>';
}
Uploader js looks like this:
jQuery(document).ready(function($){
var _custom_media = true,
_orig_send_attachment = wp.media.editor.send.attachment;
$('.button').click(function(e) {
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = $(this);
var id = button.attr('id').replace('_button', '');
_custom_media = true;
wp.media.editor.send.attachment = function(props, attachment){
if ( _custom_media ) {
$("#"+id).val(attachment.url);
} else {
return _orig_send_attachment.apply( this, [props, attachment] );
};
}
wp.media.editor.open(button);
return false;
});
$('.add_media').on('click', function(){
_custom_media = false;
});
});
Screenshot of my problem:
http://vasinternetposao.com/wordpressdevelopment/imgupload.png
Can someone help me out so I can access my uploaded images?

Answer 1

try adding esc_url() to the value
//Menu Image upload field (can upload image but can't echo its path)
function body_background_setting(){
$options = get_option('plugin_options');
$get_options_menu = $options['menu_background'];
echo '<div class="uploader">
<input type="text" name="plugin_options[menu_background]" id="menu_image_bg" value="'.esc_url($get_options_menu).'" />
<input class="button" name="_unique_name_button" id="_unique_name_button" value="Upload" />
</div>';
}
//Body Image upload field (can upload image but can't echo its path)
function body_background_setting(){
$options = get_option('plugin_options');
$get_options_body_bg = $options['body_background'];
echo '<div class="uploader">
<input type="text" name="plugin_options[body_background]" id="menu_image_bg" value="'.esc_url($get_options_body_bg).'" />
<input class="button" name="_unique_name_button" id="_unique_name_button" value="Upload" />
</div>';
}