I'm currently developing theme settings for my Wordpress theme, i need media buttons in order the user can attach files for the homepage. This files are totally independent.
This medias buttons dont work except when i display a Wordpress editor, can anyone have a solution cleaner than hide the editor with a css hack ?
Thanks in advance!
Personally I did it like this:
in the form
<label for="upload_image" class="upload">
<input id="upload_image" type="text" size="36" name="ad_image" value="<?php echo get_option('ad_image'); ?>" />
<input id="upload_image_button" class="button" type="button" value="Choose Image" />
and then to display the current image selected.
<p><strong>Current Image:</strong>
<?php if (get_option('ad_image')){ echo '<br /><img src="'.get_option('ad_image').'" height="150" width="220"';} else{echo 'None Selected';}?>
</p>
and then enqueue this javascript in the options page
jQuery(document).ready(function($){
var _custom_media = true,
_orig_send_attachment = wp.media.editor.send.attachment;
$('#upload_image_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;
});
});
Related
I am using the wordpress media uploader to upload images from frontend. It's working fine. Now I want to enable images cropping function for this uploader. but I don't know how to display wordpress edit image button on this. Is it possible? Anyone please help me to do this.
My code for media uploder is:
<input type="hidden" value="" class="process_custom_images" id="process_custom_images">
<button class="button button_style set_custom_images"><span><i class="fa fa-upload" aria-hidden="true"></i></span><?php _e( 'Upload Image'); ?></button>
<script>
jQuery(document).ready(function() {
var $ = jQuery;
if ($('.set_custom_images').length > 0) {
if ( typeof wp !== 'undefined' && wp.media && wp.media.editor) {
$(document).on('click', '.set_custom_images', function(e) {
e.preventDefault();
var button = $(this);
var id = button.prev();
wp.media.editor.send.attachment = function(props, attachment) {
id.val(attachment.id);
};
wp.media.editor.open(button);
return false;
});
}
}
});
</script>
I have created a Wordpress file uploader. Its like when i click on add media button it takes me to add media uploader. But when i choose the image it doesn't get inserted into the field. I want whenever i choose an image and click on insert button, image URL should get inserted into the text editor.
var image_field;
jQuery(function($){
$(document).on('click', 'input.select-img', function(evt){
image_field = $(this).siblings('.img');
check_flag=1;
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.send_to_editor = function(html) {
imgurl = $('img', html).attr('src');
image_field.val(imgurl);
tb_remove();
}
return false;
});
});
Include jquery library if you dn't have.
https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
Please include the below jquery code, where you are adding the HTML code.
Jquery:
jQuery(document).ready(function() {
jQuery('#upload_image_button').click(function() {
formfield = jQuery('#upload_image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image').val(imgurl);
tb_remove();
}
return false;
});
HTML:
<tr valign="top">
<td>Upload Menu Icon:</td>
<td><label for="upload_image">
<input id="upload_image" type="text" size="36" name="menu_icon" value="" required="" />
<input id="upload_image_button" type="button" value="Upload Image" />
<br />Enter an URL or upload an image from media.
</label>
</td>
</tr>
Include the below PHP code in your theme function.php file.
PHP:
function wp_gear_manager_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_script('jquery');
}
function wp_gear_manager_admin_styles() {
wp_enqueue_style('thickbox');
}
add_action('admin_print_scripts', 'wp_gear_manager_admin_scripts');
add_action('admin_print_styles', 'wp_gear_manager_admin_styles');
Important Note:
Before click insert button. Please confirm the Image URL is displaying in the text filed. Please see the screenshot
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?
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>';
}
I am working on a small WordPress widget and I am trying to set it up where the user can upload an image. So far, the necessary scripts are loading but when I click the "Media Library Image" button the image uploader doesn't pop up.
Here is my javascript file:
jQuery(document).ready(function($) {
var formfield = null;
$('#upload_image_button').click(function() {
$('html').addClass('Image');
formfield = $('#wp-ss-image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
// user inserts file into post. only run custom if user started process using the above process
// window.send_to_editor(html) is how wp would normally handle the received data
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function(html){
var fileurl;
if (formfield != null) {
fileurl = $('img',html).attr('src');
$('#wp-ss-image').val(fileurl);
tb_remove();
$('html').removeClass('Image');
formfield = null;
} else {
window.original_send_to_editor(html);
}
};
});
Here is are my functions to call the scripts:
add_action('admin_print_scripts-widgets.php', 'wp_ss_image_admin_scripts');
function wp_ss_image_admin_scripts() {
wp_enqueue_script( 'wp-ss-image-upload', plugins_url( '/WP-Simple-Social/wp-simple-social-image.js' ), array( 'jquery','media-upload','thickbox' ) );
}
add_action('admin_print_styles-widgets.php', 'wp_ss_admin_styles');
function wp_ss_admin_styles() {
wp_enqueue_style( 'thickbox' );
}
And here is the html to display the input box and image upload button:
<p>Upload Photo: <input id="wp-ss-image" class="widefat" type="text" size="75" name="<?php echo $this->get_field_name( 'image' ); ?>" value="<?php echo esc_url( $image ); ?>" />
<input id="upload_image_button" type="button" value="Media Library Image" class="button-secondary" />
Since all of the necessary files/scripts are loading, could this be a jQuery problem?
If there is any other additional info that would help out please let me know. Thanks for the help.
Best way I found was using live() method even if it deprecated to on() profit.
Worked
jQuery(document).ready(function($) {
$("#testage").live("click", function() {
alert("CLICK!");
});
});
Didn't work
jQuery(document).ready(function($) {
$("#testage").on("click", function() {
alert("CLICK!");
});
});
If anybody has an explication I would be grateful.
I am currently developing a WordPress site which needs a custom content add/edit module. I am looking for an image upload option in wordpress, for eg. in my form there is an input field titled 'Choose Image', when the user clicks on the input field, i want the wordpress media gallery to popup and be able to choose an image from the gallery. and once the user selects an image, the full url to the image will be filled in the input field. I am sure this can be done because i have once found a code for this, but i forgot where i found it. Please help everybody
Thanks in Advance..
Here is code that will do this:
jQuery(document).ready(function() {
var orig_send_to_editor = window.send_to_editor;
jQuery('#upload_image_button').click(function() {
formfield = jQuery(this).prev('input');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.send_to_editor = function(html) {
var regex = /src="(.+?)"/;
var rslt =html.match(regex);
var imgurl = rslt[1];
formfield.val(imgurl);
tb_remove();
jQuery('#show_'+formfield.attr('name')).html('<img src="'+imgurl+'" width="" />')
window.send_to_editor = orig_send_to_editor;
}
return false;
});
});
Here is the HTML to go with it:
<input type="hidden" name="upload_image" />
<?php $post_img = get_post_meta($post->ID,'item_image',true); ?>
<input id="upload_image_button" type="button" value="<?php echo (empty($post_img)?'Upload Image':'Change Image') ?>" />
<div id="show_upload_image"><?php echo (!empty($post_img)?"<img src='$post_img' width='100' />":'')?></div>