Nettuts+

5 More Helpful Video Quick Tips

Jeffrey Way — Fri, 20 Nov 2009 19:56:34 +0000

As many of you might know, I post a sporadic video quick tip on Twitter once a week or so. For those of you who don’t follow us, here are the latest five.

You’ll learn how to select anything and everything with jQuery, how to log PHP errors to a text file, how to change your website’s background with each WordPress post, and more. Each video does not exceed five minutes.

How to Change your Website’s Background with Each WordPress Blog Post

How to Rename the jQuery “$” Symbol

How to Select Anything and Everything with jQuery

Log Errors to a Text File with PHP

Stay Up to Date on the Latest Nettuts+ Screencasts with Boxee

Sorting Values with JavaScript

Andrew Burgess — Thu, 19 Nov 2009 19:29:06 +0000

Lists and tables are often the best way to display data on the web; but you shouldn’t have to worry about sorting that information manually. In today’s tutorial, you’re going to make a jQuery plugin that will put all your ducks in a row with JavaScript ease!

Preface

So, how exactly does sorting work in JavaScript? It’s not too complicated: any array object has a sort method. If you don’t pass it any parameters, it will convert the objects in the array to strings, sort them pseudo-alphabetically, and return them. Usually, this is terrible; consider sorting the numbers 0 – 10 alphabetically. You would get this: [0, 1, 10, 2, 3, 4, 5, 6, 7, 8, 9]. Fortunately, we can pass a function to the sort method. That function should take two parameters (the two items to be compared): then, it will return 0 if they are equal, a negative number if the first parameter takes precedence, or a positive number of the second parameter should come first. So numbers are actually the simplest thing to sort “manually”:

numberArray.sort(function(a, b) {
    return a - b
});

Obviously, this will return 0 if the numbers are equal, a negative number if a should be first, and a positive number if b should be first.

We’re going to look at sorting several different types of data, a few in multiple formats; but this will all be much more useful if we wrap it in a jQuery plugin, so let’s start by setting up that shell!

The Plugin Shell

If you’re not familiar with writing jQuery plugins, check out Jeffrey Way’s Screencast “You still can’t create a jQuery Plugin?” It’ll get you up to speed in no time if you’re comfortable with jQuery! (true confession: I’d actually never written a plugin until I made this one).

We’ll set up our plugin, called datasort, this way: we’ll pass it an array of items to sort; we can specify four parameters.

datatype (the type of data you’re sorting)
sortElement (the child element you want to sort by, if desired)
sortAttr (the attribute you want to sort by, if desired)
reverse (the direction they should sort in)

So a fully-modified call to our plugin might look like this:

$('ul.names li).datasort({
    		datatype    : 'alpha',
    		sortElement : 'span.first',
    		sortAttr    : 'rel',
    		reverse     : true
    	});

Here’s the plugin shell:

(function ($) {
  $.fn.datasort = function(options) {
    var defaults = {
    	//set the default parameter values
          datatype    : 'alpha',
          sortElement : false,
          sortAttr    : false,
          reverse     : false
          },
    // combine the default and user's parameters, overriding defaults
        settings = $.extend({}, defaults, options),
        datatypes = {},
        base = {},
        that = this;

    if (typeof settings.datatype === 'string') {
      that.sort(datatypes[settings.datatype]);
    }
    if (typeof settings.datatype === 'function') {
      that.sort(settings.datatype);
    }
    if(settings.reverse) {
      that = $($.makeArray(this).reverse());
    }
    $.each(that, function(index, element) { that.parent().append(element); });
  };
})(jQuery);

So here’s how it’ll work: we’ll set up all the variables at the beginning. Then, if the datatype parameter is a string, we’ll find the corresponding sort function in the datatypes object and sort with it; if the datatype parameter is a function, we’ll sort with it. Finally, if the reverse setting is set to true, we’ll reverse the order of the sorted items (since jQuery objects aren’t true JavaScript arrays, the reverse function won’t work on them; so we can use $.makeArray() to turn it into one; then, once it’s reversed, we re-jquery-fy it!).

Laying a Bit More Groundwork

At the very lowest level, you can sort almost any type of data in one of two ways: we’ll be calling them alphabetically and numerically. Let’s create these two functions as properties of your base object.

base = {
  alpha : function(a, b) {
    a = a.toUpperCase();
    b = b.toUpperCase();
    return (a < b) ? -1 : (a > b) : 1 : 0;
    //ternary operator: condition ? returnIfTrue : returnIfFalse
  },
  number : function(a, b) {
    a = parseFloat(a);
    b = parseFloat(b);
    return a - b;
  }
},

Pretty simple, eh? Simply normalize the two values, compare and return. The tricky part is parsing the data that we want to send to these functions; that’s what we’ll do now. However, there’s one more thing.

When sorting items in the array, we might not want to sort simply by the text of the element itself. The sortElement and sortAttr parameters of our plugin are to this end. For example, we will likely want to sort table rows based on a certain column of table cells. In that case, we’d use $(’table tr’).datasort({ sortElement : ‘td.price’ }). Or perhaps we want to sort a list of images by their alt attributes: $(’ul li’).datasort({sortElement : ‘img’, sortAttr : ‘alt’}). Because of all this, we need to add one more function to our base object:

base = {
  alpha : function (a, b) { ... },
  number : function (a, b) { ... },
  extract : function (a, b) {
  	var get = function (i) {
      var o = $(i);
      if (settings.sortElement) {
        o = o.children(settings.sortElement);
      }
      if (settings.sortAttr) {
        o = o.attr(settings.sortAttr);
      } else {
        o = o.text();
      }
      return o;
    };
    return {
      a : get(a),
      b : get(b)
    };
  }
},

It may look complicated, but it’s not. We just create a jQuery object with each item; if sortElement is set, we use the children() method to get the right elements. Then, if a sortAttr is set, we get its value; if not, we get the element’s text. We’ve set all this to an inner function, and return an object with two properites; these properties are the values we must parse and send to the appropriate base sorting function.

This probably seemed like a lot of prep work, but what we were really doing is abstracting as much code as possible. This way, they’ll be much less repeat code, because the important actions have been bundled away as functions.

Sorting Words and Numbers

We’re finally here: the fun part! We’ll start by building two simple functions for our datatypes object. These will simple pass values to base.extract() and then pass those return values to the appropriate sorting class.

datatypes = {
  alpha : function (a, b) {
    var o = base.extract(a, b);
    return base.alpha(o.a, o.b);
  },
  number : function(a, b) {
    var o = base.extract(a, b);
    for (var e in o) {
      o[e] = o[e].replace(/[$]?(-?\d+.?\d+)/, '\$1');
    }
    return base.number(o.a, o.b);
  },
},

Our alphabetic sorter should be obvious. The number sorter does a bit more: before passing the extracted values on, it strips out a dollar sign at the front. I’ve kept this regular expression simple, but you could parse a lot of different number formats here if you wanted to get complex. Let’s give our evolving plugin a try; create a basic html page:




  
  Data Sorting
  


  
    
      
        First Name
        Last Name
      
    
    
      Jeffrey  Way
      Sean  Hodge
      Adam  Miller
      Ian  Yates
      Adrian  Try
      Caleb  Aylsworth
    
  

  
  4.09
  4.10
  67.8
  100
  -98
  67.7
  23
   

  
    $299.66
    $299.57
    $0.14
    $80.00

