Categories
PHP Tips & Tutorials Regular Expression Tips & Tutorials WordPress How To

PHP: Generating Summary Abstract from A Text or HTML String, Limiting by Words or Sentences

On index or transitional pages, such as homepage or category pages of WordPress, you don’t want to show the full texts of your deep content pages yet but just a content snippet of the first few sentences or words as a summary with a read more link to the actual article.

This is generally good in terms of SEO as it reduces duplicate content on your site and increases page views. With WordPress you can simply achieve this by using a plugin named Evermore. However, with a home made CMS to select and display content abstracts, you will have to code a little bit on your own.

While you may be better off doing this with a plain SQL which I’m not an expert in, I’ll let in a little trick of PHP to accomplish the same task here.

Full HTML Text
$text = <<<TEXT    
I wrote a <a href="#">blog post</a> yesterday about Chinese web design fonts. What did you think? It appeared that many are very interested. I guess it's the language barriers and cultural differences that make the westerners eager to know more about us. All right then, let me write more about that and maybe start a <strong>brand new domain</strong> for it. Stay tuned!
TEXT;
The Problem – select first sentences

Select and display the first 3 sentences (max) of the full HTML text above.

The Solution
<?php
preg_match('/^([^.!?]*[\.!?]+){0,3}/', strip_tags($text), $abstract);
echo $abstract[0];
?>

Output:

I wrote a blog post yesterday about Chinese web design fonts. What did you think? It appeared that many are very interested.

Stripping out HTML tags for the summary is to prevent it from producing invalid HTML snippets as it’s possible that the process slices HTML elements in half, leaving just part of the tag or only the beginning tag there. However, you can always preserve tags in the abstract, with a slightly more sophisticated algorithm of course.

Another Problem – select first words

You want to distill an abstract of the first 30 words instead of sentences concluded by period punctuations such as ‘.’, ‘!’ and ‘?’.

The Solution

Simply modify the regular expression to:

/^([^.!?\s]*[\.!?\s]+){0,30}/

Output:

I wrote a blog post yesterday about Chinese web design fonts. What did you think? It appeared that many are very interested. I guess it's the language barriers and cultural

There’s an incomplete sentence so you may want to add a trailing of ‘…’ at the end to denote the abstract nature.

In regular expressions, \s stands for all sorts of white spaces including single-byte space, tab and new line.

Categories
WordPress How To

WordPress: Show Recent Posts on Homepage or in Sidebar

There used to be a plugin to grab and display most recent blog posts from WordPress database. Well, while you still can use it to get recent posts and them shown on homepage or in sidebar, you can now conveniently add a recent post widget from the WordPress control panel => Appearance => Widgets if your current theme is widget ready.

Use a Recent Posts Plugin

Lots of them!

Add Recent Posts Widget

Log in to your WordPress control panel and head to Appearance and on to Widgets, there’s this Recent Posts widget that you can instantly add to your theme. Make sure the theme you are using is enabled for widgets.

Rely on WordPress Template Tags Function

What you need is the WP template function wp_get_archives(). For instance, to show the latest 10 posts in sidebar, just insert the following line of PHP somewhere in sidebar.php:

<?php wp_get_archives('type=postbypost&limit=10'); ?>

Or in kavoir.com’s case, I added both the lists of 10 most recent posts as well as the 5 most recent comments in footer.php:

<ul class="recent-posts">
<?php wp_get_archives('type=postbypost&limit=10'); ?>
</ul>
<ul class="recent-comments">
<?php if (function_exists('mdv_recent_comments')) {mdv_recent_comments(5);} ?>
</ul>
Categories
CSS & HTML Tips

CSS: Text over Image – Add Text Caption to Images

Putting text over image or pictures is a good way to give simple title information to that image or declare copyrights without tampering with the image itself.

Real texts on an image with CSS
text over image demo in html & css

This lovely image gladly demonstrates how I (this text) can be flying over her face.

It’s very kind of her but don’t you agree that this place needs a camp fire and a little love?

The HTML
<div class="image">
  <img alt="" src="https://www.kavoir.com/img/text-over-image.jpg" />
  <div class="text">
    <p>This lovely image gladly demonstrates how I (this text) can be flying over her face.</p>
    <p>It's very kind of her but don't you agree that this place needs a camp fire and a little love?</p>
  </div>
</div>
The CSS
.image {
	position:relative;
	float:left; /* optional */
}
.image .text {
	position:absolute;
	top:10px; /* in conjunction with left property, decides the text position */
	left:10px;
	width:300px; /* optional, though better have one */
}

To position the text somewhere just modify the top and left property. For instance, place them at the the bottom right of the photo, just use right:10px and bottom:10px.

To have more than one text paragraphs positioned at different portion of the image, just add more <div class=”text”></div> and style them separately.

Categories
CSS & HTML Tips

CSS: Picture Background

