I'm using the Wordpress Thickbox to try and retrun the value of the images that a user wants to select (when they click 'Insert into Post'), but the Thickbox is not closing, just showing as any empty white box.
The field $('#office-image input#image') exists, and Firebug is not reporitng any errors.
I'm not sure why this is not working, so any help is appriciated. Thanks.
window.send_to_editor = function(html){
var image_url = $('img', html).attr('src');
$('#office-image input#image').val(image_url);
tb_remove();
}
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function (html) {
var fileInput = jQuery(fileInput_id);
if (fileInput) {
fileurl = jQuery('img', html).attr('src');
jQuery(fileInput).val(fileurl);
tb_remove();
} else {
window.original_send_to_editor(html);
}
};
I am using above script for that and its working fine
Related
I'm making a holiday blessing generator for client.
The final output goes to a div with an id="BRHBresults".
From that div I'm making a canvas and converting it to image,
I've managed to make the onclick function to download the image(just to make sure the result was correct), however what I need the onclick to do is,
upload the image to wordpress library and make a new post with this image as post_thumbnail.
I get an error:
"414 (Request-URI Too Large)"
So far I have come up with this:
Link to the page: [http://www.benedict.co.il/%D7%9E%D7%97%D7%95%D7%9C%D7%9C-%D7%91%D7%A8%D7%9B%D7%95%D7%AA/
]
Javascript/JQuery
$(".BRHshareToFB1").click(function(){
html2canvas([document.getElementById('BRHBresults')], {
onrendered: function (canvas) {
var data = canvas.toDataURL('image/png');
var image = new Image();
image.src = data;
var alink = data ;
//$('.BRHshareToFB2').attr('href', alink);
//$('.BRHshareToFB2').attr('download', 'filename.jpg');
//dataUrl = canvas.toDataURL("image/png");
alink = data.replace(/^data:image\/(png|jpg);base64,/, "");
$.post("/send.php?data="+alink);
}
});
});
PHP from send.php file
<?php
$dir = getcwd();
$now = date("U");
$imgstring = $_POST['data'];
$imgstring = base64_decode($imgstring);
file_put_contents("$dir/wp-content/uploads/blessing-$now.png", $imgstring);
?>
What am I missing? Please help! :)
From a xul-based firefox addon, I need to:
programmatically create an invisible iframe (once)
reuse it to load multiple URLs as the addon runs
access the returned HTML after each URL loads
Problem: I can only get the first page-load for any created iframe to trigger an 'onload' or 'DOMContentLoaded' event. For subsequent URLs, there is no event triggered.
Note: I'm also fine with using the hiddenDOMWindow itself if this is possible...
Code:
var urls = ['http://en.wikipedia.org/wiki/Internet', 'http://en.wikipedia.org/wiki/IPv4', 'http://en.wikipedia.org/wiki/Multicast' ];
visitPage(urls.pop());
function visitPage(url) {
var XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
var hiddenWindow = Components.classes["#mozilla.org/appshell/appShellService;1"].getService
(Components.interfaces.nsIAppShellService).hiddenDOMWindow;
var doc = hiddenWindow.document, iframe = doc.getElementById("my-iframe");
if (!iframe)
{
iframe = doc.createElement("iframe");
//OR: iframe = doc.createElementNS(XUL_NS,"iframe");
iframe.setAttribute("id", "my-iframe");
iframe.setAttribute('style', 'display: none');
iframe.addEventListener("DOMContentLoaded", function (e) {
dump('DOMContentLoaded: '+e.originalTarget.location.href);
visitPage(urls.pop());
});
doc.documentElement.appendChild(iframe);
}
iframe.src = url;
}
There are some traps:
The hiddenWindow differs between platforms. It is XUL on Mac, and HTML else.
You should use .setAttribute("src", url); to reliably navigate.
The following works for me (Mac, Win7):
var urls = [
'http://en.wikipedia.org/wiki/Internet',
'http://en.wikipedia.org/wiki/IPv4',
'http://en.wikipedia.org/wiki/Multicast'
];
var hiddenWindow = Components.classes["#mozilla.org/appshell/appShellService;1"].
getService(Components.interfaces.nsIAppShellService).
hiddenDOMWindow;
function visitPage(url) {
var iframe = hiddenWindow.document.getElementById("my-iframe");
if (!iframe) {
// Always use html. The hidden window might be XUL (Mac)
// or just html (other platforms).
iframe = hiddenWindow.document.
createElementNS("http://www.w3.org/1999/xhtml", "iframe");
iframe.setAttribute("id", "my-iframe");
iframe.addEventListener("DOMContentLoaded", function (e) {
console.log("DOMContentLoaded: " +
e.originalTarget.location);
var u = urls.pop();
// Make sure there actually was something left to load.
if (u) {
visitPage(u);
}
});
hiddenWindow.document.documentElement.appendChild(iframe);
}
// Use .setAttribute() to reliably navigate the iframe.
iframe.setAttribute("src", url);
}
visitPage(urls.pop());
Don't reload the hiddenWindow itself, or you will break lots of other code.
I'm trying to build an admin settings page that will allow users to upload an image for their logo. I'm using this tutorial: http://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/
I've changed it to add the scripts to enqueue rather than print as is now best practice. My code is as follows:
function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', get_stylesheet_directory_uri().'/bigg-options.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}
function my_admin_styles() {
wp_enqueue_style('thickbox');
}
if (isset($_GET['page']) && $_GET['page'] == 'bigg_options') {
add_action('admin_enqueue_scripts', 'my_admin_scripts');
add_action('admin_enqueue_styles', 'my_admin_styles');
}
And the Javascript:
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');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image').val(imgurl);
tb_remove();
}
});
It works, and the media upload window opens. But instead of it being a thickbox popup in the middle of the screen, as is normal, it appears at the bottom of the page, off to the left and partially obscured. Here's a screen shot of where it goes:
Any ideas on why it is doing this, and how to get it to position properly?
Use &modal=true in your tb_show():
tb_show('', 'media-upload.php?type=image&modal=true');
I believe you'll also need to add in a width and height.
For images uploaded using WordPress' media uploader, there is an "Insert Into Post" button that sends a shortcode to the editor for that image.
I have a text input that, when focused, I'd like the media uploader to appear so that the user can select an image and send the file URL to the text input.
The main issue I'm having is creating the additional "Insert Into Post" button that sends the file URL to the appropriate text field.
Which hook do I use for that and how can I get the file URL data returned to the input field?
Your guidance is appreciated!
What you've described is the older Wordpress way of doing it... If you want to use the new uploader in Wordpress 3.5+, you can create a wp.media object to upload it, similar to the code in wp-admin/js/custom-background.js:
// Create the media frame.
frame = wp.media.frames.customBackground = wp.media({
// Set the title of the modal.
title: $el.data('choose'),
// Tell the modal to show only images.
library: {
type: 'image'
},
// Customize the submit button.
button: {
// Set the text of the button.
text: $el.data('update'),
// Tell the button not to close the modal, since we're
// going to refresh the page when the image is selected.
close: false
}
});
// When an image is selected, run a callback.
frame.on( 'select', function() {
// Grab the selected attachment.
var attachment = frame.state().get('selection').first();
// Run an AJAX request to set the background image.
$.post( ajaxurl, {
action: 'set-background-image',
attachment_id: attachment.id,
size: 'full'
}).done( function() {
// When the request completes, reload the window.
window.location.reload();
});
});
// Finally, open the modal.
frame.open();
the frame.on('select' function(){ code is run when a file is chosen.
A litter further searching and I was able to find some good sources explaining how to do this. I went for a JavaScript, PHP mix:
JavaScript
$j('input').live('focusin',function(){
var target = '#'+$j(this).attr('id');
tb_show('','media-upload.php?post_id=[post_id]&tab=gallery&context=choose&TB_iframe=1');
window.send_to_editor = function(html) {
fileurl = $j(html).attr('href');
$j(target).val(fileurl);
tb_remove();
};
});
source: http://jaspreetchahal.org/wordpress-using-media-uploader-in-your-plugin/
PHP
/* Customize button */
function media_uploader_btn($form_fields, $post) {
$send = "<input type='submit' class='button' name='send[$post->ID]' value='" . esc_attr__( 'Choose This File' ) . "' />";
$form_fields['buttons'] = array('tr' => "\t\t<tr class='submit'><td></td><td class='savesend'>$send</td></tr>\n");
$form_fields['context'] = array( 'input' => 'hidden', 'value' => 'choose' );
return $form_fields;
}
/* Check for button context */
function check_upload_image_context($context){
if(isset($_REQUEST['context']) && $_REQUEST['context'] == $context){
return true;
} elseif(isset($_POST['attachments']) && is_array($_POST['attachments'])){
/* check for context in attachment objects */
$image_data = current($_POST['attachments']);
if (isset($image_data['context']) && $image_data['context'] == $context ){
return true;
}
}
return false;
}
if(check_upload_image_context('choose')){
add_filter('attachment_fields_to_edit', 'media_uploader_btn', 20, 2);
}
source: http://shibashake.com/wordpress-theme/how-to-hook-into-the-media-upload-popup-interface
I am working on contact page where the client can enter the postcode which will take them to google maps for directions to the company, the problem which i am having is although the hyperlink is set to target_blank but still the window opens on the back hand instead of opening in front of the website page. I have no idea why it opens on the back hand and focus is on the current page instead of moving it to google map page
<a href="#" target="_blank">
<img alt="" src="/images/contactUs/directionbtn.png" onclick="return openDirections(1);" /></a>
<script type="text/javascript">
function openDirections(NumVal) {
if (NumVal == 1) {
if (document.getElementById("<%=txtPostcode.ClientID%>").value == "") {
alert("PostCode can not be blank");
document.getElementById("<%=txtPostcode.ClientID%>").focus();
return false;
}
else {
var regPostcode = /^([a-zA-Z]){1}([0-9][0-9]|[0-9]|[a-zA-Z][0-9][a-zA-Z]|[a-zA-Z][0-9][0-9]|[a-zA-Z][0-9]){1}([ ])([0-9][a-zA-z][a-zA-z]){1}$/;
var tempURL = document.getElementById("<%=txtPostcode.ClientID%>").value;
if (regPostcode.test(tempURL) == false) {
alert("Please Enter a Valid PostCode");
document.getElementById("<%=txtPostcode.ClientID%>").focus();
return false;
}
else {
var url = 'http://maps.google.co.uk/maps?saddr={' + $('#<%=txtPostcode.ClientID%>').val() + '}&daddr=&daddr=646+Preston+Rd,+Clayton-le-Woods,+Chorley+PR6+7EH,+United+Kingdom&iwloc=1&dq=Tangent+Design';
document.location = url;
return true;
}
}
}
</script>
Try window.open(url); instead of of document.location = url;
All I see you doing is setting the url of the current window. Maybe try using something like this to open a new window instead.
window.open('url to open',)
in place of document.location = url
Each browser can be configured to handle how new pages are opened. Take a look at the preferences in the browser you are using, and see if that is the behavior that you currently have configured.
I think this is what you are looking for:
var x = window.open(URL, 'name', '...');
x.focus();