First Name	Last Name
Jeffrey	Way
Sean	Hodge
Adam	Miller
Ian	Yates
Adrian	Try
Caleb	Aylsworth

I’ve included a table and two lists (and I’ve styled them briefly). Take note of our plugin calls: we’re using the default datatype for the table, but sorting by the table cells with a class of last; try changing this to ‘td.first.’ Then, we sort the lists numerically, and reverse one of them. Here’s the proof of our labours:

Pretty nice, but those were relatively simple values; what if we want to be able to sort multiple formats for one type?

Sorting Dates

There are a number of different ways to write dates, which makes it pretty tricky to parse them for sorting. However, we can cover most of them with this:

date : function(a, b) {
  var o = base.extract(a, b);
  for (var e in o) {
  o[e] = o[e].replace(/-/g, '')
             .replace(/january|jan/i, '01')
             .replace(/february|feb/i, '02')
             .replace(/march|mar/i, '03')
             .replace(/april|apr/i, '04')
             .replace(/may/i, '05')
             .replace(/june|jun/i, '06')
             .replace(/july|jul/i, '07')
             .replace(/august|aug/i, '08')
             .replace(/september|sept|sep/i, '09')
             .replace(/october|oct/i, '10')
             .replace(/november|nov/i, '11')
             .replace(/december|dec/i, '12')
             .replace(/(\d{2}) (\d{2}), (\d{4})/, '\$3\$1\$2')
             .replace(/(\d{2})\/(\d{2})\/(\d{4})/, '\$3\$2\$1');
  }
  return base.number(o.a, o.b);
},

So what are we doing here? First, here’s the logic: if all the dates are formatted YYYYMMDD, they will sort correctly with numerical sorting. Our parser can sort the following date formats:

YYYY-MM-DD
YYYYMMDD
DD/MM/YYYY
month DD, YYYY

First we strip our dashes, which will leave YYYY-MM-DD ready for parsing. Then, we replace every month name or abbreviation with its number value. Finally, we have to rearrange the numbers for DD/MM/YYY and month DD, YYYY. That’s what the last two expressions do. To give this a try, paste this list into our HTML:


  2009-10-06
  sept 25, 1995
  1990-06-18
  20100131
  June 18, 2009
  02/11/1993
  15941219
  1965-08-05
  1425-12-25

And call it with this:

    $('ul.date li').datasort({datatype: 'date'});

Is this a perfect date parser? Not by any means; we can’t sort DD/MM/YY, because there’s no way to know what century this is in. Also, we can’t tell the difference between DD/MM/YY and MM/DD/YY, so we just have to choose one.

Sorting Time

Sorting time values must be one of the most difficult values to sort: we need to be able to accept 12-hour time, 24-hour time, and values with or without AM/PM tags and seconds. I think it’s easiest to sort time alphabetically, even though its all numbers. Why? Consider these two timestamps: 00:15:37 and 12:15. The first one should come first, but if we sort them by number they’ll be parsed as floats, and end up like 1537 and 1215. Now, the second value will come first. Also, when sorting alphabetically, we don’t have to take out the colons (parseFloat() would choke on them). So here’s how it’s done.

time : function(a, b) {
  var o = base.extract(a, b),
      afternoon = /^(.+) PM$/i;
  for (var e in o) {
    o[e] = o[e].split(':');
    var last = o[e].length - 1;

    if(afternoon.test(o[e][last])) {
      o[e][0] = (parseInt(o[e][0]) + 12).toString();
      o[e][last] = o[e][last].replace(afternoon, '\$1');
    }
    if(parseInt(o[e][0]) < 10 && o[e][0].length === 1) {
      o[e][0] = '0' + o[e][0];
    }
    o[e][last] = o[e][last].replace(/^(.+) AM$/i, '\$1');

    o[e] = o[e].join('');
  }
  return base.alpha(o.a, o.b);
}

Let's go through this line by line.

  var o = base.extract(a, b),
      afternoon = /^(.+) PM$/i;

We start with our variables: our extracted values and a regular expression to check for PM label.

  for (var e in o) {
    o[e] = o[e].split(':');
    var last = o[e].length - 1;

    if(afternoon.test(o[e][last])) {
      o[e][0] = (parseInt(o[e][0]) + 12).toString();
      o[e][last] = o[e][last].replace(afternoon, '\$1');
    }

Next, we'll start a for loop, going through each of the values we're sorting; first, we split it into an array at the colons. We create an easy way to get to the last items of the array: our 'last' variable. Then, we test our PM regex on the last item in our array; if it returns true, this value has the PM tag. Therefore, we'll add 12 to the first item in our array, which will be the hour value; we do this because we need all the values to be formatted in 24-hour time. (Note that to do this, we must convert it to a number, add 12, and then turn it back into a string). Finally, we use the PM regex again to remove that label from the last item in the array.

    if(parseInt(o[e][0]) < 10 && o[e][0].length === 1) {
      o[e][0] = '0' + o[e][0];
    }
   o[e][last] = o[e][last].replace(/^(.+) AM$/i, '\$1');

    o[e] = o[e].join('');
}
return base.alpha(o.a, o.b);

In this last chunk, we check the hour value for two conditions: is it less than 10? and does the string have only one character? This is important because a value like 08 will parse as 8 and be less than 10; but we're trying to see if we need to add a zero to the front. If the string has only one character, then we add the zero, so 3 becomes 03. This will keep things in order!

Before joining the array, we remove any AM labels. So now this . . .


  1:15:47
  3:45 PM
  12:00:17
  06:56
  19:39
  4:32 AM
  00:15:36

. . . can be sorted with this . . .

$('ul.time li').datasort({datatype: 'time'});

And we're done! Behold the fruits of our labour:

More Random Values

We've set up our jQuery plugin so that users can pass sorting functions as the datatype parameter. This allows us to easily extend the plugin, although we don't have access to the base 'class' from the plugin call. We can easily write a function to sort psudeo-ratings:

$('ul.rating li').datasort({datatype: function(a, b) {
      var o  = {
      a : $(a).text(),
      b : $(b).text()
      }
      for (var e in o) {
        o[e] = o[e].replace(/poor/i, 0)
                   .replace(/satisfactory/i, 1)
                   .replace(/good/i, 2)
                   .replace(/excellent/i, 3);
      }
      return o.a - o.b;
    }
});

This uses the simplest regular expressions possible to sort a list like this:


  Good
  Excellent
  Poor
  Satisfactory

That's a Wrap!

Now you're in the know: sorting values in JavaScript really isn't as hard as you might have thought. You can imagine this being useful to sort a table, with something like this:

$('table#myTable thead th').toggle(
  function() {
    var $this = $(this);
    $('table#myTable tbody tr').datasort({
      datatype: $this.attr('rel'),
      sortElement: 'td.' + $this.attr('class')
    });
  },
  function() {
    var $this = $(this);
    $('table#myTable tbody tr').datasort({
      datatype: $this.attr('rel'),
      sortElement: 'td.' + $this.attr('class'),
      reverse: true
      });
  }
);

