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! :)
Related
I'm creating a new field type with the Adavanced Custom Fields, which enables the user to choose an image from the Image Library and define a point (X,Y coordinates) in this image. After defining the coordinates, the user can place an overlay video in this point. But my question is, how do I Get and Set an X and Y value in the database with the javascript API?
Okay, so #ObmerKronen suggested that I posted some code to demostrate what I'm trying to do ... makes sense:)
I've added the image in the new ACF field php file (class-tas-v5.php)
$imgID = get_field('image_url');
$img = wp_get_attachment_image( $imgID, "full", "", array( "class" => "overlay-point-img" ) );
echo '<div class="overlay-point-img-container">' . $img . '</div>';
Then I'm defining the X and Y coordinates in the input.js file
function initialize_field($field) {
var overlay_point_container = $field.context;
var img = $(overlay_point_container).find(".overlay-point-img-container");
var circle = '<div class="overlay-point-circle"></div>';
img.prepend(circle);
$(img).on("mousemove", function(event) {
var relX = event.pageX - $(this).offset().left;
var relY = event.pageY - $(this).offset().top;
$(circle).css({ left: relX, top: relY });
});
// Tried these two functions, but none of the values are saved in the database
// acf.set("posX", "123");
// $field.val("posX");
}
I've tried to save it with dummy data like this
acf.set("posX", "123");
$field.val("posX");
I'm trying to get the field data from form textarea so i can store it when a user filling the textarea if he reload page or open an other page in same tab and come back to write data his previous work will be there
My code is
session_start();
$_SESSION['textarea-133'] = $_POST["textarea-133"];
?>
<script>
var a="<php echo $_SESSION['textarea-133']";
document.getElementById("business_a6").value =a ;
</script>
You could use window.sessionStorage to save a variable and check if it's there each time the page is loaded.
window.onload = function(){
var userText = sessionStorage.getItem('the_user_text');
if( userText ){
document.getElementById('the-text-area').innerHTML = userText;
}
};
It's up to you if you want to re-save the variable with each keypress or maybe after a setInterval
document.addEventListener('keypress', (event) => {
var newText = document.getElementById('the-text-area');
sessionStorage.setItem('the_user_text', newText);
});
I'm using the following to load posts into a index page of a wordpress site. The problem is when it gets to the last page and there are no more posts to load. Its just keeps reloading the last page.
Any ideas of how I might stop this from happening? Thanks.
var $content = '#content';
var $nav_wrap = '.navigation';
var $anchor = '.navigation a.next';
var $text = 'Load More';
var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts
$($nav_wrap).html('<a id="almc-load-more" href="' + $next_href + '">' + $text + '</a>');
$('#almc-load-more').click(function(e) {
e.preventDefault();
$.get($(this).attr('href'), '', function(data) {
var $timestamp = new Date().getTime();
var $new_content = $($content, data).wrapInner('<div class="almc-loaded" id="almc-' + $timestamp + '" />').html(); // Grab just the content
$next_href = $($anchor, data).attr('href'); // Get the new href
$('html,body').animate({scrollTop: $($nav_wrap).position().top}, 'slow'); // Animate scroll
$($nav_wrap).before($new_content); // Append the new content
$('#almc-' + $timestamp).hide().fadeIn('slow'); // Animate load
$('#almc-load-more').attr('href', $next_href); // Change the next URL
$('.almc-loaded ' + $nav_wrap).remove(); // Remove the original navigation
});
});
Above code taken from here: http://kaspars.net/blog/wordpress/jquery-script-for-loading-more-posts
You could add some code to check if the new href is different than the current href, and then only try to add a new post if they're different. Then, if they aren't, you could have a message saying there are no more posts.
var lastLink;
$('#almc-load-more').click(function(e) {
if ( $anchor == $('.navigation a.next').last() ) {
lastLink = 1;
}
if (lastLink == 1) {return} else {
...
}
...
After the comment from Mr. Mayers (Thanks) I gave up on the code and used this tutorial:
http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/
Has / does everything I needed.
I have this following requirement. Need to display the html Body of the Mime message in IFrame
View
<iframe id="myIframe1" src="http://localhost:23245/Home/GetMimeMessageContent?FilePath=D \MimeFiles/htmlBody-small1.eml&PartName=HtmlBody" style="width:600px;height:600px;" >
Controller
public ActionResult GetMimeMessageContent(string filePath,string partName)
{
var mimeModel = BuildMimeModel(filePath, partName);
MimeHeaderModel mimeHeadermodel = new MimeHeaderModel();
mimeHeadermodel.FromAddress = mimeHeadermodel.ToAddress = mimeHeadermodel.Subject = string.Empty;
mimeModel.MimeHeader = mimeHeadermodel;
return View("MailDetailsView", mimeModel.MimeBody.HtmlBody);
}
it's not showing the HtmlBody in the Iframe. But Its calling the controller. I dont know what I am missing.
Not sure if your using jquery or not, but:
$(function() {
var $frame = $('<iframe style="width:200px; height:100px;">');
$('body').html( $frame );
setTimeout( function() {
$.ajax(
url="/Home/GetMimeMessageType/small1.eml/HtmlBody",
type:'GET',
success: function(data){
var doc = $frame[0].contentWindow.document;
var $body = $('body',doc);
$body.html(data);
}
);
},1 );
});
I have not tested the above code, but this should work fine. A few things to note:
You will need to create a custom Route to map this to your controller:
http://msdn.microsoft.com/en-us/library/cc668201(v=vs.100).aspx
You will also need to change the javascript $('body').html() to be the ID of a div as a placeholder
also you will notice i have no path, if this never changes, you should add the path to your code or you can use formcollection and change the jquery ajax to a post, and set the variables and values there.
Your content will then up up in an iframe.
Forget the whole html.renderaction, this solution gives you a little more scope
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