The pictures are presented in the mark-up that flickr creates, and I used the styling that came with the template I was working from. It creates a simple two by two square of photos, with a slight gap in between them.

Although I like the way they are presented, I’m not sure I like the mark-up that flickr creates. What would be the simplest, semantic way to mark-up and style images in a small album like this?

Semantic Mark-up: An Unordered List

Flickr places all of the photos in divs. These are then styled to float next to each other or appear however you like.

In my opinion, the most semantic way to mark-up photos like this would be to create an unordered list. A photo album is essentially a list of photos.

This could be an ordered list if the photos were intended to be sequential – like a photo essay or a comic book – but the average photo album is just a collection of pictures.

The mark-up would look something like this.

<ul id="images">
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
  <li><img src="http://farm4.static.flickr.com/3047/2362739858_c82b4de7c2_s.jpg" /></li>
</ul>

The images would then be displayed in a long, vertical list.

Styling – Making the List Inline

In the end, we’d like to have the images sit side by side. Ideally, they’d form a rectangle of either 2 x 3 pictures, or 3 x 2.

The first thing we want to do, then, is remove the list style type, clear the padding/margins of the list, and make the images appear next to each other. The last bit we can achieve by giving the list items the “display: inline” css declaration.

#images {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
 
#images li {
  display: inline;
}

This would create a simple horizontal list, like this…

Width: Restricting the Number of Columns

Notice how the list terminates at the end of its container div and continues on a second line?

Without a width declaration, the unordered list expands as large as wide as it can. When that width limit is hit, it starts a second line, and continues until all of the list items have been displayed.

We can use this to our advantage by setting a width declaration. This allows us to limit the number of images to be displayed in each row.

If our images are 75px square, and we want to display three images across, we can set our width to be about 250px. The extra space can be used later for paddings and margins – but the images will appear left justified within the list container.

#images {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 250px;
}
 
#images li {
  display: inline;
}

This would create a list like this…

Finishing Touches: Padding and Borders

With the basic structure complete, we can add a few finishing touches.

First, we might we to add a little padding to the images. This would space them out a few pixels from each other so that they don’t appear so cramped.

#image img {
  padding: 4px;
}

Adding this line to the css file would change the image album to this.

Finally, a cool effect for images is to add a border around the image. If you include a padding value for the img tag, the border is placed 2-3 pixels away from the edge of the picture. It gives a nice framing effect.

#image img {
  padding: 2px;
  margin: 2px;
  border: thin solid black;
}

This final change would look something like this.

By using an unordered list to mark-up your image collection, you end up with semantically correct and simple to style content. Much better, in my opinion, than a string of divs.

One of the greatest features is the thousands of plug-ins available for WordPress. You can find a plug-in for just about anything you want to do – or if you have some PHP know-how, you can develop your own.

Here are five basic WordPress plug-ins that I’d recommend using for any project you start.

Akismet – Spam Protection

This plug-in comes pre-installed with WordPress – and there’s absolutely no reason you shouldn’t use it. All In One SEO Plug-In is just what it sounds like. It adds some extra functionality to tweak the SEO of each of your posts and pages.

For example, All In One will automatically generate a description meta tag based on your excerpt and it will automatically generate keywords based on your tags. You can also use this to modify the title element of each page. I’d say it’s a must have for optimizing your website.

Exec-PHP

Early on, I was looking for a way to execute PHP code inside a post. WordPress doesn’t have built-in support for this, so you need to find a plug in to do it.

There are dozens of plug-ins that attempted to implement this feature. Exec PHP is hands down the best that I’ve found. You simply add regular PHP tags to your post and the PHP code will be executed properly. I’ve never run into any bugs while using the plug-in, unlike some other plug-ins I’ve tested.

Per Post CSS and JS

Per Post CSS and JS allows you to attach individual stylesheets or javascript files to your posts or pages. This is great for changing the look of a specific page without creating an entirely new template. By attaching these files to individual posts, you cut down a lot on redundancy.