(Try replacing the jQuery code for the table in the first example with this!)

Of course, we could improve this plugin a lot; for example, we could have it check the rel atttribute for a datatype if one isn't given as a parameter, and default to alpha if there is no rel. But that's aside from the sorting.

In sum, to sort with JavaScipt, we follow these steps:

Determine the different formats you want to sort.
Decide what format you want to sort in.
Sort the array of items with the sort() method, passing in a function that will convert the two items to your desired format before comparing them

Have a datatype to add to our plugin? Have a better way of sorting one of these? Let's hear it in the comments!

How to Build a Custom jQuery Tabs Plugin: New Plus Tutorial

Jeffrey Way — Wed, 18 Nov 2009 23:00:14 +0000

In this week’s 45 minute Plus video tutorial, I’ll personally teach you how to build a flexible jQuery tabs plugin. This plugin will automatically create the individual tabs, allow for auto-switching, fading, and plenty more – without being bloated. Why create a tabs plugin when there are plenty of them already available? Because too much abstraction is never a good thing. Become a Plus member.

Join Tuts Plus

For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!

Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.

Build an RSS 2.0 Feed with CodeIgniter

Drazen Mokic — Wed, 18 Nov 2009 19:19:04 +0000

In this tutorial, we will build a RSS 2.0 Feed with the PHP framework CodeIgniter. After this tutorial, you will be able to build a feed for any custom website in no time at all.

Tutorial Details

Program: CodeIgniter PHP Framework
Version: 1.7.1
Difficulty: Easy
Estimated Completion Time: 30 minutes

Step 1: What we Need

First, we’ll take a look at the tools needed to get started. Besides an installation of CodeIgniter, we need a running MySQL database with some content from which we can build our feed.

For this purpose, here are some dummy entries you can import. Create a database called tut_feeds. Then, copy the following code, and import it into your MySQL database.

    CREATE TABLE IF NOT EXISTS `posts` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `title` varchar(120) NOT NULL,
      `text` text NOT NULL,
      `date` date NOT NULL,
      PRIMARY KEY (`id`)
    ) ENGINE=MyISAM;

    INSERT INTO `posts` (`id`, `title`, `text`, `date`) VALUES
    (1, 'Some great article', 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ''Content here, content here'', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ''lorem ipsum'' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).', '2009-08-10'),
    (2, 'Another great article', 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ''Content here, content here'', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ''lorem ipsum'' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).', '2009-08-10'),
    (3, 'News from myfeed', 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ''Content here, content here'', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ''lorem ipsum'' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).', '2009-08-10');

This is how it should appear in phpmyadmin. After you have pasted the code in, press the Ok button on the right side.

If everything works correctly, you should see have something like this:

Step 2: Setting up CodeIgniter

Before we start writing code, we need to configure CodeIgniter.

Browse to your CI folder, and then into system/application/config. We will need to edit the following files:

autoload.php
config.php
database.php
routes.php

Edit the autoload.php like so:

	$autoload['libraries'] = array('database');

This will tell CI to load the database automatically; so we don’t need to load it every time.

Edit the config.php like so:

	$config['base_url'] = "http://localhost/YOUR DIRECTORY";

You need to replace tutorials/ci_feeds with your directory and CI folder.

Edit the database.php like so:

	$db['default']['hostname'] = "localhost"; // your host
    $db['default']['username'] = "root";
    $db['default']['password'] = "";
    $db['default']['database'] = "tut_feeds";

With these settings, we tell CI which database to use. Here you also have to replace hostname, username and
password with your personal database info.

Edit the routes.php like this:

	$route['default_controller'] = "Feed";

The default controller is the “index” controller for your application. Every time you open
localhost/YOUR DIRECTORY, this default controller will be loaded first. We’ll create the feed in the next step.

Step 3: Creating the Feed Controller

In this controller, all the magic happens. Browse to system/application/controllers and create a new file
called feed.php. Next, create the Feed controller and have it extend the parent CI Controller.

	class Feed extends Controller {

      function Feed()
      {
		parent::Controller();
      }
}

If you are already confused please have a look at Jeffrey’s
Easy Development with CodeIgniter tutorial.
After you’ve learned the basics, return to continue this tutorial!

Before the next step, we’ll make use of CI’s great helpers. Load the xml and text helper.

class Feed extends Controller {

      function Feed()
      {
        parent::Controller();

        $this->load->helper('xml');
		$this->load->helper('text');
      }
}

Step 4: Creating the Model

Next, will create a model to receive data from the database. If you don’t know what models are, have a look at the CI
userguide. Browse to system/application/models
and create a file called posts_model.php.

class Posts_model extends Model {

	// get all postings
	function getPosts($limit = NULL)
	{
		return $this->db->get('posts', $limit);
	}
}

We are using active records to receive data
from the database. The first parameter declares the table we want to use and with the second we can set a limit – so we
can tell CI how many records we want to retrieve.

Perhaps you’ve noticed that $limit is set to NULL by default. This makes it possible to set a limit, but you don’t have to.
If you don’t set a second parameter, this function will simply return all records.

Step 5: Back to the Feed Controller

Now that we’ve created our model, we can continue with our feed controller. We’ll load the posts_model that we just created.

class Feed extends Controller {

      function Feed()
      {
        parent::Controller();

        $this->load->helper('xml');
		$this->load->helper('text');
        $this->load->model('posts_model', 'posts');
      }
}

With the second parameter, we assign our model to a different object name – so we have less to type . Now we create the index
method which is the method called by default. Let’s set up some information for the feed view later too.

	function index()
	{
		$data['feed_name'] = 'MyWebsite.com'; // your website
		$data['encoding'] = 'utf-8'; // the encoding
        $data['feed_url'] = 'http://www.MyWebsite.com/feed'; // the url to your feed
        $data['page_description'] = 'What my site is about comes here'; // some description
        $data['page_language'] = 'en-en'; // the language
        $data['creator_email'] = 'mail@me.com'; // your email
        $data['posts'] = $this->posts->getPosts(10);
        header("Content-Type: application/rss+xml"); // important!
	}

While the majority of the information above is easy to understand, we will have a look at two of them.
header(”Content-Type: application/rss+xml”); is a very important part. This tells the browser to parse it as
an RSS Feed. Otherwise the browser will try to parse it as plain text or html.

With $data['posts'] = $this->posts->getPosts(10); we are using our model and are storing all records in the $posts array.
I set the limit to 10; so it will return, at most, 10 records. You can set this value higher or lower if you want. If we leave it
blank, like $data['posts'] = $this->posts->getPosts();, it would return all records.

Finally, we need to load the view which we will create in the next step.

	function index()
	{
		$data['feed_name'] = 'MyWebsite.com';
		$data['encoding'] = 'utf-8'; // the encoding
        $data['feed_url'] = 'http://www.MyWebsite.com/feed';
        $data['page_description'] = 'What my site is about comes here';
        $data['page_language'] = 'en-en';
        $data['creator_email'] = 'mail@me.com';
        $data['posts'] = $this->posts->getPosts(10);
        header("Content-Type: application/rss+xml"); 

        $this->load->view('rss', $data);
	}

Our $data array is passed as the second parameter to the view file, so we can access it in the view.
Your feed controller should now look like this:

