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>
Related
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
I am developing my first wordpress plugin. It only needs to allow a user to change a logo in a custom template and change a color scheme in the custom template.
I have made an admin options page and now want to add a field to allow a user to upload an image. How can I upload an image to the wp-content/uploads folder. So far, I have this within a table:
<td><input name="logo_image" type="file" id="logo_image" value="" /></td>
Is this the right approach? If so, how do I direct the file to the right folder? Doesn't wordpress have it's own way of handling file uploads?
Add this code to your global custom option function.
if(function_exists( 'wp_enqueue_media' )){
wp_enqueue_media();
}else{
wp_enqueue_style('thickbox');
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
}
<p><strong>Header Logo Image URL:</strong><br />
<img class="header_logo" src="<?php echo get_option('header_logo'); ?>" height="100" width="100"/>
<input class="header_logo_url" type="text" name="header_logo" size="60" value="<?php echo get_option('header_logo'); ?>">
Upload
</p>
<script>
jQuery(document).ready(function($) {
$('.header_logo_upload').click(function(e) {
e.preventDefault();
var custom_uploader = wp.media({
title: 'Custom Image',
button: {
text: 'Upload Image'
},
multiple: false // Set this to true to allow multiple files to be selected
})
.on('select', function() {
var attachment = custom_uploader.state().get('selection').first().toJSON();
$('.header_logo').attr('src', attachment.url);
$('.header_logo_url').val(attachment.url);
})
.open();
});
});
</script>
More info
or
Media uploader in theme and plugin
You can use the inbuilt function of wordpress
<?php wp_handle_upload( $file, $overrides, $time ); ?>
This will automatically move the file to the uploads folder
Or
You can write your own PHP function.
Additional Details can be found here -> Wordpress File Upload
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;
});
});
I've got a basic html/php form, with jquery validation. I want the user to be able to click a link that says "preview", have fancybox load up, and then I'll present a preview of the data, which means combining elements. For instance, the user can choose the background of the iframe. Here is the basics of my form -
<form action="loggedin.php" enctype="multipart/form-data" id="message_form" method="post">
<h4>Who would you like to send a message to?</h4>
<input type="text" size="35" id="recipient" name="recipient" value="Enter Name">
<h4>Choose A Background: </h4>
<input type="radio" value="plain" class="stationery_radio" name="stationery_radio" checked />
<label for="plain">Plain</label>
.....
And this is the info I want in my fancybox:
<a class="fancybox" href="#preview_message">Click Here To Preview Your Form</a>
<div id="preview_message" style="display:none;">
<h2>To: <?php echo ($message_form['recipient']) ?></h2>
.....
But I can't use the POST, as I haven't really submitted the form yet. How can I sent the data to my fancybox where the user can look at it, and either submit the form or return to edit? Thanks for any help.
What I would do is to create another .php file (e.g. preview.php) where you can (pre)submit the form via ajax. This file would basically echo the POST values of your form fields like $_POST['recipient'], etc.
Additionally, within the same file (preview.php) you may have some links to either submit the actual form or close fancybox.
Here is an example of the preview.php file
<?php
function check_input($data){
// sanitize your inputs here
}
$field_01 = check_input($_POST['field_01']);
$field_02 = check_input($_POST['field_02']);
$field_03 = check_input($_POST['field_03']);
// ... etc
?>
<div style="width: 340px;">
<h3>This is the preview of the form</h3><br />
<p>Field 01 : <?php echo $field_01;?></p>
<p>Field 02 : <?php echo $field_02;?></p>
<p>Field 03 : <?php echo $field_03;?></p>
<a class="submit" href="javascript:;">submit</a>
<a class="closeFB" href="javascript:;">back to edit</a>
</div>
notice style="width: 340px;" so fancybox will know what size of box to display (height would be auto)
Then in your main page, add the preview button
<a class="preview" data-fancybox-type="ajax" href="preview.php">Preview</a>
notice the data-fancybox-type="ajax" attribute, which tells fancybox the type of content.
Then the script to submit (preview) the form via ajax :
jQuery(document).ready(function ($) {
$('.preview').on("click", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
cache: false,
url: this.href, // our preview file (preview.php)
data: $("#message_form").serializeArray(), // all the fields in your form (use the form's ID)
success: function (data) {
// show in fancybox the returned data
$.fancybox(data,{
modal : true, // optional (no close button, etc. see docs.)
afterShow: function(){
// bind click to "submit" and "close" buttons inside preview.php
$(".submit, .closeFB").on("click", function(event){
if( $(event.target).is(".submit") ){
$("#message_form").submit(); // submit the actual form
}
$.fancybox.close(); //close fancybox in any case
}); // on click
} // afterShow
}); // fancybox
} // success
}); // ajax
}); // on click
}); // ready
Of course, the DEMO at http://www.picssel.com/playground/jquery/postPreview_05Jun13.html.
NOTES:
this is for fancybox v2.1.4+
.on() requires jQuery v1.7+
You can use Jquery, to get the values, and put them into the fancy box...
A little like this...not quite, but you get the idea...
$('#preview_button').click(function(){
var msg = $('#recipient').val();
var bg = $('input:radio[name=stationary_radio]:checked').val();
$('h2#recipient').html(msg);
//and whatever you wanna do with the value of the bg
//probably apply some CSS on the fly to change the preview background?
$('#fancybox').show();
});
The fancybox show() is likely wrong, never used fancybox, so I dont know, but Im just using a generic, 'hidden div' show. I assume fancybox has its own API that is different, so just substitute...
I have a form with number of input type images. I need to replace the webpage location to url of the image when a user clicks any image.
form is like,
<form action='free.php' id='freeForm' method='post' autocomplete="off">
<?
for($j=1;$j<=5;$j++)
{
?>
<input type="image" src="<?=$img;?>" />
<?
}
?>
</form>
$img and $url values from database.
My jquery is like,
$("#freeForm").submit(function()
{
var Form = { };
Form['inputFree'] = $("#inputFree").val();
Form['freeTOS'] = '1';
$('.anchor-url').click(function(e){
e.preventDefault();
alert($(this).attr('href'));
});
$.post('processFree.php', Form, function(data)
{
if(data == "Success")
{
$("#FreeErrors").html('').hide();
swapToPane('paneSuccess');
return;
}
swapToPane('paneFree');
$("#FreeErrors").html(data).show();
});
return false;
});
Now I am getting 'http://au.yahoo.com' when i click each image. But I want to replace 'http://au.yahoo.com' with URL of each image. How can I pass the PHP variable $url to this form?
Any idea?
Thanks!
This should work, if I understood what you were asking for correctly and though I haven't tried it. Basically you bind the click event to each image, and on click it replaces the window location with the value in the src attribute of the input element being clicked on.
$('input[type=image]').click(function(e){
e.preventDefault();
window.location.replace($(this).attr('src'));
});
EDIT
First you should add a class name to your anchor elements:
<form action='free.php' id='freeForm' method='post' autocomplete="off">
<?
for($j=1;$j<=5;$j++)
{
?>
<input type="image" src="<?=$img;?>" />
<?
}
?>
</form>
Your JS:
$('.anchor-url').click(function(e){
e.preventDefault();
window.location.replace($(this).attr('href'));
});
Notice how I added a class to the anchor links. This can be named almost anything. This gives you the ability to select for those elements with that classname only with jQuery using the $('.any-classname') selector.