For example, let’s say you wrote a javascript file that you use in 10% of your posts. Why should it be attached to the other 90% of your posts?

I’ve also found it very useful for creating HTML/CSS/JS tutorials. I can place my sample code in external .css and .js files and have it attached properly to the page. This way I don’t have to write in-line styles to demonstrate functionality.

WP Unformatted

This simple plug-in removes all of the auto-formatting that WordPress adds to your posts. With WP Unformatted, you can add a custom field to your post to tell the plug-in to strip out all of that formatting.

For example, WordPress likes to wrap text in <p> tags. Sometimes – like with forms – this is entirely undesirable. It can mess up your carefully formatted (and syntactically correct) HTML.

By using WP Unformatted, you can add sophisticated mark up to your post content without worrying that WordPress will screw it up with random <p> and <br /> tags.

And Many More…

There are, of course, dozens of other useful plug-ins. I’ve used plenty of other plug-ins that I liked. However, these are the ones that I feel appeal to the widest audience.

No matter what you’re doing, you’ll probably find a use for spam filtering, individualized stylesheets, SEO, PHP, and clean formatting. I would never start another project without these plug-ins.

What else do you find useful?

Uploading the images and creating the album was easy. However, I noticed that the code Google creates to embed the slideshow (a flash file) is not standards compliant – it uses the <embed> tag.

How can we convert this code to a standards compliant version?

The Original Picasa Embed Code

The code that Google generates to embed the flash file uses the embed element. The embed tag includes all of the pertinent information – the swf file, the height, the width, and the parameters.

<embed type="application/x-shockwave-flash"
  src="http://picasaweb.google.com/s/c/bin/slideshow.swf"
  width="288" height="192"
  flashvars="host=picasaweb.google.com&RGB=0x000000&feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fslowwalkere%2Falbumid%2F5178325186511467969%3Fkind%3Dphoto%26alt%3Drss"
  pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>

The problem here is that the code uses the embed tag. This is no longer recognized as a valid html element – although it still functions in most browsers.

Converting Embed to Object

We can, however, convert this embed element into an object element. The object element is standards compliant, and with a few parameters it is compatible across most browsers.

To do this, let’s identify the information that we’ll need from the original Picasa code.

Obviously, we’ll need the flash file. This is the value of the “src=” attribute. We’ll also need the height and width, which are pretty obvious. Finally, we’ll need the parameters to be passed to the flash movie – located in the flashvars parameter.

Here’s what an object element might look like to display a flash movie.

<object type="application/x-shockwave-flash"
  data="flash-file.swf" height="400" width="400">
  <param name="movie" value="flash-file.swf" />
</object>

We create the object and give it the attribute type="application/x-shockwave-flash". This tells the browser it is a flash movie.

We pass the name of the flash file with the data attribute and the “movie” param element – notice that the filename is passed twice here.

Finally, we pass the height and width parameters as attributes to the object element.

Filling Out the Object

Now we can take the values provided for us by Google and create a new, valid object to display the flash slideshow.

The only extra thing we need to know is that we can send another param element – name=”flashVars” – to contain the flash parameters.

<object type="application/x-shockwave-flash"
  data="http://picasaweb.google.com/s/c/bin/slideshow.swf"
  width="288" height="192">
  <param name="movie" value="http://picasaweb.google.com/s/c/bin/slideshow.swf" />
  <param name="flashVars" value="host=picasaweb.google.com&amp;RGB=0x000000&amp;feed=http%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2Fslowwalkere%2Falbumid%2F5178325186511467969%3Fkind%3Dphoto%26alt%3Drss" />
</object>

This should do the trick and display our Flash slideshow in a standards compliant way. You should also be able to apply this to any other widget that displays a flash movie.

Also, here are two minor things to keep in mind.

The param elements are self closing – i.e. <param />. The param element doesn’t contain any text, so it must be self closing to be standards compliant.

The flashVars value is constructed as a query string. It utilizes ampersands (&) to separate key/value pairs. Ampersands are a standards no-no – they should be escaped as an html entity (&).