class Feed extends Controller {

	function Feed()
	{
		parent::Controller();

		$this->load->helper('xml');
		$this->load->helper('text');
        $this->load->model('posts_model', 'posts');
	}

	function index()
	{
		$data['feed_name'] = 'MyWebsite.com';
		$data['encoding'] = 'utf-8';
        $data['feed_url'] = 'http://www.MyWebsite.com/feed';
        $data['page_description'] = 'What my site is about comes here';
        $data['page_language'] = 'en-en';
        $data['creator_email'] = 'mail@me.com';
        $data['posts'] = $this->posts->getPosts(10);
        header("Content-Type: application/rss+xml");

		$this->load->view('rss', $data);
	}

}

Step 6: Creating the View

Finally we have to create the view file – our output. Browse to system/application/views and crate a file called
rss.php.

First we set the xml version and the encoding within the head.

	' . "\n"; ?>

Followed by some rss meta information.

Now we will access the array $data from the previous step. We can access this data via the array keys, like so:

date; ?>

text, 200); ?> ]]>

20 Email Design Best Practices and Resources for Beginners

Matthew Kirk — Tue, 17 Nov 2009 19:39:24 +0000

Even for experience designers, building email newsletters isn’t easy. You receive a lovely looking design, and you crack on with the development. Unfortunately, it just doesn’t work as it should in every email clients. Styles don’t display, images aren’t visible, etc.

This is where these twenty best practices come in handy.

1: Keep the Design Simple

Emails are not like complex website designs; they should be nicely designed, but somewhat basic. Try basing your designs on a main header image followed by the main content.

The cleaner the design, the easier it will be to code, and the less chance of any abnormalities happening between various browsers and email clients.

2: Use Tables

Email clients live in the past, so all emails must be built using tables for layout. Some CSS styling can be used, but we will discuss this later.

Not Accepted

	
		Header 1
	
	
		Lorem ipsum dolor sit amet.
	f
	
		Sign off and footer

Accepted

	
		
			Header 1
		
		
			Lorem ipsum dolor sit amet.
		
		
			Sign off and footer

3: Have Web Browsers at the Ready

Make sure you have as many web browsers as possible available to you. Who knows who will view your email, and what he or she will be using to view it!

At the very least, use these:

Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
Mozilla Firefox 3
Apple Safari 3
Google Chrome

4: Sign Up for all the Major Email Clients

Google Mail (http://mail.google.com)
Hotmail/Live Mail (http://www.hotmail.com)
Yahoo Mail (http://mail.yahoo.com)
AOL Mail (http://webmail.aol.com)

Please note that they’re are other, more convenient services that can be used instead; however, many of these charge monthly fees. For more information, review Litmusapp.

5: Use Inline Styles

If this were the website world, every developer on the planet would say, "do not use inline styles, create a class for it". Unfortunately, in an email, this is not possible, as the email clients will strip them out, and we don't want that. So if anything needs to be styled, use inline styles.

Elements like font type and size can be used within the

tag, but individual styles should be placed on

Will Work

14: Hotmail Bug Fixes

Over the past couple of years, Microsoft has vastly improved the Hotmail/Live service. But… one huge bug you will come across is the strange padding added to all images. Why do they do this? Who knows? All I know is, there is a wonderfully easy fix.

On every image tag, simply add display:block, as shown above.

15: Encode All Characters

Although we don’t technically have to encode characters, it’s best we do.

When viewing emails in various email clients, we cannot guarantee the charset every website is using, so encoding characters allows us to be certain that all characters are being displayed as they should.

May Work

	"Some sample code - with special characters"

Will Definitely Work

	"Some sample code - with special characters"

16: JavaScript = Junk Email

You cannot, unfortunately, include any type of JavaScript. So no fancy pop-ups or auto-scrolling emails please! If you do decide to include it anyway, your email may be sent to the junk folder. Email clients will see you as a threat. And this is obviously not good. So please stick to plain old HTML.

17: Give the User a Way Out

When sending general newsletters to various clients/customers, although you have a lovely designed and developed email, that user may not want your email (hard to take, I know). Always allow them a way out, by adding an unsubscribe link to the bottom of the email, like so:

If you would like to unsubscribe from this newsletter, simply click here

18: Users Want Options

Some users may be utilizing a very basic email client – maybe they’re checking there webmail at work or on their phones. Images and complex designs may not be best for these types of clients,. Consider, at the top of the email newsletter, having a link which points to the email on a web server somewhere, so the user can view the email in all its glory.

Cannot view this email? View it here

19: Use a spacer.gif

Some browsers (Internet Explorer), don't get on with empty

Will Work

20: Send Tests

This is the most important aspect of email design; sending test emails allows you to view them in all browsers and email clients, looking for any bugs and odd variations.

I have setup a way to allow me to send test, by all means, use mine!

Username: test
Password: nettuts

For more comprehensive testing, use a service like CampaignMonitor or LitmusApp.

Other Helpful Resources

General Email Marketing info:

Email Inspiration:

Services

Email Design Tools

Premium Email Templates

ThemeForest Email Templates

No More Ripping your Hair Out: New Email Templates Category

Jeffrey Way — Tue, 17 Nov 2009 19:39:16 +0000

I’m pleased to announce the launch of our newest category on ThemeForest: email templates! If you happen to be in need of an email client friendly newsletter for your business, we’ve got you covered. For $8 – $10 dollars, you can avoid the hassles of inline styles, email compatibility, and tables! Why rip your hair out when a ten dollar bill can solve the problem?

The Initial Offering

We’ve launched with only a handful of beautiful choices; however, if you don’t find the one you need today, remember that we’ll be adding to this list on a daily basis (hint hint, authors).

Airmail

“Airmail is a professionally built and designed custom HTML email template! Perfect for just about anyone – usable for everything from newsletters to eFlyers to whitepapers.”

Atlantica

“Atlantica Mail is a professionally built and designed custom HTML email template; perfect for just about anyone – usable for everything from newsletters to eFlyers to whitepapers.”

CleanMail

“CleanMail is a simple yet sexy email template package with 5 different color schemes!”

TheClub

“theClub is a darker color two column template geared towards the nightlife! With this template, you get the original CSS as well as the ready-to-mail inline CSS .”

Quantum Email Newsletter

“A modern & clean HTML email template; comes in three colors: green, blue & pink.”

So if you Have a Moment…

Pay a visit to our newest category on ThemeForest, and considering picking up a new template. On the other hand, if you’re an author on ThemeForest – time to create some tables! There’s money to be made!

9 Most Common IE Bugs and How to Fix Them

Siddharth — Mon, 16 Nov 2009 10:30:14 +0000

Internet Explorer – the bane of most web developers’ existence. Up to 60% of your development can be wasted just trying to squash out IE specific bugs which isn’t really a productive use of your time. In this tutorial, you are going to learn about the most common IE bugs and rendering disparities and how to easily squash them or deal with them. Interested? Let’s get started.

1. Centering a Layout

Centering an element is probably something every web developer has to do while creating a layout. The easiest and most versatile way to center an element is to just add margin: auto; to the relevant element. The above method will take care of centering the element irrespective of the resolution and/or browser width. IE 6 in quirks mode however decides to handle this in the most unfortunate way possible: by not handling it at all.

Consider the Following Code:

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px auto;

}

The output you’d expect:

But what IE actually gives you:

This is mainly due to IE6 in quirks mode and below not recognizing the auto value we set to the margin property. Fortunately, this is easily fixed.

The Fix

The easiest and most reliable way to center content for IE6 and below is to apply text-align: center to the parent element and then apply text-align: left to the element to be centered to make sure the text within it is aligned properly.

#container{
	border: solid 1px #000;
	background: #777;
	width: 400px;
	height: 160px;
	margin: 30px 0 0 30px;
	text-align: center;
}

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 100px;
	margin: 30px 0;
    	text-align: left;

}

2. Staircase Effect

Almost every web developer uses lists to create his navigation. Usually, you create the container element, create some links inside and then float the anchors in the direction he wants and calls it a day. Usually. IE though decides to make it a lot more complicated. Peruse through the following code:

ul {
    list-style: none;
}

ul li a {
   	display: block;
   	width: 130px;
	height: 30px;
   	text-align: center;
   	color: #fff;
   	float: left;
	background: #95CFEF;
	border: solid 1px #36F;
	margin: 30px 5px;
}

A standard compliant browser renders it like so:

And the IE screen shot:

Not a particularly pleasing navigation if you ask me. Fortunately, there are 2 fixes you can try.

Fix #1

The easiest way to combat this is to float the li elements themselves instead of the anchor elements. Just add this and you should be done.

ul li {
	float: left;
}

Fix #2

The second way is to apply display: inline to the enclosing li element. In addition to fixing this bug, it also fixes the double margin bug mentioned below. Purists may not like placing block elements inside inline elements though.

ul li {
	display: inline
}

3. Double Margin on Floated Elements

This bug is probably among the first ones a web developer starting out will run into and is specific to Internet Explorer 6 and below. Triggering it is as simple as floating an element and then applying a margin in the direction it has been floated. And voila! The margin will be doubled in the rendered output. Not really something you’d look forward to while creating a pixel perfect layout.

Consider this code:

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
}

