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.
Related
My MODX site needs to grab the first image from all pages for Open Graph Meta tags, which will be plugged into the Head chunk for all templates.
The problem with this is that not all images are located in the content part of a page. Some are located inside Chunks and others inside TVs. (Finding an image tag from the content is not an issue.)
It might be possible to get all Chunks and TVs and loop through their values to check for images.
But is there a way to get the <body> contents of the resource?
Probably several ways, you can try writing a plugin to parse through the entire content of a page, looks like the OnWebPageComplete event may be the one to use (take a look at the different events to see if one is more appropriate}
You can try and grab the resource from the cache, keeping in mind that any chnks/snippets/TVs called in the page un-cached will not show up in the resource cache file.
You can get a list of TVs once you have loaded a resource & then use getTVValue to get the value.
If you have an image in a chunk, getChunk might work [might, I've never tried to use it that way] to get it's contents but I would image that the image in a chunk would come from a TV ~ so you should be able to retrieve it with getTVValue.
You could also just setup a TV for the OpenGraph image and explicitly set it on a page by page basis.
Probably writing a plugin & some regex is going to be the least painful way of going about it.
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 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.
I have mini forum site im coding and when users make their profile they get to add a little info about themselves. I want them to be able to make list elements and add images into this description, as well as make /n (drop a line). How can I do this from a simple input text area? is there any jQuery text area plugins someone can recommend.
As it stands I have the users start any list elements (bullet points) with * and then just septate out the lines and stick them in list elements, for images I make them upload the image, they get a ref number and put that in the box between two sets of ++.
This is not very user friendly, anyone have any suggestions or plug-ins i could use to better this?
Sounds like you need a HTML editor such as TinyMCE. This will change a textarea into a HTML editor, which will give your users the ability to format the content with lists and images etc etc.
have a look at the following plugins available for your need. CL Editor, [CK Editor] (http://ckeditor.com/), TinyMCE.
I managed to create a simple blog and an admin page using PHP. I didn't use a CMS like wordpress because I wanted a deeper understanding of PHP.
I wanted to create an admin page that allowed the user to specify where in their blog posting they could put in a picture; for example, they can add a photo before the first paragraph or after.
My admin page as it is now is just a textarea input field and a submit button that submits text-only blog posts from the textarea field to the database. My thought process was that I could add img tags into the textarea input field, but the user's photos might be stored on their hard drive so I thought of the idea to store PHP code in the textarea input field to retrieve image files from the database. For example, if I wanted to place a photo after the first paragraph of the blog post, I would type something like this into the textarea field:
This is the first paragraph. Here is a photo of my vacation:
<? echo "<img src='getPhoto.php?page=blogPost'>"; ?>
Then I click the "submit button" and the paragraph with the PHP code gets submitted into my database. The page with the blog posting retrieves the text, "This is the first paragraph. Here is a photo of my vacation:" and the PHP code. The PHP code then retrieves and shows the photo.
The problem is that submitting PHP code with the blog text might be confusing for a user who is not tech-savvy or does not have any programming knowledge. The admin page should make it possible for the blog writer to place photos anywhere in their blog post without programming knowledge. I haven't found a tutorial yet that covers image placement in a PHP blog's admin page. Any help getting started would be appreciated.
One way to accomplish what you want is by implementing custom shortcodes. In you case it'd look something like this:
This is the first paragraph. Here is a photo of my vacation:
[image bahamas-00123]
How it works is that you do something like this:
$text = shortcodes($text);
You'd need a separate area for uploading photos and some way of keeping track of them (ie: sql, flatfiles) so you know that bahamas-00123 actually refers to /some/path/DSC-00123.JPG.
For some code please check the accepted answer of: How do I replace custom “tags” in a string?
You can use a text editor like ckeditor or tinymce to format the text and upload images. This way users need not be aware about the custom tags and they can place the image wherever they like.