I use Simple HTML DOM library in my Drupal custom module to do a task in my project.
The task simply is imitating the Facebook action, when we paste an article url, FB scrap the url and return back with part of the article as a description and an image.
My question is, what is the used algorithm to pick the first part of the article between a lot of <p> tags and also pick the right picture between all the pics in the page!
I know that FB use a :OG tag, but I need to develop an algorithm which pick these info if the OG tag is not there.
Thank you guys for support and have a nice day.
Regards.
I think with the image it is the dimensions of the image. Th takes the first image with more than say 100x100 pixels or so.
With the text it might be something similar. Strip the inline HTML tags, get the first block element text (or maybe just paragraphs) and there you go.
Related
I am building a "Reddit" like site.
The User can post an URL from which I want to get the correct image with PHP.
What I would need is a script which sites like Facebook or Tumblr use to fetch the Images.
I saw already scripts which get the images by getting the HTML Content and searching for "img" tags.
Are there any better methods/scripts available?
Maybe even scripts which will order the images by the size: The bigger the image the more important it is.
Thanks for answers
You may want to check out PHPQuery, it will allow you easily iterate through all images on a given website. You can then work out the areas of each image and sort them accordingly.
It depends a bit for what you're looking for and what the image is that the user would like to have with his post. To give you an example: I once wrote a method that searches for a logo of a company on the company's website. To do so, I searched for, indeed, the img-tags using simple_html_dom and filtered those tags on the existence of logo in the alt-tag. The results are displayed to the user to select the right image; it could be that you find multiple images fitting your purpose.
I would indeed, as you proposed, have a look at the size and skip small images (e.g. smaller dan lets say 50 px).
I am creating a user viewer for my friend's Minecraft Classic Server (in-dev version here) and below the skin is a slider. It is intended to be a zoom slider, and I need it to change the scale of the skin. The skin viewer and slider work perfectly fine; however, my trouble is in the element. It appears that I can only draw to my <img> once (code attached), and I'm not sure how to resolve that. My current plan is to delete the element and create it again, but I'm not sure how to even do that. Does anyone have any resources, tips, or information regarding this?
Page source: http://pastebin.com/R4qqTVz8
Modified mcSkinRenderer.js (courtesy of Joran de Raaff): http://ns2.nuclearstorm.net/nucsto/mcSkinRenderer.js
So here is what's happening with your code.
When you run renderMCSkins the first time, it looks through the page and finds all images with the class of 'skin'. It then REPLACES those images with canvas elements and renders the image into the new canvas. When you use the slider it runs that renderMCskins function again, only this time there are no longer images on the page with that class name because they have already been converted to canvas elements.
You have two options.
First, do as you initially thought and DELETE all instances of that canvas element, then replace it with the initial image, and run renderMCSkins with the new zoom value.
Second, you can update the mcSkinRenderer.js to include some kind of an update function to make changes to the canvas elements that have already been rendered.
I've developed a website for my rugby club. We currently have one page with news articles on it (each with there own unique id's per story).
What I'd like to do is have a separate page for each story, then show a snap-shot of that story (say headline and first paragraph) on a Headlines page.
How could I do this? Via javascript or php? (forgive a neewbie)
Use a headline field and a text field in your Article table.
To extract the first paragraph of the text, use the explode function.
$paragraph = explode("\n", $text);
echo $paragraph[0];
If your text contains <p></p> :
$paragraph = explode("</p>", $text);
echo $paragraph[0];
You can use Links With URL Preview from Easiest Tooltip and Image Preview Using jQuery.
See the Example 3:
Example 3: Links With URL Preview
This demands a bit more effort but it might be worth it as an extra feature to add to your sites. What you’ll need here is a small size screenshot of the target url. You’ll put screenshot image location in in REL attribute of the A tag and script will do the rest.
One way could be to use jQuery's load() feature to grab the article page, and trim out stuff you don't need. I wouldn't necessarily recommend this though as the loaded file counts as a page visit, and could screw up your analytics.
Are you using a CMS? This is a fairly standard feature of systems such as Wordpress, Joomla, Perch, etc.
I would like to implement a RTE (Rich Text Editor) with the ability to upload images anywhere inside the text. My aim is to create an "add / edit news article" page, where the client can write a story with images.
I am good at PHP and Javascript programming, so I am looking for help about methods of implementing this. Do I create a custom button in this RTE to insert a previously uploaded image or some other way? How do I display those images for the user to choose? Etc.
Bonus points for:
Multiple files upload: the ability for the client to just select e.g. 10 images that are relevant to this story.
Uses some method other than Flash as a default for upload.
Uses jQuery as I use it a lot.
RTE is very lightweight. I don't care if the client has to know a few things (like markdown or something similar), I just don't like bloated RTEs.
Uses new technologies, like HTML5 and / or CSS3.
Let me clarify a few things. I know a few Javascript RTEs and have also used them in several CMSs. So I don't need links to these, I can Google "javascript RTE" myself :). However, something like #hakre said is useful as he pointed out how extensible CKEditor is, which I was not fully aware.
To give an example of the answer I'm looking for: "you can do this with CKEditor, upload images asynchronously with jquery-html5-upload, save all uploaded image filename in a Javascript array, create a new button inside CKEditor with a custom click handler, which displays an overlay with Fancybox and you show all the images (you have filenames stored in an array), user clicks an image and you insert html into the editor".
Something like that but better :) (or should I say accurate).
Anything in here that meets with your reqs? http://ckeditor.com/developer-features
You taken a look at TinyMCEor CKEditor?
The "fake answer" you gave yourself is quite accurate. You would need a RTE editor that supports custom functionality.
The logistics would go along these lines:
User presses a button
An empty div is appended to the input with a unique id
An image uploader popup will open, with pointers to the new div
A combination of jQuery / AJAX / PHP will allow the user to upload a file within the page
The filename is returned after the upload process and inserted in the originally appended div
If you are looking for the specific code for each of these steps, I would recommend finding some tutorials as this isn't something that we can write some fast example code for.
This question is a bit open at the moment as I'm not sure the idea is even possible.
So far I've loaded an image from a url, and then used jQuery UI draggable feature to allow the user to drag html text (which has been replaced using cufon font replacement) over the top of the image.
The major step (which is what my question relates to) is being able to take the image and text layered over the top of the image, and save the result, either to the server, or potentially offer the option to save the altered image to the user's HD, or what would also be useful is to upload to facebook using the facebook API, but this is something I know is possible.
It all hangs on whether it's even possible to achieve the first step, which is to save the image and layered text as a combined image?
I wonder if there is a PHP/jQuery solution that would allow me to do this?
My suggestion would be to have an internal URL that outputs the final image using jQuery and PHP, then take a screenshot using webkit2png of that page. You should know the dimensions etc., so you'll be able to crop down the resulting screenshot to just the region you're looking for.