On standards compliant browsers, this is how it looks:

But here is how IE 6 decides to render it:

The Fix

The fix for this specific bug is to apply display: inline to the floated element and everything works as it is supposed to. Our previous code now changes to:

#element{
	background: #95CFEF;
	width: 300px;
	height: 100px;
	float: left;
	margin: 30px 0 0 30px;
	border: solid 1px #36F;
   	display: inline;
}

4. Inability to Have Elements with Small Heights

As part of creating a layout, you may need to create elements with very small heights as custom borders for elements. Usually, you’ll just have to add height: XXpx to the style’s declarations and you should be done. Or so you thought. Check the page in IE and you’ll probably do a double take.

As an example, look at the following code:

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;
	margin: 30px 0;
}

And the output is just as expected: A 2 px element with a 1 px border.

And in IE:

Fix #1

The cause of this bug is pretty simple: IE simply refuses to size an element smaller than the set font size. Simply setting the font size to 0 lets you have an element as small and short as you like.

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;
	margin: 30px 0;
    	font-size: 0;
}

Fix #2

The next best way to deal with this bug is to apply overflow: hidden to the element so it collapses to the intended height.

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 2px;
	margin: 30px 0;
    	overflow: hidden
}

5. Auto Overflow and Relatively Positioned Items

This bug rears its ugly head when in a layout you set the parent container’s overflow property to auto and place a relatively positioned item inside it. The relatively positioned item violates its parent element’s boundaries and overflows outside. Let me demonstrate. Look the following code:

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;
	margin: 30px 0;
	overflow: auto;
}

#anotherelement{
	background: #555;
	width: 150px;
	height: 175px;
	position: relative;
	margin: 30px;
}

And the expected output:

And IE’s output:

The Fix

The easiest way to fix this annoying bug is to just position the parent element relatively too.

#element{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 300px;
	height: 150px;
	margin: 30px 0;
	overflow: auto;
    	position: relative;
}

6. Fixing the Broken Box Model

Internet Explorer’s misinterpretation of the box model is perhaps its unforgivable mistake. IE 6 in semi-standards compliant mode sidesteps this but this issue can still be triggered by quirks mode.

Two div elements. One with the fix applied and one without. The difference in the width and height is the sum of the paddings applied on each side.

The Fix

I am sure the quandary with the box model needs neither explanation nor demonstration so I’ll just give you the fix.

The trick is to set the width normally for all standards compliant browsers, target IE5/6 alone and then feed it the corrected width. This is how you’d usually go on about:

#element{
	width: 400px;
    	height: 150px;
	padding: 50px;
}

This now changes to:

#element {
    width: 400px;
    height: 150px;
   \height: 250px;
   \width: 500px
}

Essentially, you add the padding to the original width and feed it to IE 6. The fix targets IE 6 in quirks mode alone so you need not worry about IE 6 in normal mode messing things up.

7. Setting a Minimum Width and Height

Setting an minimum height to an element is absolutely imperative when trying to convert a beautiful design into a pixel perfect design. Unfortunately, IE completely ignores the min-height property instead taking the height declared as the minimum height.

Fix #1

The fix is a hack created by Dustin Diaz. It utilizes the !important declaration to make it work. The snippet looks like so:

#element {
  min-height:150px;
  height:auto !important;
  height:150px;
}

Fix #2

The second way is to take advantage of the fact that IE can’t parse child selectors.

#element {
    min-height: 150px;
    height: 150px;
}

html>body #element {
	height: auto;
}

8. Floated Layout Misbehaving

One of the important concepts of building table-less layouts using CSS is floating elements. In most cases, IE6 handles this with aplomb but in certain cases it fumbles. When faced with unbreakable content or elements whose width exceeds its parent’s width, it causes havoc with the layouts. Let me show you.

Consider this piece of code:


	http://net.tutsplus.com/

#element, #anotherelement{
	background: #95CFEF;
	border: solid 1px #36F;
	width: 100px;
	height: 150px;
	margin: 30px;
	padding: 10px;
	float: left;
}

#container{
	background: #C2DFEF;
	border: solid 1px #36F;
	width: 365px;
	margin: 30px;
	padding: 5px;
	overflow: auto;
}

The expected output as viewed on a standards compliant browser:

In IE:

As you can see, the first div expands itself to fit the content which ultimately breaks the layout.

The Fix

There is no elegant fix for this bug. The only way to save the layout is to apply overflow: hidden to the element but at the cost of clipping the unbreakable content. The layout will be saved but the extra content won’t.

#element{
	background: #C2DFEF;
	border: solid 1px #36F;
	width: 365px;
	margin: 30px;
	padding: 5px;
	overflow: hidden;
}

9. Space Between List Items

IE 6 adds vertical spacing even none is specified in specific cases. Let’s look at the code first.


 Link 1
 Link 2
 Link 3

ul {
	margin:0;
	padding:0;
	list-style:none;
}

li a {
	background: #95CFEF;
	display: block;
}

What it should look like:

What IE gives us:

Fortunately, there are a plethora of fixes you could try.

Fix #1

The easiest way out is to just define a width for the anchor tags and voila! everything renders as it should. Declaring a width triggers the element’s IE specific hasLayout property. You could instead define a height if you want to.