WordPress templates have a decent amount of simple PHP mixed in, and you need to utilize a special file structure for the template to operate correctly. Before you dive into making a WordPress template, let’s look at the basic structure of a WordPress template compared to a normal website template.

Example Basic Website Template

A typical website consists of a few parts – the content, a header, and a footer. You may also have a sidebar for navigation and/or a horizontal menu bar. The typical markup for this type of template would look something like this.

<body>
<div id="header">
  ...  Header Stuff Here ...
</div>
<div id="content">
  ...  Main Content Here ...
</div>
<div id="sidebar">
  ...  This floats to a side ...
</div>
<div id="footer">
  ...  Footer Stuff Here ...
</div>

If you’ve learned some PHP, then you can include a series of PHP files to create your webpage template. Chances are your header, footer, and sidebar are the same for all or most of your pages – so it makes sense to create them one time each.

<?php include('header.php'); ?>
 
<div id="content">
  ...  Main Content Here ...
</div>
 
<?php include('sidebar.php'); ?>
 
<?php include('footer.php'); ?>

Nothing too complicated here. Just a simple, barebones template.

What Does a WordPress Template File Look Like?

Although the terminology is a bit different, a WordPress template has the same basic structure. Let’s look at a pared down version of the default template’s index.php file.

<?php get_header(); ?>
 
<div id="content" class="narrowcolumn">
  <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
      ... Post Info ...
    </div>
    <?php endwhile; ?>
  <?php endif; ?>
</div>
 
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

The bulk of the action here is in the “content” div. With PHP, WordPress checks to see if any posts were retrieved from the database. If they are, then it loops through the posts and outputs each one.

“Post Info” would be replaced by the markup you want to use for the actual post headings, information, and content.

The PHP function calls are similar to the include() calls in the earlier template. get_header() fetches the standard header info, get_sidebar() fetches the sidebar, and get_footer() fetches the footer. But where does WordPress find this information?

Special WordPress Template Files

WordPress uses some standard tempalte files to make these functions work.

For example, get_header() looks for the header.php file. It’s more or less a proxy call for include(‘header.php’). To make WordPress work properly, therefore, you should include all of your header information in header.php.

The same goes for get_footer() and footer.php as well as get_sidebar() and sidebar.php.

So, to begin designing a WordPress template or to convert a regular website template to a WordPress template, you need to worry about four basic files:

• header.php – the header div and information
• footer.php – the footer div and information
• sidebar.php – the sidebar div and information
• index.php – calls get_header(), get_footer(), and get_sidebar(), and contains the content div

There are some other special files as well, but this is enough to get started. Once you understand the basic structure of the template, you can look into customizing the information that is displayed for each post.

There are some steps you can take later on to protect your applications from this unknown input. But first, let’s take a look at why you can never trust a user’s input and just how easy it is for someone to spoof a form.

What Does It Mean to Spoof a Form?

It could mean a number of related things, but generally speaking it means submitting form information in a manner other than the original form was intended. The form processing script, completely unaware of the situation, processes the input as if it came from the original form.

For example, if a form generates a URL query string, one way to spoof that form would be to modify the query string and re-visit the URL. The new page would think that my query came from the original form – even though I really crafted the query myself.

Why would someone want to do this? It may be curiosity. “I wonder what happens if I change this variable…” Or it may be malicious. A hacker can spoof a form processing script to send dangerous input to your PHP script.

The Problem With the “Get” Method

It is easiest to spoof a form if the information is transmitted through the “Get” method. This means that the variables are placed into a query string and appended to the form’s action URL.

Let’s say you have a form with three elements – a textarea element, a hidden input, and a select element. Logically, you might think that the hidden input is restricted to whatever value you set it to and the select element is restricted to one of the options you provided.

To make this a little more concrete, let’s assume the textarea contains a post to a multi-user blog, the hidden input contains the author’s name, and the select element includes the category number.

When the user enters the values and clicks “submit,” he’s sent to a URL that looks something like this.

processing.php?text=Bla+bla+bla&author=Walkere&catid=2

