I am using embedly, it is working properly but the problem is for some video it gives error- not a valid key.I know we have to register on their site and pay some money for key but, I dont want to do that.Is there any other solution to get embed code for a video so that I can put on my code other than embedly.If yes please help me on this or if possible please provide some example to do this .The code for a key is given below.
$pro = new Embedly_API(array(
'key' => 'xxxxxxxxxxxxxxxx', //need a pro key for this
'user_agent' => 'Mozilla/5.0 (compatible; mytestapp/1.0)'
));
Thanks in advance.
You don't need to pay any money for light usage.
You should try scrolling down on the pricing page: http://embed.ly/pricing
Then select the free option.
I have build the coding for your script for your problem.,please find the below one and make use of it as per your needs.
<!DOCTYPE>
<html>
<head>
<title>Page Title</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
/*
* Embedly JQuery v2.2.0
* ==============
* This library allows you to easily embed objects on any page.
*/
(function(a){window.embedlyURLre=/(http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/;a.embedly=a.embedly||{};if(a.embedly.version){return}a.extend({embedly:function(k,q,n){var c=[];var p="http://api.embed.ly/";var d;q=q?q:{};d=a.extend({},a.embedly.defaults,q);if(!d.urlRe){d.urlRe=window.embedlyURLre}if(typeof k==="string"){k=new Array(k)}if(typeof n!=="undefined"){d.success=n}if(d.secure){p="https://api.embed.ly/"}if(!d.success){d.success=function(i,t){var r,s=a(t.node);if(!(i)){return null}if((r=d.method)==="replace"){return s.replaceWith(i.code)}else{if(r==="after"){return s.after(i.code)}else{if(r==="afterParent"){return s.parent().after(i.code)}else{if(r==="replaceParent"){return s.parent().replaceWith(i.code)}}}}}}if(!d.error){d.error=function(i,r){}}var m=function(i){return d.urlRe.test(i)};var o=function(r){var i="urls="+r;if(d.maxWidth){i+="&maxwidth="+d.maxWidth}else{if(typeof dimensions!=="undefined"){i+="&maxwidth="+dimensions.width}}if(d.maxHeight){i+="&maxheight="+d.maxHeight}if(d.chars){i+="&chars="+d.chars}if(d.words){i+="&words="+d.words}if(d.secure){i+="&secure=true"}if(d.frame){i+="&frame=true"}i+="&wmode="+d.wmode;if(typeof d.autoplay==="string"||typeof d.autoplay==="boolean"){i+="&autoplay="+d.autoplay}if(d.width){i+="&width="+d.width}return i};var j=function(){if(typeof d.autoplay==="string"){if(d.endpoint.search(/objectify/i)>=0){return p+"2/objectify"}else{if(d.endpoint.search(/preview/i)>=0){return p+"1/preview"}}}return p+"1/oembed"};var b=function(){var i=[];if(d.addImageStyles){if(d.maxWidth){units=isNaN(parseInt(d.maxWidth,10))?"":"px";i.push("max-width: "+(d.maxWidth)+units)}if(d.maxHeight){units=isNaN(parseInt(d.maxHeight,10))?"":"px";i.push("max-height: "+(d.maxHeight)+units)}}return i.join(";")};var g=function(v,t){if(d.endpoint!=="oembed"){return d.success(v,t)}var w,s,r,y,u,i,x,z;if((w=v.type)==="photo"){y=v.title||"";s="'+v.description+"</div>":"";x=v.provider_name?"<a href='"+v.provider_url+"' class='provider'>"+v.provider_name+"":"";s=i+"<a href='"+t.url+"'>"+y+"</a>";s+=x;s+=z}}}if(d.wrapElement&&d.wrapElement==="div"&&a.browser.msie&&a.browser.version<9){d.wrapElement="span"}if(d.wrapElement){s="<"+d.wrapElement+' class="'+d.className+'">'+s+"</"+d.wrapElement+">"}v.code=s;if(typeof t.node!=="undefined"){a(t.node).data("oembed",v).trigger("embedly-oembed",[v])}return d.success(v,t)};var e=function(i){var t,v,u,s,r;u=a.map(i,function(x,w){if(w===0){if(x.node!==null){r=a(x.node);s={width:r.parent().width(),height:r.parent().height()}}}return encodeURIComponent(x.url)}).join(",");a.ajax({url:j(),dataType:"jsonp",data:o(u),success:function(w){return a.each(w,function(x,y){return y.type!=="error"?g(y,i[x]):d.error(i[x].node,y)})}})};a.each(k,function(s,r){var u=typeof d.elems!=="undefined"?d.elems[s]:null;if(typeof u!=="undefined"&&!m(r)){a(u).data("oembed",false)}var t={url:r,error_code:400,error_message:"HTTP 400: Bad Request",type:"error"};return(r&&m(r))?c.push({url:r,node:u}):d.error(u,t)});var l=[];var h=c.length;for(var f=0;(0<=h?f<h:f>h);f+=20){l=l.concat(e(c.slice(f,f+20)))}if(d.elems){return d.elems}else{return this}}});a.embedly.version="2.2.0";a.embedly.defaults={endpoint:"oembed",secure:false,frame:false,wmode:"opaque",method:"replace",addImageStyles:true,wrapElement:"div",className:"embed",elems:[]};a.fn.embedly=function(d,g){var e=typeof d!=="undefined"?d:{};if(typeof g!=="undefined"){d.success=g}var f=new Array();var c=new Array();this.each(function(){if(typeof a(this).attr("href")!=="undefined"){f.push(a(this).attr("href"));c.push(a(this))}else{a(this).find("a").each(function(){f.push(a(this).attr("href"));c.push(a(this))})}e.elems=c});var b=a.embedly(f,e);return this}})(jQuery);
</script>
<script type="text/javascript">
$('document').ready(function(){
$('div.content').embedly({
maxWidth: 450,
wmode: 'transparent',
method: 'after'
});
});
</script>
</head>
<body>
<div class="content">
<article>
<h2>Title</h2>
<p>Lorizzle ma nizzle dolor sit amizzle, brizzle adipiscing elit. </p>
youtube
<p>Maecenizzle owned bow wow wow. Nam eros.</p>
</article>
<article>
<h2>Title 2</h2>
<p>Lorizzle ma nizzle dolor sit amizzle, brizzle adipiscing elit. </p>
flickr
<p>Maecenizzle owned bow wow wow. Nam eros.</p>
</article>
</div>
</body>
</html>
It's working fine.,test it and use it as per your wish.
Related
I have some html file like
<!DOCTYPE html>
<html lang="en">
<!-- article TEXTS BLOCK -->
<section id="text-article-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section id="text-article-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section id="text-article-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
</html>
And I have about 20 php files like
<? require $_SERVER['DOCUMENT_ROOT'] ."/block/lib.php";?>
<? require $_SERVER['DOCUMENT_ROOT'] ."/block/rules.php";?>
<!DOCTYPE html>
<head>
<!-- HEAD -->
<? require $_SERVER['DOCUMENT_ROOT'] ."/block/head/meta.php";?>
<!-- END HEAD -->
</head>
<body>
<section id = "article-1">
<? require $_SERVER['DOCUMENT_ROOT'] ."/content/gallery-1.php";?>
<!-- PLACE FOR ARTICLES 1 -->
</section>
</body>
</html>
And I want to extract sections with different articles from my html-file and paste it to different php files. So I need something like INCLUDE but not all file but just section with needed ID.
Don't have enough knowledge to think up some solution...
Write your codes in one Php file and include that file into your other files by using inculde 'filename.php' like this.
<?php include 'filename.php' ?>
You could use jQuery and do the following
Add a div with id=sectionContainer
use $("#sectionContainer").load("htmlfile.html #text-article-<?= $id ?>")
which will load the div with the section with id=text-article-1 if the php $id is 1 etc
You can use CSS and hide all sections and show relevant id
section { display: none }
#text-article-<?= $id ?> { display:block }
which will only show the section with id=text-article-1 if the php $id is 1 etc
Capture the image in the background and save it in a folder in PHP.
I have created a PHP page in which we capture the image of an HTML using html2canvas() and via ajax save that image in a folder.
When I run the code from the browser it shows an HTML and saves the image in a given folder. (Here it is working fine).
The issue is when I run the same file using cmd like via PHP cmd or via CRON (php test.php) then that is not generating an image just render HTML in the terminal.
How I run the same code in the background and save in the generated image in a folder?
test.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button type="button" id="capture">Capture & Save</button>
<div class="parent-wrapper">
<div class="wrapper-box" id="canvas" width="1080" height="1080">
<div class="heading">
Lorem Ipsum
</div>
<div class="sub-heading">
Lorem ipsum , Lorem
</div>
<div class="paragraph">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="bottom-heading">
#Lorem
</div>
</div>
</div>
<script type="text/javascript">
function truncate(source, size) {
return source.length > size ? source.slice(0, size - 1) + "..." : source;
}
var para = document.querySelector('.paragraph');
var res = truncate(para.innerHTML, 280);
para.innerHTML = res;
</script>
<script src="jquery-3.5.1.min.js"></script>
<script src="html2canvas.min.js"></script>
<script type="text/javascript">
$(function(){
$('.movable_div').on('contextmenu', function(){
return false;
});
$('#capture').click(function(){
div_content = document.querySelector("#canvas");
html2canvas(div_content, {
dpi: 96,
width: 1080,
height: 1080,
}).then(canvas => {
data = canvas.toDataURL('image/jpeg', 1);
save_img(data);
});
});
// Onload Click capture
$('#capture').click();
});
//to save the canvas image
function save_img(data){
//ajax method.
$.post('save_jpg1.php', {data: data}, function(res){
});
}
</script>
</body>
</html>
save_jpg1.php
<?php
//just a random name for the image file
$random = rand(100, 1000);
$savefile = #file_put_contents("output/$random.jpg", base64_decode(explode(",", $_POST['data'])[1]));
//if the file saved properly, print the file name
if($savefile){
echo $random;
}
?>
Thanks in advance.
Tried below code also but not work for me:
setTimeout(function(){
div_content = document.querySelector("#canvas");
html2canvas(div_content, {
dpi: 96,
width: 1080,
height: 1080,
}).then(canvas => {
data = canvas.toDataURL('image/jpeg', 1);
save_img(data);
});
}, 5000);
You can achieve this by using below library.
Source: https://github.com/stil/gd-text
Wrote the script in PHP and run via terminal to create image in background.
The terminal doesn't know how to render an html file like a browser does - the terminal will simply output the html as a text file. I think there may be a way to programmatically trigger such a rendering, and you could update the javascript to trigger the html2canvas when the page loads rather than after a click. In that way, you could trigger it from the command line, it would render, and fire the save function with the image.
Looks like this might have some ideas for how to run an html file from the terminal:
How can I run a html file from terminal?
Specifically, you may want to try serving the html file locally, and triggering a browser view
I was wondering how can I provide a custom classes for example to <img> and <a>?
I need to add some bootstrap classes to both of those elements for when user creates a page it will automatically add bootstrap classes.
Here is the HTML code that is rendered upon creating a new page in WordPress
<article id="post-18" class="post-18 page type-page status-publish hentry">
<p>Lorem ipsum dolor sit amet...</p>
<p>
<img class="alignnone size-medium" src="https://placehold.it/250x250" width="250" height="250"></p>
<p>Lorem Ipsum</p>
<p>Morbi lacinia...</p>
<p>Nullam commodo...</p>
<p>Maecenas rutrum...</p>
</article>
How do I make it to look like this? Take note on <img> and the second <a> child in this HTML code sample. I've added a <div> before <img> (This is how I want it to be)
<article id="post-18" class="post-18 page type-page status-publish hentry">
<p>Lorem ipsum dolor sit amet....</p>
<div class="col-lg-4 col-xs-12">
<p><img class="alignnone size-medium img-responsive" src="https://placehold.it/250x250" width="250" height="250">
</p>
</div>
<p>Lorem Ipsum</p>
<p>Morbi lacinia...</p>
<p>Nullam commodo...</p>
<p>Maecenas rutrum...</p>
</article>
I'm using a template called HTML5 Blank WordPress Theme link
For images, you can do this
function custom_class($class){
$class .= ' additional-class'; // Concatenate custom class with the existing class.
return $class;
}
add_filter('get_image_tag_class','custom_class');
Reference is here. I use this method when I used bootstrap for WordPress themes.
For links, you can do this with javascript/jquery but it is not reliable because it will add class to all the anchor tag.
Javascript Approach
var a = document.getElementsByTagName('a');
a.classList.add('btn btn-primary');
Jquery approach
$('a').addClass('btn btn-primary');
Please let me know if you found any issue.
I am trying to include a small navigation template file into a page in wordpress so I dont need to change it in a bunch of pages.
here is my code:
<div id="content_top" class="whiteBG">
<div class="container">
<div class="row">
<div class="col-sm-12">
<?php get_template_part( 'subnav' ); ?>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium itaque dolores labore, illo nam. Aut voluptatum dicta sed sint rerum dignissimos vitae. Repellendus, harum tempora rem fugit.
</div>
</div>
</div>
</div>
The code I am trying to include is this
<ul>
<li>button</li>
<li>button</li>
<li>button</li>
<li>button</li>
</ul>
The get_template_part() function scans your theme and child theme directories for the file.
You used it properly:
<?php get_template_part( 'subnav' ); ?>
That will look for subnav.php in your themes directory.
Since you used it properly, then maybe subnav.php doesn't exist in the themes root directory, or something else is going on.
The main function is the one you used, get_template_part(). You can also include things normally, depending on where it's used, using require_once() or file_get_contents().
<?php require_once('path/to/file.php'); ?>
<?php echo file_get_contents('path/to/file.html'); ?>
Require will allow you to pass php variables. If you use file get contents, it grabs the contents or code.
I have 3 web pages with the same code within a website. I am having success with 2 of my 3 pages. The ckeditor instances update as expected.
I have finally figured out "what the issue is", BUT still don't know how to fix it. It seems that if I type only one line of code and click out of the div (ie. blur event happens) it saves as is expected. If I hit a hard return and type other text the blur event won't save ANYTHING after the hard return. Seems to be a bug in this version of CKEDITOR. As I mentioned, I have 2 other pages with exactly the same code and everything works just fine.
<?php
session_start();
$thisPage = "services";
require('functions.php');
include('header.htm');
?>
<title>Services | Dr. Your Name</title>
<style type="text/javascript">
#cke_body {margin-left:120px;margin-top:30px;width:520px;background-color:gray;}
</style>
<script type="text/javascript">
CKEDITOR.config.filebrowserBrowseUrl= 'browser/browseAdminUploads.php';
CKEDITOR.config.extraPlugins = 'justify';
</script>
</head>
<body>
<div id="header" class="clear">
<div id="headerContent">
<?php include ("bannerIcons.php"); ?>
<div id="logo">
<img src="images/logo.png" title="home" alt=""/>
</div> <!--end logo-->
<?php include('mainMenu.php');?>
</div>
</div> <!--end header-->
<div id="container">
<div id="content" class="shadow"><div class="content">
<div id="colLt"><div class="content">
<?php
connect();
$sql = mysql_query("SELECT services FROM contentAreas") or die("nothing found");
$row = mysql_fetch_assoc($sql);
if ($_SESSION['username']=='admin'){
echo "<div id='services' contenteditable='true' onblur='saveServices()'>";
} else {
echo "<div id='services'>";
}
echo $row['services'];
echo "</div>";?>
<script type="text/javascript">
function saveServices() {
var data = CKEDITOR.instances.services.getData();
$.post('saveServices.php', {services:data})
}
</script>
</div></div>
<?php include('saveServices.php');?>
<div id="colRt"><div class="content">
<div id="serviceBox" class="shadow"><div class="content">
<p class="big italTxt">one or more testimonials could go here. Lorem ipsum dolor sit amet, mel cu atqui perfecto, nec te vero fugit denique, an vel mundi tritani concludaturque.<br><br>Laoreet erroribus eos no. Eu nec maluisset repudiandae. Possit lucilius constituam his cu, quas liber sea an, eum purto errem audire eu. In viris assentior vis, pri iudico dolorem electram ne, ea ius scripta virtute.</p>
</div></div>
</div></div><!--end colRt-->
</div></div><!--end content-->
<div id="footer">
<?php include("footer.htm") ?>
</div><!--end footer-->
<div class="clear"></div>
</div><!--end container-->
<div class="clear"></div>
</body>
</html>
My file saveServices.php is as follows:
<?php
$services=$_POST['services'];
echo "hello<br>";
echo "services: ".$services;
include('functions.php');
connect();
$sql1 = mysql_query("UPDATE contentAreas SET services = '$services'") or die ("Your information has not been posted");
?>
Thanks again for your help!
I can't believe this nor do I understand it, but when I changed my div name from "services" to "offers", it worked. Is services a reserve word? Could my function name saveServices() be too long? I would love to hear a concrete explanation about why this has happened.
Also, I upgraded from 4.0.2 standard to 4.2.2 standard.