li a {
	background: #95CFEF;
	display: block;
    	width: 200px;
}

Fix #2

The next method is to just float the anchor left and then clearing it.

li a {
	background: #95CFEF;
	float: left;
    	clear: left;
}

Fix #3

The third method is to add display: inline to the enclosing li element. This also fixes the double margin bug as noted above.

li {
	display: inline;
}

Conclusion

And there you have it: the nine most common IE rendering bugs, and how to squash them. Hopefully this has saved you some blood, sweat and tears while debugging your next creation. I’ll be watching the comments section frequently; so chime in here if you are having difficulties implementing the fixes noted here.

Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding!

Review of jQuery Enlightenment – and Free Copies!

Jeffrey Way — Sat, 14 Nov 2009 00:14:56 +0000

jQuery Enlightenment, by Cody Lindley, is a breath of fresh air when it comes to e-books. It’s written by a jQuery team member, each code snippet includes a link to JSBin for live previewing, and – most importantly – there’s no fluff. Ultimately, this means that you’ll learn faster, and more thoroughly.

Update: Winners Announced

Congratulations to the following users who were randomly selected as the winners of jQuery Enlightenment! You’ve all been contacted via Twitter and email with instructions.

Not a Winner?

In that case, Cody has given me a special $5 off discount code, which is valid for the first 300 purchases and expires on November 18th. To use it, visit the jQuery Enlightenment site, click on the “Have a discount code” link, and use the following code: nettuts5bucksoff.

At a Glance

To prove how much I enjoyed reading this book: I received my review copy on a Wednesday, and finished it the next day. As I’m sure many of you are aware, tech books and front to back reads very rarely go well together. This is a testament to the “no fluff” aspect I referenced earlier. Over the course of a dozen chapters, Cody will teach you everything you need to know.

Chapter 1 – Core jQuery
Chapter 2 – Selecting
Chapter 3 – Traversing
Chapter 4 – Manipulation
Chapter 5 – HTML Forms
Chapter 6 – Events
Chapter 7 – jQuery and the web browser
Chapter 8 – Plugins
Chapter 9 – Performance best practices
Chapter 10 – Effects
Chapter 11- AJAX
Chaper 12 – Miscellaneous concepts

Who this Book is for?

While most books on jQuery are primarily focused on introducing the library to new users, jQuery Enlightenment instead assumes you’re at an intermediate level hoping to learn the more advanced tips and techniques. As such, I especially enjoyed the read more than I would have if it was just another crash course style book. Assuming that you’re a regular Nettuts+ reader, it’s more than probable that you have at least a basic understand of jQuery. If so, it’s time to take your skills to the next level; jQuery Enlightenment will take you there.

Though perhaps the most convincing reason to check out Cody’s new book is because he’s an official member of the jQuery team.

JSBin Snippets

Throughout the book, Cody supplies every single code snippet with a respective live preview from JSBin. This may not sound like much; however, it’s incredibly helpful when you can simply click on a link, and immediately be transported to a page which allows you to “toy” with the code. I can’t tell you how vital this is – and, frankly, it’s shocking that more web development e-books haven’t taken advantage of this yet.

About the Author

Cody Lindley is a Christian, husband, son, father, brother, outdoor enthusiast, and client-side engineer. Since 1997 he has been passionate about HTML, CSS, JavaScript, Flash, Interaction Design, Interface Design, and HCI. He is most well known in the jQuery community for the creation of Thickbox, a modal/dialog solution. In 2008 he officially joined the jQuery team as an evangelist. His current focus has been on client-side optimization techniques as well as speaking and writing about jQuery. As of late he is employeed by Ning.com

Free Copies!

Cody has been generous enough to offer a handful of copies to our readers! To enter, simply leave a comment, and check back on Monday (Tuesday for some of you) to see if you’re a winner! Otherwise, if you’d like to purchase the ebook and immediately read it, you can buy it here.

Easy Website Updates with PageLime

Jeffrey Way — Fri, 13 Nov 2009 02:10:53 +0000

PageLime makes the process of editing static websites laughably easy. There are times when a full CMS like WordPress is far too complicated when only simple edits are required – not to mention the fact that a static template must first be modified accordingly to work with WordPress. Wouldn’t it be easier if your current static website could instantly be integrated with a service, without requiring hours of conversion time? This is where PageLime comes in.

In today’s video tutorial, we’ll go through the process of purchasing a site template on ThemeForest, and then integrating that specific template with PageLime, resulting in a website which is super easy to update…even for your mom.

PageLime is a remote Content Management System that allows you to update the content, images, and documents on your web site without installing any software.

The Screencast

Other Viewing Options

What’s in Store for PageLime?

In the CEO’s own words…

Repeating Regions – You/Your clients will be able to have regions that you define as repeatable. This will let you dynamically create new buttons in navigation, blog like article additions, etc. This is in testing now, and will roll out across all sites in the next week!
Multipage Dynamic Content – You will be able to define areas that show up on other places in the website. So when you update them, they update in other places.
Blog – Drop in simple PageLime managed blog.
Client Invoicing – We’re building an invoicing feature from withing PageLime that will let you manage your PageLime clients with auto recurring invoices that link to your PageLime account. This basically allows you to setup a subscription model for you clients, and pass the cost of PageLime directly to them. OR charge them more, and make money off of PageLime! This will be a feature in the Business Account Level.
iPhone App – Manage websites from an iPhone application. This is already designed, just need to go about building it soon. I can send you screenshots if you would like.
eCommerce – Either a partnership with another team, or build one ourselves that can be dropped in, like the blog.

How to Create a Photo Gallery using the Flickr API

Paul Burgess — Thu, 12 Nov 2009 18:22:34 +0000

Flickr is, without doubt, the biggest and best photography website on the internet. There are lots of widgets, badges and plugins which allow you to display your latest Flickr photos on your website, but we’ll take it a step further by tapping straight into Flickr and integrating your photostream into your website, giving you a photo gallery that is a breeze to update.

We’ll be creating this photo gallery using the Flickr API and phpFlickr . If the letters ‘A,P & I’ are enough to strike fear into your heart, don’t worry, we will take it slow and give full code examples that you can copy.

Flickr have also recently launched The App Garden, which is a showcase of tools, toys and sites which use the Flickr API to offer something useful or fun. Once you get to grips with using the API, you can let your imagination conjure up a new way to use it and submit your app.

For this tutorial I am presuming that you already have a Flickr account, and access to a server that runs PHP and PEAR.

The Outline

Get a Flickr API key
Download the phpFlickr files
Build a gallery page to display our thumbnails (with pagination)
Make a photo page to show our photos (with previous and next navigation)

Step 1 – Get a Flickr API key

Your API key is your own unique series of numbers and letters which grant you access to Flickr’s services. Go here: http://www.flickr.com/services/apps/create/apply/

Here you must decide if you are going to use Flickr for commercial or non-commercial purposes. Flickr provide good explanations as to which you should choose, chances are you’ll need a non-commercial API key, which is what I am choosing for this demo.

Follow the steps and fill in all your details.

You should then be presented with your unique key which will appear as a series of random numbers and letters like so:

You’ll also see a number called ‘Secret;’ ignore that for now. For this exercise we only need the key; make a note of it as we’ll need it soon.

