I've built a blog similar to wordpress. On my home page, I take the entire blog post, throw it through a function, and only display an excerpt of it. I want to go through and shrink my videos to a specific width/height. The code in the post could look like:
[vimeo width="700" height="400"] // (the 700 & 400 could be any values).
I basically want to find that, then change it to:
[vimeo width="300" height="200"] // this will be preset/hard coded.
You can use regular expressions through preg_replace() to do the filtering. Just load your whole blog post into $BlogPost. The RegEx pattern may need to be altered to allow for variations in syntax and spacing (i.e. width = '700', etc.)
<?php
$FilteredBlogPost = preg_replace('/(.*vimeo width=")\d+(" height=")\d+(".*)/im', '${1}300${2}200${3}', $BlogPost);
?>
unless you want to scrape the video, put it on your server, resize it with some video dedicated libraries and then stream it from your server, the solution is client related (ie: HTML. not PHP)
Here is a nice tutorial on how to achieve that with youtube videos - i think exactly the same applies in your case too
Related
I'm having trouble figuring out if it's possible to embed an html or js document as an image, like so:
<img src="http://blah.com/image.js" />
or
<img src="http://blah.com/image.html" />
The general idea being that when the browser tries to access the file, it would execute the file clientside and get the actual image, and would then embed it as usual. I realize this can be done easily with PHP, but I'm looking for a non-server solution.
Problems being the content type it transfers as is wrong, and more importantly I think this violates every crossdomain and sandbox rule, to which I don't think there's any way around.
As long as the document you are linking to can display the binary data this will work.
Follow this article to solve the binary load with javascript, http://emilsblog.lerch.org/2009/07/javascript-hacks-using-xhr-to-load.html
Then you can also include base64 data in img tags like this
<img src="data:image/png;base64,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" />
The src attribute must point to a URI that eventually results in actual image data. Perhaps you should consider leaving it blank and then creating a script that generates a data: URI and replaces it into the attribute.
I wanted to allow users to be able to add videos but I'm having an issue with one of the sites.
I will allow videos from Youtube, Vimeo, Vevo, Daily Motion and MTV.
The problem is for MTV. The URL is always different, so I was wondering if there ways to get the source value of an IFrame/embed code.
Example: MTV embed code is:
<div style="background-color:#000000;width:520px;">
<div style="padding:4px;">
<iframe src="http://media.mtvnservices.com/embed/mgid:uma:videolist:mtv.com:1687162/cp~instance%3Dfullepisode%26autoPlay%3Dfalse%26series%3D2211%26seriesId%3D29240%26channelId%3D1%26id%3D1687162%26instance%3Dfullepisode%26uri%3Dmgid%3Auma%3Avideolist%3Amtv.com%3A1687162" width="512" height="288" frameborder="0"></iframe>
<p style="text-align:left;background-color:#FFFFFF;padding:4px;margin-top:4px;margin-bottom:0px;font-family:Arial, Helvetica, sans-serif;font-size:12px;">Get More:
Teen Mom (Season 4), Full Episodes</p></div></div>
Is there a way I can get the IFrame source value out of that complete string?
I just want :
http://media.mtvnservices.com/embed/mgid:uma:videolist:mtv.com:1687162/cp~instance%3Dfullepisode%26autoPlay%3Dfalse%26series%3D2211%26seriesId%3D29240%26channelId%3D1%26id%3D1687162%26instance%3Dfullepisode%26uri%3Dmgid%3Auma%3Avideolist%3Amtv.com%3A1687162
Any help would be appreciated. The other video sources were simple since I was able to use the physical URL itself rather than the embed code.
That's valid HTML, so you can easily parse it with SimpleXML:
$root = simplexml_load_string($embed_code);
$url = (string) $root->div->iframe['src'];
To do this it's quite easy, all you need is this one line of code.
document.getElementById("myFrame").src
I have a need for getting preview a url over mouse hover, my application is built on php , js and jquery. Although I have an idea of to get to my requirements but am a little confused with the right approach, i checked all the posted question on here but most of them refer to some third party tools or installables. Frnakly i do not want to use them and think i should try one on my own. Please can you guide me through on the best possible step as per you?
Thanks!
11-Jun-2012
Finally I managed to use Curl and get a preview of the site on a Div placed next to the Link on my site, well now the problem is of fitting the content in the Div ..is there a way that I can adjust the css of the extracted html page in such a way that all the content fits in the fixed height and width of the Div.scaledown option or something? that would scale everything down to the required proportion?
You can do this, in plain ol' CSS and HTML:
.mouseover {
position:absolute;
width:200px;
height:200px;
top:5px;
left:5px;
display:none;
}
.link {
position:relative;
}
.link:hover .mouseover {
display:block;
}
Then, in HTML:
<a href="#" class="link">Link
<div style="background:url('<URL HERE>')" class="mouseover"></div>
</a>
Ok, so you want to get a thumbnail of a webpage and show it on mouse over. To do that, you'll need to either use tools that generate thumbnails or write a PHP script yourself. Here are some tools:
websnapr
Website Thumbnail Generator - This one you can install on your own server
If you want to write your own, check out imagegrabwindow. Note that it requires a Windows server. I don't know if PHP has any other methods to do this. If you're not on a Windows server, you could write a bash script to open a browser and use a screenshot utility to take a screenshot and save it to a file for your website to pick up.
You'll also have to make sure to have some sort of cache so you're not doing this every time every user moves their mouse over a link.
You can use urlbox.io for this, here's an example preview thumbnail of this very URL:
https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/32040df25d7c57da28ef4da7ce461af00d852653/png?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10970647%2Fthumbnail-preview-of-a-url-using-php-and-javascript&thumb_width=400
You can see that the options passed into the Urlbox API are simply url, and thumb_width to set the desired width of the thumbnail in pixels, in this case I chose 400 pixels wide.
Now all you got to do is embed it in an <img> tag like so:
<img src="https://api.urlbox.io/v1/ca482d7e-9417-4569-90fe-80f7c5e1c781/32040df25d7c57da28ef4da7ce461af00d852653/png?url=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F10970647%2Fthumbnail-preview-of-a-url-using-php-and-javascript&thumb_width=400"/>
You can use API to do this. For example ApiFlash has a free plan that you can use up to 100 screenshots per month.
Here is how it would look like with PHP:
<?php
$params = http_build_query(array(
"access_key" => "YOUR_ACCESS_KEY"
"url" => "https://example.com",
));
$image_data = file_get_contents("https://api.apiflash.com/v1/urltoimage?" . $params);
file_put_contents("screenshot_api_example.jpeg", $image_data);
?>
The API has a very good uptime because it's based on AWS Lambda.
I have an article formatted in HTML. It contains a whole lot of jargon words that perhaps some people wouldn't understand.
I also have a glossary of terms (MySQL Table) with definitions which would be helpful to there people.
I want to go through the HTML of my article and find instances of these glossary terms and replace them with some nice JavaScript which will show a 'tooltip' with a definition for the term.
I've done this nearly, but i'm still having some problems:
terms are being found within words (ie: APS is in Perhaps)
I have to make sure that it doesn't do this to alt, title, linked text, etc. So only text that doesn't have any formatting applied. BUT it needs to work in tables and paragraphs.
Here is the code I have:
$query_glossary = "SELECT word FROM glossary_terms WHERE status = 1 ORDER BY LENGTH(word) DESC";
$result_glossary = mysql_query_run($query_glossary);
//reset mysql via seek so we don't have to do the query again
mysql_data_seek($result_glossary,0);
while($glossary = mysql_fetch_array($result_glossary)) {
//once done we can replace the words with a nice tip
$glossary_word = $glossary['word'];
$glossary_word = preg_quote($glossary_word,'/');
$article['content'] = preg_replace_callback('/[\s]('.$glossary_word.')[\s](.*?>)/i','article_checkOpenTag',$article['content'],10);
}
And here is the PHP function:
function article_checkOpenTag($matches) {
if (strpos($matches[0], '<') === false) {
return $matches[0];
}
else {
$query_term = "SELECT word,glossary_term_id,info FROM glossary_terms WHERE word = '".escape($matches[1])."'";
$result_term = mysql_query_run($query_term);
$term = mysql_fetch_array($result_term);
# CREATING A RELEVENT LINK
$glossary_id = $term['glossary_term_id'];
$glossary_link = SITEURL.'/glossary/term/'.string_to_url($term['word']).'-'.$term['glossary_term_id'];
# SOME DESCRIPTION STUFF FOR THE TOOLTIP
if(strlen($term['info'])>400) {
$glossary_info = substr(strip_tags($term['info']),0,350).' ...<br /> Read More';
}
else {
$glossary_info = $term['info'];
}
return ' '.$term['word'].'',$glossary_info,400,1,0,1).'">'.$matches[1].'</a> '.$matches[2];
}
}
Move the load from server to client. Assuming that your "dictionary of slang" changes not frequently and that you want to "add nice tooltips" to words across a lot of articles, you can export it into a .js file and add a corresponding <script> entry into your pages - just a static file easily cacheable by a web-browser.
Then write a client-side js-script that will try to find a dom-node where "a content with slang" is put, then parse out the occurences of the words from your dictionary and wrap them with some html to show tooltips. Everything with js, everything client-side.
If the method is not suitable and you're going to do the job within your php backend, at least consider some caching of processed content.
I also see that you insert a description text for every "jargon word" found within content. What if a word is very frequent across an article? You get overhead. Make that descriptions separate, put them into JS as an object. The task is to find words which have a description and just mark them using some short tag, for instance <em>. Your js-script should find that em`s, pick a description from the object (associative array with descriptions for words) and construct a tooltip dynamically on "mouse over" event.
Interestingly enough, I was searching exactly NOT for a question like yours, but while reading I realized that your question is one that I had been through quite some time ago
It was basically a system to parse a dictionary and spits augmented HTML.
My suggestion would include instead:
Use database if you want, but a cached generated CSV file could be faster to use as dictionary
Use a hook in your rendering system to parse the actual content within this dictionary
caching of the page could be useful too
I elaborated a solution on my blog (in French, sorry for that). But it outlines basically something that you can actually use to do that.
I called it "ContentAbbrGenerator" as a MODx plugin. But the raw of the plugin can be applied outside of the established structure.
Anyway you can download the zip file and get the RegExes and find a way around it.
My objective
Use one file that is read to get the kind of html decoration.
Generate html from within author entered content that doesnt know about accessibility and tags (dfn and or abbr)
Make it re-usable.
Make it i18n-izable. That is, in french, we use the english definition but the adaptative technology reads the english word in french and sounds weird. So we had to use the lang="" attribute to make it clear.
What I did
Is basically that the text you give, gets more semantic.
Imagine the following dictionary:
en;abbr;HTML;Hyper Text Markup Language;es
en;abbr;abbr;Abbreviation
Then, the content entered by the CMS could spit a text like this:
<p>Have you ever wanted to do not hassle with HTML abbr tags but was too lazy to hand-code them all!? That is my solution :)</p>
That gets translated into:
<p>Have you ever wanted to do not hassle with <abbr title="Hyper Text Markup Language" lang="es">HTML</abbr> <abbr title="Abbreviation">abbr</abbr> tags but was too lazy to hand-code them all!? That is my solution :)</p>
All depends from one CSV file that you can generate from your database.
The conventions I used
The file /abbreviations.txt is publicly available on the server (that could be generated) is a dictionary, one definition per accronym
An implementation has only to read the file and apply it BEFORE sending it to the client
The tooltips
I strongly recommend you use the tooltip tool that even Twitter Bootstrap implements. It basically reads the title of any marked up tags you want.
Have a look there: Bootstrap from Twitter with Toolip helper.
PS: I'm very sold to the use of the patterns Twitter put forward with this Bootstrap project, it's worth a look!!
I have some thumbnail images with its larger version.I placed the thumbnail images in a page.Now for link I just gave a link
<img src="thumbnail1.jpg>
but for this I have to make different pages for showing larger one.I want to give a link to show them in a single page.means whenever I will click the thumbnail it will open the larger one in a page with the same url but with its name like
imagegallery.php?news=images/largerimage1/13.jpg
imagegallery.php?news=images/largerimage1/14.jpg
so how to do that?
Pretty basic stuff, I suggest you get to read some PHP tutorials on the internet to get some knowledge on one thing and another.
The ?news= part in your URL is a parameter that can be read by PHP. This type is known as $_GET. To get this part you would need $_GET['news'] so if we'd use your first link and place this inside a script: echo $_GET['news']; the page would say images/largerimages1/13.jpg.
In order to get the image loaded on your website we need some simple steps, I'm changing the news parameter into image, that suits better for your script since it ain't news items:
<?php
// Define the path (used to see if an image exists)
$path = 'your/absolute/path/to/public_html/'; # or wwwroot or www folder
// First check if the parameter is not empty
if($_GET['image'] != "") {
// Then check if the file is valid
if(file_exists($path . $_GET['image'])) {
// If an image exists then display image
echo '<img src="'. $_GET['image'] . '" />;
}
}
?>
Below this script you can put all your thumbnails the way you want. Ofcourse, also for these thumbnails there are some automated options. But I strongly suggest you get a good look at the script above and some beginner PHP tutorials so you completely understand the example given. This still isn't the best method, but it's kicking you in the right direction.
if your imagegallery.php is in root of your domain, you can just add slash as a first char to links like this:
<img src="thumbnail1.jpg>
else you will have to write some php function which it returns BaseUrl of your web. Then it should looks like this:
<img src="thumbnail1.jpg>
maybe you can something like this,
Techincally, there is no thumbnail image, just a stretch version of the regular image
I don't understand which part you don't know how to do:
- the link part?
it should look like
<img src="thumbnail1.jpg>
- or the PHP part (the file called imagegallery.php)?