What if I wanted to pretend to be someone else – like Bob? I could simply change the ‘author’ variable.

processing.php?text=Bla+bla+bla&author=Bob&catid=2

Maybe I want to post my message in a special category – one that isn’t normally open to me. Again, it’s as simple as changing the catid variable to another number.

Now, a well designed script will notice these data flukes and either ignore them or spit out an error. However, if you have too much faith in form input – and you blindly used the values from your form – you’d soon be in a mess of trouble.

But Post Is More Secure… Right?

The “Post” method is somewhat more secure. Why? Because all of the information is transmitted behind the scenes.

When I was younger, I tried to meddle with the $_GET variables of an online game that I played. I never would have known enough about the workings of the script to spoof a “post” form – but it was so blatantly obvious with “get.”

However, someone “in the know” can easily spoof a form using the post method as well. One way to do this is… write your own form.

If I look at the HTML source of your form, I can easily see what values you’re submitting to the processing script. I can recreate those input elements on a form on my site – and then set the action to your processing script.

In this way, I could make the hidden and select statements regular text inputs – and input whatever values I want. If you’re form processing script isn’t savvy, my custom values will get passed on to the database.

One thing you can do to prevent this is to check the referring URL coming into your script. This will prevent someone from simply creating a form off-site to spoof your script.

Sending an Actual HTTP Request

The final, and most devious way, to spoof a form is to craft your own HTTP request in PHP. This is essentially what a form does – but you can manually craft the request to your liking instead of letting a form do it.

How do we do this?

First, we create a stream context. To do that we create a simple array and then call the function stream_context_create.

$params = array();
$params['http']['method'] = 'post';
$params['http']['headers'] = 'Referer: http://www.google.com';
$params['http']['content'] = $data; // A regular query string with parameters
 
$context = stream_context_create($params);
 
$fp = fopen($processingUrl, 'r', false, $context);
fpassthru($fp);
fclose($fp);

The actual form values are placed in the $data variable. This is in a typical query string format – key=var&key2=var2, etc. The values should also be url encoded.

The nifty thing here is that you can manually specify HTTP headers to be sent with your request. In this example, we set the referring URL to Google. If someone knew your processing script checked the referrer’s address – they could simply spoof it with an HTTP header.

Never Trust Input

The bottom line is – never trust input that you haven’t thoroughly tested, validated, and cleaned.

Even if an input item is supposed to be hidden or supposed to come from a specific set of values – you can’t be sure that the form processing script is going to receive the correct value. The script needs to check the info and make sure that it got what it was looking for.

It’s pretty simple for someone to spoof your form and send any input they like to your processing script. If you don’t close the security holes, then someone will eventually blow them open for you.

In this post, we’ll explore the code used to set up this board. Once that’s done, the next step will be to create a php script to evaluate some of the game’s logic.

Recap: The Game Board Concept

First, let’s take a step back and recap our Javascript game board concept.

The basic building block of our game board is a div element. This div element is styled with a CSS stylesheet – 50px by 50px. By using floats and clearss strategically, we can stack 9 of these div elements into a 3×3 box.

Javascript is added to make these boxes functional. An “onClick” handler is used to call a Javascript function that changes the background image of the div. This effectively marks the square as either a “Circle” or “Cross” for Tic Tac Toe.

To alter the div – and also to add textual output – we’ll be using Javascript’s powerful DOM functions. These allow us to grab a specific element by it’s ID and change it.

Creating Graphics

I created two images in Inkscape to use for this board. Each is a 50×50 png file – with a gray background and a black border. The actual token (the circle or cross) is red and laid on top of the gray background.

I’m no great artist, but these should work for a functional demo. We can worry about making nice circle and cross tokens later. I think getting the game working is more important than making it pretty from the get-go.

Turning Our .js Script into a Class

In making this a functional board, I also converted the script into an actual class. The script may end up being somewhat large and unwieldy – and an object oriented approach may help us keep it tidy and clean. Or it may add a lot of overhead… but I like objects.