If you use the API to build a cool tool or site later on, you might want to submit and feature whatever you build in the Flickr App Garden. You can click on ‘Edit app details’ to fill in the info.

Pay particular attention to the tips and advice given in the API Terms of Use and the Community Guidelines, if you abuse it, you’ll lose it.

Now on to the exciting stuff…

Step 2 – Download phpFlickr

phpFlickr is a project by Dan Coulter. It is a class written in PHP which acts as a wrapper for Flickr’s API. The files process the data provided by Flickr and return arrays in PHP, which we use to display our photos

We need to download the files that we will later include in our webpage, and will do all the complicated work for us. Visit phpflickr.com or skip straight to the download page at Google Code. In this demo, we’ll be using the zip file: phpFlickr-2.3.1 (zip)

Download and unzip it. For this tutorial, we only need the PEAR folder and the phpFlickr.php file. Upload the files to your web directory

Step 3 – Basic Setup and Simple Configuration

Now we have all we need to connect with Flickr and retrieve our photos. We’ll make two pages: one to show our thumbnails and one to show the photo. All of the code will be available as complete pages at the end of the tutorial.

These code examples are all working on the basis that your files are on the root of your server – or all in the same folder. Before anything else, we need to create a cache folder in order for phpFlickr to work properly. Create a folder called ‘cache’ in your web directory and give it writable permissions (CHMOD 777).

Now we’ll build a page that displays our thumbnails and has some simple paging. In the example gallery, this is index.php – and looks like this.

Before we go any further, we need to set two main variables in the config.php file.

Open config.php. You’ll see it’s just asking for two things: your API key and your Flickr username.

First, enter your API key – the long random set of numbers and letters you were given earlier on by Flickr. Keep your info inside the quote marks.

// insert your API key
$key="ENTER YOUR FLICKR API KEY HERE";

Now for your Flickr username; this is not your Yahoo sign-in username or your Flickr screename – but the username you use for Flickr itself. To double check, sign in to Flickr and look at the top of the page where it says ‘Signed in as…’ – that is your username. So let’s declare our username as a variable:

// enter your Flickr username
$username="YOUR FLICKR USERNAME HERE";

Save the changes to config.php and upload – you shouldn’t need that file again.

Step 4 – Building the Thumbnails Page

On to the page itself. Here’s a breakdown of what we are doing at the top of the page, which cues up everything ready for the action:

We are going to include some Previous and Next links with a small bit of code further down the page. The thumbnails we are going to show depend on what page we are on, so we run a simple if statement which will grab our page number. If there’s a ‘fpage’ query in the url, use that. If not, we are on page one.

Next we include the core phpFlickr file that has everything we need in it communicate with Flickr.

// inclue the core file
  require_once('phpFlickr.php');

Now we fire up a new class from the phpFlickr file using our API key that we got earlier.

// Fire up the main phpFlickr class
$f = new phpFlickr($key);

phpFlickr uses caching to speed the process up. There are options of using a database technique but for this tutorial we will use the simpler cache folder option. We need a folder called ‘cache’ that is writable, meaning that the system has access to it and can alter its contents. To do this set the folders’ permissions to 777 via your FTP program. Then we add this line to enable it:

$f->enableCache("fs", "cache");

We call the people_findByUsername method which returns an array:

$result = $f->people_findByUsername($username);

From that array, we also need your unique user id (your Flickr id that look like this: 11221312@N00, declared here as $nsid) which we get like so:

// grab our unique user id from the $result array
  $nsid = $result["id"];

Next, we call the people_getPublicPhotos method, which again returns an array that we will call $photos. In this line, we are also passing through our id which we got in the line above ($nsid). NULL refers to the ‘extras’ option which we’re not concerned with right now. We are also stating the number of thumbnails we want to display (21), and are passing through the page to start on ($page) which relates back to the $page variable from the top of the page:

 $photos = $f->people_getPublicPhotos($nsid, NULL, NULL, 21, $page);

The last bit we need to set the page up is a little bit of info we need for the paging to work. We access the $photos array we created above, and pull out the the total number of pages, plus the total amount of photos in our photostream:

$pages = $photos[photos][pages]; // returns total number of pages
  $total = $photos[photos][total]; // returns how many photos there are in total
  ?>

Notice we’re closing the php section off here with the ?> Now we have all we need to get the first 21 thumbnails from our Flickr photostream and display them. We’ll carry on with the page now, adding some html, using PHP to show the images, and include some simple paging links. So let’s start by writing some basic html.

 



Nettuts Flickr Gallery Demo




My photo gallery

Nothing out of the ordinary here; just setting up the html and starting an area for the thumbnails. The next step is to fill our div called ‘thumbs’ with our thumbnails like so:

Note we’re opening php again with

We’ll use a foreach loop to run through the $photos array and to get to the photo element ($photo), which holds the info we need for the thumbnails.
See the comments in the code for an explanation of what’s going on:

";
   
// This next line uses buildPhotoURL to construct the location of our image, and we want the 'Square' size
// It also gives the image an alt attribute of the photo's title
       echo "buildPhotoURL($photo, "Square") .  "\" width=\"75\" height=\"75\" alt=\"$photo[title]\" />";

// close link 
      echo "";

// end loop
}
?>

We’re almost done with the main page. Chances are, you have more than 21 photos in your Photostream; so we’ll need to add some paging with some Previous and Next links so we can move to the next 21 thumbnails. The links look like this:

This code relies on the line we had at the top calling the $page variable. When our code calls in the photos from Flickr, it also uses the $page variable to know where to start – look back at the line where we called ‘people_getPublicPhotos’ and you’ll see that we passed in the $page variable there as well. That value is the backbone of this little paging arrangement. We’ll open a paragraph with the id of ‘nav’, open up the PHP tags, and define our ‘back’ and ‘next’ variables:

Next we handle the actual ‘Previous’ and ‘Next’ links by checking that we’re not on the first or last page, the close off php and close the ‘p’ tag.

// if it's not the first page
if($page > 1) {
echo "« Prev";
}
// if not last page
if($page != $pages) {
echo "Next »";}
?>

Now we refer back to some values we had at the beginning to display a little more about where we are in the gallery:

Page $page of $pages";
echo"$total photos in the gallery";
?>

And to abide by Flickr’s terms and finish the page off, we’ll add:

This product uses the Flickr API but is not endorsed or certified by Flickr.

That’s everything we need to produce a page that displays the latest 21 photos as thumbnails with a simple Prev / Next navigation. Just like the homepage on the demo. Next up: the page that displays our photo.

Step 5 – Build a Page to Display Single Photos

Now that we have our thumbnails, we need a page to show the full image when one is clicked on. Here is the code for photo.php, which the thumbnails link. We start this page similarly to the index page, but instead of the page number, we want the id of the photo which has been passed in the url from our thumbnail page:

enableCache("fs", "cache");

Now we need to gather some info from Flickr about the photo such as the photo’s id number, its dimensions, where it sits in relation to other photos (context) and the url of the image.

// access the getInfo method, passing in the photo's id
$photo = $f->photos_getInfo("$id", $secret = NULL);