CSS itself is an important part of web page design, but just the bone of it. Without pictures and photos, CSS is not more than just paragraphs of texts.

To embed a picture or photos of yours in background, you need a simple CSS rule: background.

Say you have a nice picture named mypic.jpg that you want in the entire background, tiled everywhere you can see on the web page, simply apply this CSS rule to the web page:

body {background:url(mypic.jpg)}

where body is the root element of the web page, representing everywhere the browser shows, from top left corner to the bottom right.

Tiled and repeated pictures are not pretty actually, so you may want it to show just once instead of fitting everywhere you scrolls. The following trick would do.

body {background:url(mypic.jpg) no-repeat}

And now the picture shows only once in the background. To repeat it horizontally,

body {background:url(mypic.jpg) repeat-x}

To repeat it vertically,

body {background:url(mypic.jpg) repeat-y}

To place it fixed at a position 100 pixels away from the top and 60 pixels from the left of its container – in this case, body –

body {background:url(mypic.jpg) no-repeat 60px 100px}

Not only body, but also a lot other HTML elements can be set a background picture in this way. For example, with a table,

table {background:url(mypic.jpg) repeat-y 60px  0}

This would vertically repeat mypic.jpg with a distance of 60px to the left border of the table.

Categories
CSS & HTML Tips PHP Tips & Tutorials

PHP: Drop Down List with Select

Populating a drop down list control <select> from a php array is easy, the following function would do it with a breeze. Assuming an array of IT companies:

$companies = array(
	'Microsoft' => 1,
	'Google' => 2,
	'Apple' => 3
);

Feed it as a parameter to the php function below:

function generateSelect($name = '', $options = array()) {
	$html = '<select name="'.$name.'">';
	foreach ($options as $option => $value) {
		$html .= '<option value='.$value.'>'.$option.'</option>';
	}
	$html .= '</select>';
	return $html;
}

with

$html = generateSelect('company', $companies);

you will get an HTML form select control as following:

<select name="company">
	<option value="1">Microsoft</option>
	<option value="2">Google</option>
	<option value="3">Apple</option>
</select>

With data selected from SQL database, you will first convert the SQL results rows to php array and then use it with the generateSelect() function to generate HTML select control drop down list.

Categories
CSS & HTML Tips

CSS: Double Border

In pure CSS solutions, a double border can be achieved via either a combination of single borders or a single double border style.

2 single borders
The HTML:
<div class="wrap-1">
	<div class="wrap-2">
	</div>
</div>
The CSS:
.wrap-1 {
	border:1px solid blue;
	padding:1px; /* how far away 2 borders are drawn, remove this line to make 2 borders stick to each other */
}
.wrap-2 {border:1px solid red;}
Demo:

This text is wrapped by a red and a blue border, with 1px in between them.

With 2 single borders to make a double border, you are able to specify different colors for each of them and decide the exact gap between them.

Another approach is to style different background colors with padding to simulate borders.

1 double border
The HTML:
<div class="wrap">
</div>
The CSS:
.wrap {
	border:3px double blue;
}
Demo:

This text is wrapped in a single double-border of 3px in width and colored blue.

border-style:double is rarely used however as I have tested it, it’s cross browser compatible: IE6, IE7, FF2, FF3, Opera 9.5, Safari 3 and Google Chrome.

However, the problem with double borders in this style is that you can’t specify different colors for each of the border and are stuck with an averaged width in the gap between them. Generally good though, to spice things up a little bit.

Some more CSS double border style examples

border:5px double blue;

border:15px double blue;

border:40px double blue;

border-left:5px double blue;

border-color:blue;border-style:double;border-width:7px 3px;

Categories
CSS & HTML Tips

CSS: Difference between opacity:0, visibility:hidden and display:none

If you are going to make part of the page totally transparent, there are essentially 3 CSS ways to achieve element transparency:

  1. opacity:0 (needs 2 more hacks for different browsers)
  2. visibility:hidden
  3. display:none

Bob, the man!

Let me take the example of Bob sitting in a chair to explain how these styles are different from each other. Without any of the styles above, he’s just a totally ordinary man sitting in the chair there for all to see:

  1. Bob’s in existence in the universe (DOM).
  2. The chair (the space Bob takes up) is there: Bob occupies the seat which cannot be used by anything else.
  3. You can see him no problem.
  4. You can touch him and he reacts!

For each of the styles applied, part of the statements will not be true, let’s take a look at them one by one.

opacity:0

As the style name suggests, opacity only makes the element able to be looked through, like in a sci-fi novel where a human or vehicle is made disappear while the physics still apply – you can still interact with the object, because it’s actually there. Just it’s made transparent and looked through, appearing to be not there.

One of the frequent uses of opacity is to style the HTML file upload control. And, opacity is the only CSS rule to make elements semi-transparent or translucent.

Bob:

  1. true
  2. true
  3. false
  4. true

visibility:hidden

