Integrating image upload box in WordPress widget - php

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.

Related

How to Display Image Edit Button on media uploader for non-admin users from frontend in wordpress?

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>

jquery window.send_to_editor.. Can't insert File URL in the text field

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

Adding Wordpress "Add Media" Button to form in own Plugin

I am trying to add my own "Add Media" Button in my own plugin form pages, I created a plugin and I have a form in add-new.php file here is the code:
<div class="wrap">
<h1><?php _e( 'Add Deal', 'webdevs' ); ?></h1>
<form action="" method="post">
<!-- I NEED TO CHANGE THIS TO SHOW "ADD MEDIA BUTTON" -->
<input id="upload_image" type="text" size="36" name="upload_image" value="" />
<input id="upload_image_button" type="button" value="Upload Image" />
<?php wp_nonce_field( 'deal-new' ); ?>
<?php submit_button( __( 'Add Deal', 'webdevs' ), 'primary', 'submit_deal' ); ?>
</form>
How to add the html code and handle it in php
please help
Thnaks
I have created a custom image upload with metabox, you can set below code as per your need.
What you need is to call new WP's thickbox media uploader CSS and JS on your page. you have to modify condition of adding script for plugin page.
Condition to modify if( 'post' !== $typenow ).
What it will do?
It will allow you to open wordpress media uploader and send your selected image url to textbox then you can save the url in post_meta using update_post_meta() or wherever you want to save it. you can get the url from
Supposeable variable :
$content_img = $_POST['content_img'];
Html
<p>
<label><b>Upload Content Image</b></label><br/>
<input class="upload_image" name="content_img" type="text" readonly="readonly" value="<?php echo $content_img ?>"/>
<input type="button" value="Upload" class="button button-primary button-large" onclick="upload_new_img(this)"/>
Remove
</p>
Admin functions.php
// Enqueue script in admin
function my_admin_scripts() {
# Not our screen, bail out
if( 'post.php' !== $hook )
return;
# Not our post type, bail out
global $typenow;
if( 'post' !== $typenow )
return;
wp_enqueue_media('media-upload');
wp_enqueue_media('thickbox');
wp_register_script('my-upload', get_stylesheet_directory_uri().'/js/metabox.js', array('jquery','media-upload','thickbox'));
wp_enqueue_media('my-upload');
}
// Call thickbox CSS
function my_admin_styles() {
wp_enqueue_style('thickbox');
}
add_action('admin_enqueue_scripts', 'my_admin_scripts');
add_action('admin_enqueue_scripts', 'my_admin_styles');
Custom JS metabox.js
function upload_new_img(obj)
{
var file_frame;
var img_name = jQuery(obj).closest('p').find('.upload_image');
if ( file_frame ) {
file_frame.open();
return;
}
file_frame = wp.media.frames.file_frame = wp.media(
{
title: 'Select File',
button: {
text: jQuery( this ).data( 'uploader_button_text' )
},
multiple: false
}
);
file_frame.on('select', function() {
attachment = file_frame.state().get('selection').first().toJSON();
var newwurl = attachment.url.split('/wp-content');
img_name[0].value = '/wp-content'+newwurl[1];
file_frame.close();
// jQuery('.upload_image').val(attachment.url);
});
file_frame.open();
}
function remove_image(obj) {
var img_name;
if (jQuery(obj).closest('p').find('.upload_image').length > 0) {
img_name = jQuery(obj).closest('p').find('.upload_image');
} else {
img_name = jQuery(obj).closest('td').find('.upload_image');
}
if (typeof img_name != "undefined") {
img_name.val('');
}
}

Wordpress media buttons don't work without item attached to?

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;
});
});

Wordpress Custom Image Upload Field

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>

Categories