// pass the photo's id to the getSizes method to get the dimensions of our image
$photosize = $f->photos_getSizes("$id", $secret = NULL);

// we want the dimensions of the medium size which we get from the $photosize array in the previous line
$size = $photosize[3];

// again passing the photo's id through we get the context, which tells us which photos are before and after the current id
$context = $f->photos_getContext("$id");

//  the buildPhotoURL method does pretty much what you'd expect - build the  photo URL, we pass in $photo and the size we require to return the  image URL e.g.  http://farm4.static.flickr.com/3108/3175330082_0bf4b22e47.jpg
$photoUrl = $f->buildPhotoURL($photo, "Medium");

// This tells us who the owner of the photo is.
// This is an important part to include as we want our gallery to show  only our photos and not pull in other users' photos - more of an  explanation about this in the notes at the end
$owner = $photo["owner"]["username"];

// We only want the photo if it belongs to us - so if our username  is the same as the owner of the photo... we'll write out the page and  show it
// more info on this at the end of the tutorial
if($username == $owner){
?>

Now we are primed for the rest of the page with the juicy bits.







<?php
// We access the $photo array and grab the title of the photo to use as the document title
echo $photo[title]
 ?>






Photo gallery


$photo[title]";

// The photo itself, you'll recognise $photoUrl from above where we  built the photo's url, we are also accessing the $size array that we  prepared earlier to get the width and height
// and the title once again
// We'll also make it link to the version on Flickr for good measure
echo"";
echo"";
echo"";

// The photo's description
echo"$photo[description]";
?>

Now we have our photo… and we are almost done. This last bit may look a bit tricky but don’t be put off by it. It has to do with the photo’s context, as in, which photo comes next in the stream and which one was previous to it. Just like you see on people’s Flickr galleries. The reason there seems a lot of code is because for this to work best, we have to check to see if there is a photo before or after the current photo. If there isn’t, we don’t want a link, instead we insert normal text and a dummy image (noimg.png).


";

} else {
// if not - show the blank filler image
echo"";
};

// if there is a next photo...
if($context['nextphoto']['id']){echo "";
} else {
// if not - show the blank filler image
echo"";
};

echo"";

echo"";
// if there is a previous link, write a link - if not, just the text
if($context['prevphoto']['id']){echo"« Prev";}  else {echo"« Prev";};
echo" | ";
// if there is a next link, write a link - if not, just the text
if($context['nextphoto']['id']){echo"Next  »";}else {echo"Next »";};
echo"";
?>

And to finish the page off, we’ll include a link back to the main gallery, a bit of text for Flickr and close off the html.

« Main gallery

This product uses the Flickr API but is not endorsed or certified by Flickr.

Hold up! One more thing… we finish the if statement from just before the html began… again, see the notes at the end about why we do this.

And there you have it. A photo gallery for your website, powered by your Flickr account. Take a look at the demo page to review how it looks with a bit of extra markup and styling added. This is a very basic implementation of the Flickr API; it just scratches the surface of what you can do, but it does provides a nice photo gallery for your site/blog which you can easily update and maintain via Flickr.

NOTES & EXTRAS

In this tutorial we are retrieving a user’s public photos. Within photo.php, we reference $owner in this tutorial. At this point we are ensuring that the photo displayed belongs to the owner of the photograph. If we leave this out, your photo page can pull in any user’s public photo, and that is obviously not what we want. This goes back to the advice Flickr provides in their guidelines.

You should use the API to access your own images only or those which you have permission to use. If you display someone else’s pictures, you should mention the name of image owner and name of the image. Flickr also say "…pages on other web sites that display content hosted on flickr.com must provide a link from each photo or video back to its page on Flickr.”
There are other ways to display your photos using the search method in the API, but it is a bit more complicated and requires you to provide authentication – in other words, use the API to log in and let Flickr know it really is you – more info on that can be found here.
This demo is a very simple example of what you can do with the Flickr API. You can take it much further and in fact do pretty much everything Flickr does: get photo sets, show tags and comments, display private photos, even upload images. Take a look at the API documentation here: http://www.flickr.com/services/api/ You can cross check the methods against the phpFlickr.php file.
Just as we called in our photos using $photos = $f->people_getPublicPhotos($nsid, NULL, 21, $page); you can do the same with a set. For example, $photos = $f->photosets_getPhotos(”$set”, $extras, $privacyfilter, 21, $page); is a way to get 21 photos per page from a set, where $set = the set id (something like 72157594488289220), then using foreach ($photos['photo'] as $photo) {… to get the images etc.
If you need to see which part of the array you need, you can use print_r() to list out the array and see how to find to the value you need. Surround it with
```
 tags to make the output legible.
```
The file paths in this demo all work on the assumption that everything is in the same folder (or all on the root) – feel free to move stuff about but be sure to change the paths
Huge thanks to Dan Coulter for wrting the excellent phpFlickr. Be sure to take a look around the phpFlickr documentation: http://phpflickr.com/docs/ for more tips and advice on taking things further

Have fun, and show us what you come up with!

's.

6: Give all Images Alt Tags

This is a very important step to take, but is often forgotten by many. Styling the

for which images are in, with font types, size and color, will allow for your email to degrade gracefully when images are off by default.

No Alt Tags

Alt Tags

7: Do not Set Widths or Heights to Images

Again, this is a further step to take in order for a lovely gracefully degraded email. If images are off by default, there dimensions will be present, leaving a lot of unnecessary white space throughout.

8: Wrap the Email in a 100% Width Table

Email clients only take the code within the body tags, not the body tags themselves. In order to use a background color, you must create a 100% width table to "fake" the background effect.

	
		
			
				
					
						Lorem ipsum dolor sit amet.

9: No Wider than 600px

Many people don't actually open their email; they instead view them in the preview panel. On average the smallest preview panel is around 600px, so always design your emails accordingly, unless you don't want your full email viewable in the preview panel, of course.

10: Link Styling

Don’t forget to style the tag. This will overwrite the email client's standard link tags.

	Link

11: Try not to Nest Tables

Apart from the 100% width wrap table, you should try your best not to nest additional tables. This is easily avoidable; use the stacking system instead.

This allows for a much easier, controllable email.

Avoid

	
		
			
				
					
						Lorem ipsum dolor sit amet.
					
				
			
		
		
			
				
					
						Lorem ipsum dolor sit amet.

Use

	
		
			Lorem ipsum dolor sit amet.
		
	
	
		
			Lorem ipsum dolor sit amet.

12: Avoid Background Images

Stick to block colors rather than images for the backgrounds for your text; only use funky gradients, images, etc. when no text is involved.

13: Borders don't Work

Within emails, we don't have much room for browser or email clients specific fixes, so when we have borders that can either sit outside or inside the

or be included or excluded from the

width, there's not much we can do.

The fix? Drop two extra

's to either side of the main

, and set the background color in each one. This will again "fake" the look of a border and work in all browsers and email clients.

Won’t Work

Lorem ipsum

Lorem ipsum dolor sit amet.

's. Even if the

is set to 10px in width. IE will ignore this and set it to 0.

The fix is to add a transparent GIF, and set this to 10px wide. This then provides you with something to put within the

, thus fixing IE's issues with having empty

's.

Won’t Work

Lorem ipsum dolor sit amet