In our HTML file, we’ll create the object like this.

<script type="text/javascript">
var tictactoe = new game();
</script>

In the attached .js file, we actually define the game object. Here’s part of the object definition.

function game() {
  //  Array to hold the bgImgs
  this.bgImgs = new Array();
    this.bgImgs[0] = 'tttcircle.png';
    this.bgImgs[1] = 'tttcross.png';
 
  //  Player information			
  this.currentPlayer = 0;
  this.players = new Array();
    this.players[0] = "Player One";
    this.players[1] = "Player Two";
 
   return true;

This class constructor does some of the initialization for us.

First, it creates an array with background images. At the moment we’re only using two images. However, this technique would be useful if you had a more complex map – with 10-15 images you could lay over a div.

Second, we create some player information variables. The ‘currentPlayer’ property is going to track whether the ‘cross’ or ‘circle’ player is currently taking a turn. The ‘players’ array will just hold the names of those players for now.

The Background Image Changing Function

One of the major methods of this class will be changeBackground(). Just like in the previous example, this method will change the background style of a given div tag. This way we can change it from an open square to a circle or cross token.

  this.changeBackground = function (boxId) {
    var box = document.getElementById('box-' + boxId);
    box.style.background = 'transparent url(' + 
      this.bgImgs[this.currentPlayer] + ') top left no-repeat';
 
    box.removeAttribute('onClick');
 
    this.changePlayer();
  }

This should be pretty straightforward. We’re storing the ‘div’ element in the ‘box’ variable. We’re then setting the ‘background’ style as we would in a css style. Remember that we stored the background images in an array (this.bgImgs) and this.currentPlayer corresponds to a key in the this.bgImgs array (either 0 or 1).

The ‘box.removeAttribute()’ method is removing ‘onClick’ from that div. We can’t use a square a second time, so we might as well eliminate the onClick handler altogether.

Finally, this.changePlayer() is calling a new method. This is going to help us switch from Player One’s turn to Player Two’s turn.

One Turn to Another – this.changePlayer()

The last method we need to declare for this class at the moment is changePlayer.

This will toggle the active player – which in turn affects whether a circle or cross is placed on the board. For some added effect, we’ll also create a new html element to display a message that says who’s turn it is.

  this.changePlayer = function () {
    //  Switch the active player
    if (this.currentPlayer == 0) {
      this.currentPlayer = 1;
    } else {
      this.currentPlayer = 0;
    }
 
    //  Get a reference to our 'message' element and create the message
    var box = document.getElementById('message');
    var msg = "It is " + this.players[this.currentPlayer] + "'s turn.";
    var txt = document.createTextNode(msg);
 
    //  Erase any existing text
    while (box.hasChildNodes()) {
      box.removeChild(box.lastChild);
    }
 
    //  Add the text node (our message) to our element
    box.appendChild(txt);
  }

Again, this is pretty straightforward. The DOM functions are amazingly simple – once you see how they work.

‘box’ is a reference to our element (id = message). The msg variable is a temp variable I created to hold the string. The ‘createTextNode’ method creates a new block of text (with our msg) that we can then insert into an HTML element.

The while() loop is simply there to erase any old text. As long as our ‘box’ element has any child nodes inside of it (text or other HTML tags), the loop will execute and delete one of those child nodes each time. This way we have a clean slate on which to write down who’s turn it is.

Seeing It In Action

Well, that’s really all there is to it. Have a look at this functioning demo. If you had trouble piecing together the example code, you can download the source files (.js, .css, and two .png) from the list below.

Good luck, and be sure to check back soon. Our next task is going to be a real challenge. We need to add some logic to this game – evaluating victoary conditions and creating AI!

Source code files:

• Basic Tic-Tac-Toe JS File
• Tic-Tac-Toe CSS File (#2)
• Tic Tac Toe Cross Image
• Tic Tac Toe Circle Image

How do we do that? Some pretty simple PHP can help you accomplish this task and spice up your HTML/CSS.

Look At the HTML/CSS

Before we start making things dynamic, let’s look at the basic HTML.

Let’s say we want to make a list of items – in a table – maybe a list of emails. The end result should be a table with alternating background colors for rows – white and light blue.

If we were to create this table by hand, it might look something like this.

<table>
<tr class="blue"><td>E-mail subject</td><td>Sender</td></tr>
<tr class="white"><td>E-mail subject</td><td>Sender</td></tr>
</table>

This assumes that we have a CSS class defined as “blue” with a blue background and “white” with a white background.

Adding Some PHP to Assign Classes

We’re setting the background color by adding a class declaration to the table row. The first step in making this dynamic is to use PHP to echo the class. Like this…

<tr class="<?php echo 'blue'; ?>"><td> ... </td></tr>

We’ve taken the same table row element from before and replaced “blue” with a php snippet that echos the same phrase, “blue.” The end result is the same HTML that we created in the first example.

Dynamically Choosing the Class

The final step in making this dynamic is to add a conditional statement to the PHP block. For example, let’s say we’re executing a loop 5 times. On the odd iterations (1, 3, 5) we’ll use “blue” as the class. On the even iterations (2, 4), we’ll use “white.”

To test whether or not a number is odd, you can use the modulus (%) operator. This returns the remainder of a division – so 2 % 3 = 1. With a little basic math theory, we know that if a number is divided by 2 and has no remainder it’s even – but if there’s a remainder of 1 it’s odd.

Here’s what the loop might look like.

<?php for ($x = 1; $x < 6; $x++) { ?>
   <tr class="<?php
      if ($x % 2 == 1) { echo "blue"; }
      else { echo "white"; }
      ?>"><td> ... </td></tr>
<?php } ?>

That If Statement Is Kind of Long…

Well, we can shorten that up. This is a great place to use the obscure and un-readable ternary operator in PHP. It’s a shortcut that allows you to write a simple if-statement in one line.

For example…

echo (true ? "Yes" : "No");

The ternary operator takes three parts – the conditional statement (in this case I just wrote true), a value to return if the statement is true (“Yes”), and a value to return if the statement is false (“No”). I echo’ed the result just so you could see what the statement outputs (in this case, “Yes”).

We turn our previous if statement into a ternary operator statement and shorten up that code block quite a bit. Like so…

<?php for ($x = 1; $x < 6; $x++) { ?>
   <tr class="<?php echo ($x % 2 == 1 ? "blue" : "white"); ?>"><td> ... </td></tr>
<?php } ?>

Creating these table rows is just one example of how you can use PHP to help spice up your HTML. With this concept, you can dynamically alternate styles based on a bunch of factors.

How else could you use this?

You could alternate the background colors of comments in your blog template. You could include a bottom-border after every five rows in your table. You could make a calendar module and display Saturday and Sunday in boldface.

The options are really endless – so long as you understand the basic principal.

You can use attribute selectors to style an html element that contains an attribute with the value that you declare. This allows you to do a bunch of cool stuff – like style different “input” types differently, style anchor tags with titles differently, and etc.

How does it work?

An attribute selector follows this basic formula…

[attribute="value"] { style information... }

Like an id or class selector, you can use it alone (as in the example above), or attach it to a specific html element.

How can we use it? Here are a few examples.

Style Links with Title Elements Differently

You could use this to give users a hint that an anchor tag or link has a title element. This way they know to hover over the link and read the tooltip.

a[title] { border-bottom: thin dotted blue; }

That declaration gives any anchor tag containing a “title” attribute a thin dotted blue underlining. You may have to tweak it a bit to make sure the normal anchor-underlining doesn’t interfere with it.

Style Particular Input Types on Forms

You can use this to style Submit buttons, Text Inputs, etc. – independent of other input types.

input[type="submit"] {  background-color: blue; }

This simple declaration gives all Submit buttons a blue background color. Fairly silly, but the point is the declaration – not the actual styling. You could do something similar with these declarations…

input [type="text"] { /* style information */ }
input [type="password"] { /* style information */ }

Style Internal Links Different from External Links

This is a really nifty trick… but unfortunately it requires a bit of CSS 3. This will probably invalidate your CSS, and your mileage may vary.

It’s still interesting to try out.

You can use “^=” instead of “=” to signal that the browser should match any element with the given attribute that contains the quoted string. It doesn’t have to be an exact match. So you can use “^=’mydomain.com’” to match any links that point to the domain you’re working on.

Like so…

a[href^="earn-web-cash.com"] { /* style information */ }

You could use this to given internal links a slightly different color – some kind of queue to help the user differentiate between internal and external links.

For a longer list of ways to use this neat little trick, check out this post Hip to Be Square. There’s also a list of the different ways to search for values (like ^=) – which will be valid in CSS 3.

Some blogs automatically resize the pictures for you into a thumbnail – like the image to the right. What if you want the image a different size, though? You could allow the browser to resize it for you, or – better yet – write your own php script to resize the image dynamically.

Why You Shouldn’t Let the Browser Resize Images

Look at the original picture – the small thumbnail created by WordPress. Notice how large it is – 13.9kb. When WordPress resizes the image, it also reduces the file size. If I were to include the fullsize image and resize it using css height and width attributes, the file size would not be cut down.

Want proof? Look at the second image to the right – that’s simply resized by the browser. It’s a whopping 284.21kb.

If we write our own php script to resize the image dynamically, we can control both the image size and the file size. Check out the third image to the right – which was resized with a php script. You’ll notice that it looks nicer too – the browser isn’t designed to resize images.

Using the PHP GD Library to Resize the Image

So how do we do this? We’re going to make use of the PHP GD library to manipulate the image, and a $_GET parameter to tell it which image to re-size.

Let’s walk through using the GD library to re-size an image. Then we’ll see how to include that in your HTML to actually do the resizing for you.

First, we need to open up the original file and get it’s size and type characteristics.

$src_img = imagecreatefrompng('image.png');
$srcsize = getimagesize('image.png');

imagecreatfrompng() creates an image object and stores it in $src_image. If the file was a different type we could replace “png” with “jpeg” or “gif.” getimagesize() stores an array in $srcsize that contains the width of the image ($srcsize[0]), the height of the image ($srcsize[1]), and the filetype of the image ($srcsize[2]).

Now we need to create new dimensions for the new image and actually create an image. We’ll resize it to 200 pixels wide – and then adjust the height to maintain the ratio.

$dest_x = 200;
$dest_y = (200 / $srcsize[0]) * $srcsize[1];
$dst_img = imagecreatetruecolor($dest_x, $dest_y);

The calculations should be self explanatory. imagecreatetruecolor() creates a new image object for us with the given dimensions – which we will soon fill in with our resized image.

The next step is to place the resized image into $dst_img and output the image as Image content.

imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, 
    $dest_x, $dest_y, $srcsize[0], $srcsize[1]);
 
header("content-type: image/png");
imagepng($dst_img);

imagecopyresampled() copies an image ($dst_img) into a new image ($src_img) with a set of given attributes (including our sizes). The “Header” line tells the browser that this is an image – so that it’s not displayed as a bunch of gibberish. Finally, the imagepng() function actually displays the image.

Now, we need to clean up and destroy the image objects. Otherwise, we could end up sapping a lot of memory from the server.

imagedestroy($src_img);
imagedestroy($dst_img);

Displaying the Script in HTML

If you load the script directly, you should simply see the image. It creates an image resource and displays it in the browser – as if “resize-image.php” was really “image.png.”

Therefore all we need to do to include this new image in an HTML page is use the php script as the src attribute of our <img> tag. Like so…

<img src='resize-image.php' />

The script will execute, create an image, and use that as the src.

The last thing we need to do is modify our script so that we can pass it some information.

It wouldn’t do much good if we had to write a new php script for every image we wanted to resize. Instead, we can use the $_GET array to send a variable (the image filename) to our image resizing script.

Here’s the entire image resizing script, with the $_GET variable used for the filename.

//  Create source image and dimensions
$src_img = imagecreatefrompng($_GET['image']);
$srcsize = getimagesize($_GET['image']);
$dest_x = 200;
$dest_y = (200 / $srcsize[0]) * $srcsize[1];
$dst_img = imagecreatetruecolor($dest_x, $dest_y);
 
//  Resize image
imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $dest_x, $dest_y, $srcsize[0], $srcsize[1]);
 