CSS rule visibility only deals with the visibility of the element, nothing more. With visibility:hidden, you rip out the functionality and physical appearance at the same time, but retaining the space it used to take up. It’s invisible – both in vision and physical tangibility.

With the example of Bob, it’s like he’s gone to the rest room from the chair which is still there and which no one is allowed to use – Bob’s a badass.

Bob:

  1. true
  2. true
  3. false
  4. false

display:none

After being applied display:none, the element is simply off the grid, it’s not there on the web page anymore in all senses, except for as a notational node in the DOM. You can still manipulate it with JavaScript and make it display again, though. But for now, it’s completely gone from the web page, along with the space it used to occupy, like it’s never been there before.

Bob’s gone with his chair and the space is vacant again.

Bob:

  1. true
  2. false
  3. false
  4. false

One more way – Killing Bob!

That is to completely wipe out the element from the HTML. Just delete the node from the HTML in your web page editor.

Bob:

  1. false
  2. false
  3. false
  4. false

You murderer!

Categories
CSS & HTML Tips Web Design Tips and Insights

CSS: Styling File Upload / Select Input Control <input type="file" … />

Let’s face it, the native implementations of file uploading control of HTML form is ugly, throughout most of the browsers, and not consistent at all. Plus, <input type=”file” … /> just doesn’t play by quite a few of the CSS input styling rules such as border and background, making it a even bigger challenge.

Now how do we bend this rigid boy to our visual pleasure?

A few examples

  1. a contact form
  2. a file upload form

I’m not saying those are beautiful just when they come down to this technique I’m going to tell you, it’s absolutely possible to style an incredible control out of the native select and upload file input element.

The solution

The solution is to make use of the CSS opacity rule to give total transparency to the file upload control while maintaining it’s functionality, placing fake controls (a text field and a fake image button) between them and the visitor.

The HTML
<li class="upload">
	<label for="realupload">Upload Image: </label>
	<div class="fakeupload">
		<input type="text" name="fakeupload" /> <!-- browse button is here as background -->
	</div>
	<input type="file" name="upload" id="realupload" class="realupload" onchange="this.form.fakeupload.value = this.value;" />
</li>
The CSS
.upload {
	position:relative;
	width:664px;
}
.realupload {
	position:absolute;
	top:0;
	right:0;

	/* start of transparency styles */
	opacity:0;
	-moz-opacity:0;
	filter:alpha(opacity:0);
	/* end of transparency styles */

	z-index:2; /* bring the real upload interactivity up front */
	width:270px;
}
form .fakeupload {
	background:url(browse.gif) no-repeat 100% 50%;
}
form .fakeupload input {
	width:401px;
}

All css width properties have to be decided upon your actual situation, as the native appearance of all upload controls vary browser by browser, you will adjust all of the width for the best compatibility and functionality.

There’s also a small line of javascript that simulates the function of real upload control on the fake one:

this.form.fakeupload.value = this.value;

To make it look real!

Categories
Apache Web Server Tutorials & Tips Business and Marketing

Log Walking – Walk through your website logs and be in the shoe of a visitor

Well, just came across a rather insightful post by ronburk at Webmaster World, which by the way, is probably the most resourceful place for any veteran webmaster.

Consumer behavioral analysis is one of the most important part of any marketing campaigns in any industry. The better you get to know your customers, the better you know how to satisfy them and reach for their wallets. It’s the same with website marketing, whether you are selling your own products or you are advertising for others.

Step into the shoes of others

Stepping into the shoe of others is an essential business skill – a decent skill for a mutually satisfactory social life too.

  1. You step into the shoe of a customer to really know what they need and what they want while they dont’t know it.
  2. You step into the shoe of a business partner on certain terms and see how you can come to a win-win solution, not just beneficial to either one of you.
  3. You step into the shoe of your employee and make them truly love what they do instead of being a tyrant.
Log walking

Log walking, by ronburk, is essentially the process of analyzing server logs for visitor behaviors and applying the found patterns to your business benefits. To decide on what you are going to do such as changing website layout, writing an article, supplying a specific product or service or targeting a certain angle of prospects, you need to first check and think thoroughly of your business environment (market niche, competition, consumer base, advertising fierceness) ,second measure between current situation and your desired objective and third take actions to ax out the changes relentlessly.

Change is inevitably the only eternal thing in the universe, what worked a year ago might not necessarily continue bringing in bucks for you. You have to spot changes and adapt to them before they bite you.

Relying on AdSense for a passive income stream? Think again.

Blah Blah Blah

If these rumblings seem stupid to you, I’m writing to myself. Anyway, ronburk’s Log-Walking Your Way to >$$$ will certainly be a good read for those enterprising for AdSense.

Categories
Hilariously Funny or Creepy

A very funny thread title

One of the guys started a thread complaining about his internet connection:

Is it just me or is half the internet down?

Hilarious!