Brightscape Blog


Tutorials and tips covering HTML, CSS, jQuery and PHP for web designers and developers. Discussion of the latest Internet technology and search engine optimisation news.



Use CSS3 Media Queries To Create Mobile Version of Your Website

Jul
26
2010

I read an excellent article highlighting how to create iPhone, Android and iPad–friendly versions of your website.

This is achieved with CSS3 media queries, either in your main stylesheet or using a seperate stylesheet.

The key point is that you can simply add the following code to the bottom of your main stylesheet:

@media only screen and (max-device-width: 480px) {
/* Add iPhone styles here */
}

Or you can refer to an external stylesheet below your main stylesheet as follows:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="http://www.example.com/css/mobile.css" />

Read the full article here: How To Use CSS3 Media Queries To Create a Mobile Version of Your Website – Smashing Magazine


WordPress 3.0 “Thelonious”

Jun
18
2010

We’ve been waiting a while for a final release of WordPress 3.0, and its finally here. When you see what’s new I think you’ll agree that it’s been worth the wait.

Wordpress logo

WordPress 3.0 includes lots of improvements and updates—from a simpler and cleaner user–interface, to some more major changes such as improved post type options (I.e. Newsletter, Product and Contacts).

You’ll see more about the new features in the video below. But here are a few of the highlights that stood–out to me with this latest release:

  • Bulk updates – Update your WordPress installation or up to 15 plugins at once
  • Custom menu’s – More advanced menu options, such as drop–downs
  • Custom header image – Easily apply different custom header images to individual posts
  • Custom post types – New post types including Products, Contacts, Employees and Newsletters takes WordPress closer to being a fully–fledged CMS
  • MU + WP 3.0 – Control multiple WordPress sites from a single installation

See what’s New in Wordress 3.0

Read more about WordPress 3.0 “Thelonious” here, or you can download it here.


Truncate SimplePie Content with PHP

May
26
2010

PHP logo This article is a follow-up to an earlier blog post about using SimplePie to display an RSS feed on your website.

Sometimes it can be useful to ensure that a piece of content stays on a single line (e.g. a title), or make sure that some text stays to less than 255 characters (e.g. a description) and gets truncated after that point.

My previous blog article showed how to do this with PHP, and I will give a brief recap below. However, the focus of this blog post is to improve truncation of content even further.

Old Truncation Technique

The following PHP string truncates or shortens the title to 45 characters and then echo’s the list of titles parsed from an RSS feed and displays it on the page with ellipses (…) appended to the end of the title: < ?php echo substr($item->get_title(), 0, 42) . '...'; ?>

For example: Here Is a Title That Is 42 Characters long… You can see that the title itself is 42 characters long so it hasn’t been truncated, but the PHP has appended ellipses (…) to the end of the title. Doing this is quite unnecessary unless the title is over 42 characters.

Improved Truncation Technique

The way to deal with this more effectively is to determine the length of the string and then only append the ellipses (…) if the length of the string exceeds the parameters we have set. This can be done as follows:

<?php
  echo substr($item->get_description(), 0, 45);
  $str = $item->get_description();
  if (strlen($str) > 45) echo '...';
?>

To explain the above code line by line, echo substr($item->get_title(), 0, 45);, this line echo’s or outputs the parsed feed title using SimplePie. The substr function returns the portion of string specified by the start and length parameters. In the above case, 0 represents the first character, and 45 represents the 45th character (spaces are included as characters).

If the title is 45 characters or less, the above code works fine and doesn’t append the ellipses (…), which is ideal. However, what if the title is 60 characters in length?

The second line of the above code, $str = $item->get_description(); converts the whole title into a string called $str.

The third line of code uses the strlen function, which returns the length of the given string (which we have called $str). By using an if statement in the final line of code if (strlen($str) > 45) echo '...';, we are saying, if the length of the string is greater than 45 characters show the ellipses (…) otherwise ignore the if statement and don’t show the ellipses (…).

It’s a very simple tweak that can be applied to outputting SimplePie or any other PHP, and it can help to retain a better looking page by avoiding text wrapping.