//  Output image
header("content-type: image/png");
imagepng($dst_img);
 
//  Destroy images
imagedestroy($src_img);
imagedestroy($dst_img);

To use this, you need to slightly modify your HTML and add an “image” parameter to the URL of your script. Like so…

<img src='resize-image.php?image=image.png' />

There ya go! Now you can resize images on the fly.

Next Steps to Take…

This is of course a basic introduction to the topic. You can add a lot of functionality to resize-image.php.

For example, you could take extra parameters – like a width and/or height. You might also want to include a bunch of error checking – make sure the file exists, make sure the new dimensions are appropriate, etc.

You could also use a switch() statement to open different types of images – based on the contents of $srcsize[2]. Remember, you can use the GD library to do more than work with .png files. By replacing ‘png’ with ‘jpeg’ or ‘gif’ you can use the same functions to work with these file types. For example, imagecreatefromjpeg is equivalent to imagecreatefrompng.

In the near future, I plan on extending this example into a full-fledged script for immediate download and use. So stay tuned – and leave any comments with suggestions for what the script should be able to do.

In order to do that, you need to figure out some way of storing or passing along the information from the first pages. I’ve heard a bunch of crazy ideas – from storing the information in session variables to writing each part to the database.

The easiest thing to do is attach a very brief php function to the bottom of each page. It’ll do all the work for you and continue to post every item the user has entered.

To start with, let’s create a hypothetical page one of a form. This will give us something to work with for the rest of this tutorial.

<form action="script.php" method="post">
  <input type="text" name="firstname" />
  <input type="text" name="lastname" />
  <input type="submit" name="poneSubmit" value="Continue" />
</form>

Here we’ve got three form elements – although only two of them really count. When we get to the second page, we need to make sure that “firstname” and “lastname” are passed along so that the final processing page can store the data appropriately.

When the second page (“script.php”) loads, these values will be stored in $_POST['firstname'] and $_POST['secondname'].

Every value in a form that is submitted with method="post" ends up in the superglobal array $_POST with a key equal to its name attribute in the form.

In order to continue to pass these values along and make them accessible through the $_POST superglobal on other pages, we can use a simple foreach loop. With each iteration of the loop, we’ll create a new <input type="hidden" /> to store the information.

foreach ($_POST as $key => $val) {
  echo '<input type="hidden" name="' . $key . 
    '" value="' . $val . '" />' . "\r\n";
}

This will cycle through the $_POST array and create all of the hidden elements for us. So we’d end up with this being added to our next page in the form.

<input type='hidden' name='firstname' value='Bob' />
<input type='hidden' name='lastname' value='Stevenson' />
<input type='hidden' name='poneSubmit' value='Continue' />

All you need to do is add that snippet of php to the end of your form on each subsequent(after page one), and all of the values will end up in the $_POST array at the end. [Note: Make sure this is inside the form tags, or else it won't get passed along.]

If you want to take it one step further, you can standardize this into a neat little function. Then include this function in your common includes file, and you can use it on any page with a simple function call.

function passArray($array) {
  foreach ($_POST as $key => $val) {
    echo '<input type="hidden" name="' . $key . 
      '" value="' . $val . '" />' . "\r\n";
  }
}

That’s all there is to it! Go write up some forms.

[Note: If you're wondering why the "\r\n" is there, it's just to make the source code look nicer. It adds a newline so that your source code is nice and spread out. Otherwise, every element our function adds would be on the same line - making the source code pretty illegible.]

Update. It’s been pointed out to me that there’s a possible security hole in this method. No big deal. This article that revisits multi-page forms patches the hole up nice and snug. I’d suggest you take a look at it.