I have just come across a great example of how not to deal with users logging in or registering for a site with T-Mobile (UK).

I am on my second phone with them and had an account with them for the original phone, so I tried logging in using my username which I had in an email and my password. It wasn’t having it.

So I tried the forgotten password route. This asked for my mobile number and my username. Entered my original number and username. Nope. Entered my new number and username. Nope.

So I tried the forgotten username + password route. This asks for your name, phone number and email. I entered all this information using my original phone number. Nope. Tried again with my new phone number. Nope.

At this point I guess that I may not have an account for my new phone and my old phone was removed even though the number is still on the go on a second phone I have.

This time I went to the registration form. Put in my new number and entered the captcha. I was presented with another screen asking if I was the account holder, what my email was, how I was paying for the number, and a password. I filled all of this only at this point to be told that an account already existed for this number. Why couldn’t this error be present after the first step rather than making me enter in loads of data which was redundant.

So I tried to register again using my original number, entered the captcha and on to step two. This time I was asked for different information, I assume it recognised that this was a PAYG phone and not a contract phone so rather than being asked about how I paid for it, I was asked for my name address as well as my email, password. I filled this in, but the post code lookup didn’t recognise my post code, so I tried another post code, nope, and my works post code…nope. I carried on with the form assuming that it would present some more text fields to enter my address and pressed Submit.

“Please select your address before proceeding”

It wouldn’t let me proceed as I didn’t select my address which it wouldn’t find. Being a developer, I thought I would disable javascript. Obviously there was a problem, with their post code look up service and with javascript disabled the form would degrade nicely with all the address fields. Nope. The same form is displayed, still showing the Find address button which the href is set to javascript:; so the link wouldn’t do anything.

I am now in a situation where I can’t login to a pre-existing account or create a new account for not one but two phones.

Fixes

There are quite a few fixes that T-Mobile need to do to get their forms up to scratch. I can’t really say much about the login process as it may just be that the accounts don’t exist for whatever reason, I will have to wait and hear back from T-Mobile. But the registration form needs a lot of work.

When registering a new account and the number exists, throw an error straight away. Some inline validation would be great, at the very least throw up an error on submitting the form rather than getting the user to type another page of information before being told that the very first thing that did on the previous page was wrong.

Sort out the post code lookup service. I tried 3 different post codes. I know they exist. The look up service they are using just doesn’t work. A query is sent off by the javascript but there is no response (used Firebug).

Degrade the form if javascript is not available. Not everyone has javascript enabled, especially on some phones. Making sure an application degrades properly if javascript is absent is vital. If the post code lookup did work, then I wouldn’t of found this problem, but it doesn’t work and as it is javascript only, you can’t go any further.

So what has changed?

hook_block() no longer exists in Drupal 7. It has been split in to individual hooks for each $op. So rather than hook_block() we now have:

• hook_block_info()
• hook_block_configure()
• hook_block_save()
• hook_block_view()

A few of these new hooks conflicted with the hooks put in place by the Block API module, so I have made a few changes to the way other modules hook in to it.

function html_block_block($op = 'list', $delta = NULL, $edit = array()) {
  $function = 'block_api_block_'. $op;
  return $function('html_block', $delta, $edit);
}

The above has gone completely. Rather than passing the modules name to the core Blocks module, Block API will pass on it’s own name and handle the block management of modules using the API itself. This reduces the amount of code needed (although it wasn’t that much to start off with) and also makes it easier to remember what you need to use to hook in to Block API.

hook_block_api_info() has now changed to hook_block_api_block_types(), the code stays exactly the same. This was caused by the function name changes made in Drupal 7.

hook_block_api_view() has changed to hook_block_api_display(), this was also due to the function change in Drupal 7.

Everything else stays the same. The Block API has now been made slightly easier to use and hook in to thanks to Drupal 7.

The code on d.o should be updated soon.

Download: ZIP Last updated: 2010-07-13 18:30

The block displays however many raids you want to display and gives you more information which is available on mouseover.

As well as the block configuration, the module has an admin form that must be filled in before any blocks can be created. This is to make sure that Drupal knows where PHP Raider is located and where the database is.

So far I have created two blocks using the Block API module I developed and will release more when I have written and tested them.

Both blocks are set up in one module, which I have called wow_blocks. If you already have a module called wow_blocks, it may be a bit of a mission getting this to work, so you will have to chose one of the modules.

Download: ZIP. Last updated: 2010-07-12 18:30

Block 1: Recruitment

The first block is a block for recruitment. An admin can set the roles and specs that the guild requires to be displayed in the block, so users know which areas the guild is recruiting in.

All the images are included in the ZIP file.

The admin screen, allows the admin to select the links to use for the Apply now and Recruitment details buttons as well as options for each individual role and spec.

Click for larger version

Block 2: Progression

This block shows the guilds progression against the bosses of the game.

The block features an expandable group of game zones with all the bosses in the zone.

All bosses from the following zones are in the module:

• ‘Icecrown Citadel
• Argent Coliseum
• Ulduar
• Eye of Eternity
• Obsidian Sanctum
• Naxxramas
• Vault of Archavon

Admins have full control over which zones are available and shown in the block as well as selecting which bosses have been defeated.

If you have any requests for World of Warcraft related blocks, let me know in the comments.

The AHAH helper module does provide a demo, but the demo shows how to change a few fields depending on a selection made from a select element. The tutorials I looked at online either didn’t cover the issue properly or just didn’t work.

Currently the 6.x-2.0 release throws up errors if you are using certain PHP versions, but these are gone in the 6.x-2.x-dev release.

Scenario

You want the user to enter in some data, lets say their favourite car. But you want the ability for them to add as many cars as they want if they have more than one.

Code

Firstly you will need to set up a menu callback for your form, but I will assume you know how to do this if you are looking at this tutorial.

We will set up the basic form first, this includes one textfield and a submit button to submit the form with the textfield in a wrapper (this is important later on for the ahah_helper module).

function test_form($form_state = NULL) {
  $form['cars'] = array(
    '#type' => 'fieldset',
    '#title' => t('Favourite cars(s)'),
    '#prefix' => '<div id="favourite-cars-wrapper">',
    '#suffix' => '</div>',
  );
  $form['cars']['car'] = array(
    '#type' => 'textfield',
    '#title' => t('Favourite car'),
    '#size' => 36,
    '#default_value' => $form_state['values']['car'],
  );
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit'),
  );
  return $form;
}

This is very basic and allows the user to enter one car and submit the form. We now need to add in the extra functionality of ahah_helper to be able to add mulitple fields.

function test_form($form_state = NULL) {

  ahah_helper_register($form, $form_state); // Absolutely vital for ahah_helper to do it's job

  // We check to see if quantity has been set, ie if the form has been submitted yet.  If not, we show 1 field, you can change this to however many fields you want to show up as default.
  if (!isset($form_state['storage']['quantity'])) {
    $quantity = 1;
  }
  else {
    // If the form has been submitted we get the quantity that was stored.
    $quantity = $form_state['storage']['quantity'];
    // We then do a check to see if the user has clicked the "Add another car" button, if they have we increase the amount by 1.
    if (isset($form_state['values']['cars']['add_more']) && $form_state['values']['op'] == 'Add another car') {
      $quantity++;
    }
  }

  // We create a hidden form element to store the amount of fields that the user has added.
  $form['quantity'] = array(
    '#type' => 'value',
    '#value' => $quantity,
  );

  $form['cars'] = array(
    '#type' => 'fieldset',
    '#title' => t('Favourite cars(s)'),
    '#prefix' => '<div id="favourite-cars-wrapper">',
    '#suffix' => '</div>',
    '#tree' => TRUE // This is important for ahah_helper.
  );
  // We now do a simple loop, creating however many textfields are defined by $form_state['storage']['quantity']
  for ($i = 1; $i <= $quantity; $i++) {
    // The element name needs to be different for each textfield, otherwise we will only get one value after the form is submitted.
    $form['cars']['car_'. $i] = array(
      '#type' => 'textfield',
      '#title' => t('Favourite car'),
      '#size' => 36,
      '#default_value' => $form_state['values']['cars']['car_'. $i],
    );
  }

  // We add in a button with the #ahah element which will handle all our work for us.
  $form['cars']['add_more'] = array(
    '#type' => 'submit',
    '#value' => t('Add another car'),
    '#ahah' => array(
      'event' => 'click', // When the button is "clicked", AHAH will do it's job
      'path' => ahah_helper_path(array('cars')), // The array features the wrapper form field. So our form wrapper is $form['cars'], so we set this to array('cars'). If your form was $form['cars']['another_wrapper'], the path would be array('cars', 'another_wrapper').
      'wrapper' => 'favourite-cars-wrapper', // We then define the wrapper which will be changed.
    ),
  );
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit'),
  );
  return $form;
}

So what have we done…first we added the following line:

ahah_helper_register($form, $form_state);

This is a vital function that needs to be present in your form for ahah_helper to do it’s job.

Next we check to see if the form has been submitted before and if it has, get the amount of textfields that the form had by storing it in a hidden field. We then do a further check to find out what button was clicked. If the “add more” button was clicked, then we add another textfield by increasing the value of the quantity variable.

A minor, but very important change we make is adding ‘#tree’ => TRUE to our wrapper element, this is a requirement for ahah_helper to do it’s job properly.

Next we use a for loop, to add all our textfields into the form. This should be self-explanitory but will go in to a bit more depth further on when we talk about the #ahah element.

We added an additional button to the form, this is so that the user can add another field to the form. You don’t need to worry about javascript degradation as ahah_helper takes care of this.

One attribute of #ahah on the button that isn’t listed in the form, but is very important, is the “method”. The default value of this is replace, which is what we want. This replaces the whole contents of the wrapper which we define with the data from the path which we defined. This is why we needed the for loop to recreate the textfields.

To take care of the form when javascript is disabled, you must check which button was pressed when the form was submitted.

function test_form_submit($form, $form_state) {
  if ($form_state['values']['op'] == 'Submit') {
    drupal_set_message('Submit button clicked');
  }
  else {
    drupal_set_message('Add more button clicked');
  }
}

With javascript enabled, when clicking the Add more button, Drupal will perform validation on the form, but will not submit the form. Whereas clicking the submit button will perform validation and submit the form.

Not every user will understand this:

<iframe src="http://drupal.org/" width="100%" height="500px" frameborder="1" scrolling="no"></iframe>

And will find this much simpler and easier to use:

First off, you need to create a module like you normally would with your .info and .module files.

My module is going to be called iframe_block, so you will need to change this in certain cases if you use a different name.

name = Iframe Block
description = Add new blocks which contain an iframe of a specified URL.
core = 6.x
dependencies[] = block_api

That is for the .info file which sets the dependency on block_api. If block_api isn’t available then this module can’t be used.

Our .module file is going to be fairly simple and just hooks in to Block API, using three of the available hooks. But before we use any of the Block API hooks, we need to forwards the Drupal block related calls to the Block API module.

function iframe_block_block($op = 'list', $delta = 0, $edit = array()) {
  $function = 'block_api_block_'. $op;
  return $function('iframe_block', $delta, $edit);
}

This will pass any calls to iframe_block_block() to the Block API module which in turn will add it’s own hooks which we can take advantage of.

The first one and most important is hook_block_api_info(), which we use to tell Drupal about our block type.

function iframe_block_block_api_info() {
  $types['iframe_block'] = array(
    'title' => t('Iframe Block'),
    'description' => t('Create a block from with content from a specified URL using an iframe.'),
    'storage' => BLOCK_API_STORAGE_DATABASE,
  );
  return $types;
}

Next we define our form for the user to fill in. The attributes we require are the source (the URL), the height and the width. I am also going to provide the user the option of overriding the frameborder and scrolling attributes.

function iframe_block_block_api_form($config, $edit) {
  if ($config['block_type'] == 'iframe_block') {
    $form['url'] = array(
      '#type' => 'textfield',
      '#title' => t('URL'),
      '#description' => t('The URL of the page you would like to use as the source of the iframe.'),
      '#required' => TRUE,
      '#default_value' => $config['settings']['url'],
    );
    $form['width'] = array(
      '#type' => 'textfield',
      '#title' => t('Iframe width'),
      '#description' => t('Enter the width of the iframe. Include the measurement type (px, em or %)'),
      '#default_value' => $config['settings']['width'] ? $config['settings']['width'] : '100%',
      '#required' => TRUE,
      '#size' => 10,
    );
    $form['height'] = array(
      '#type' => 'textfield',
      '#title' => t('Iframe height'),
      '#description' => t('Enter the height of the iframe. Include the measurement type (px, em or %)'),
      '#default_value' => $config['settings']['height'] ? $config['settings']['height'] : '300px',
      '#required' => TRUE,
      '#size' => 10,
    );
    $form['frameborder'] = array(
      '#type' => 'select',
      '#title' => t('Iframe border'),
      '#description' => t('Select whether you want to show a border around the iframe.'),
      '#default_value' => $config['settings']['frameborder'] ? $config['settings']['frameborder'] : 0,
      '#required' => TRUE,
      '#options' => array(1 => t('Show border'), 0 => t('Don\'t show a border')),
    );
    $form['scrolling'] = array(
      '#type' => 'select',
      '#title' => t('Scrolling'),
      '#description' => t('Select whether the iframe should be scrollable or not'),
      '#default_value' => $config['settings']['scrolling'] ? $config['settings']['scrolling'] : 'auto',
      '#required' => TRUE,
      '#options' => drupal_map_assoc(array('yes', 'no', 'auto')),
    );
  }
  return $form;
}

This will allow the user to set up their iframe by entering the required information.

Finally, we need to hook in to hook_block_api_view() to be able to display our iframe using the users input.

function iframe_block_block_api_view($config) {
  if ($config['block_type'] == 'iframe_block') {
    $output = '<iframe src="'. $config['settings']['url'] .'" width="'. $config['settings']['width'] .'" height="'. $config['settings']['height'] .'" frameborder="'. $config['settings']['frameborder'] .'" scrolling="'. $config['settings']['scrolling'] .'">'. $config['settings']['no_iframes'] .'</iframe>';
  }
  return array('content' => $output);
}

Very simply we are taking the users input and entering it in to some HTML code to give us the desired output.

Click for larger version

The example module included copies the functionality of the core block module. Below I will show how to use Block API to display a specific node as a block with further configuration options available to the user to choose from.

First off, if you just want to download this module to use, you can do so by clicking here.

As with any other module, create an info file using whatever module name you want. The module name I will be using is node_block.

name = Node Block
description = Add new blocks by using pre-existing nodes.
core = 6.x
dependencies[] = block_api

In your .module file, we need to first set up the hook to allow Block API to do it’s job. So our first function will be the following:

function node_block_block($op = 'list', $delta = 0, $edit = array()) {
  $function = 'block_api_block_'. $op;
  return $function('node_block', $delta, $edit);
}

This passes all the hook_block calls through the Block API which then allows users to select your block types through a single interface.

Next, we need to define our block types that we will provide users. To do this we use hook_block_api_info().

function node_block_block_api_info() {
  $types['node_block'] = array(
    'title' => t('Node Block'),
    'description' => t('Create a block from a pre-existing node.'),
    'storage' => BLOCK_API_STORAGE_DATABASE,
  );
  return $types;
}

This is very simple, and defines the block type.

For this module we are going to allow the user to select a node to display and choose whether to display the full node or just the teaser. As well as this, we are going to give the administrator the choice of which node types are available to the user to chose nodes from as well as selecting whether users can use unpublished nodes or not.

First we will define the administration form to chose which content types are available. To do this, we need to use hook_menu() to define our menu item pointing to our form.

function node_block_menu() {
  $items['admin/settings/node_block'] = array(
    'access callback' => 'user_access',
    'access arguments' => array('administer blocks'),
    'page callback' => 'drupal_get_form',
    'page arguments' => array('node_block_admin_form'),
    'title' => 'Node Block Configuration Settings',
    'description' => 'Set the configuration options for Node Blocks.',
    'type' => MENU_NORMAL_ITEM,
  );
  return $items;
}

There is nothing complex here, just a standard menu item. We now have to create the form node_block_admin_form().

function node_block_admin_form() {
  $types = node_get_types('names');
  $form['node_block_content_types'] = array(
    '#type' => 'checkboxes',
    '#title' => t('Node types available to create blocks'),
    '#description' => t('Set the node types that are allowed to be displayed as blocks.'),
    '#required' => TRUE,
    '#options' => $types,
    '#default_value' => variable_get('node_block_content_types', ''),
  );
  $form['node_block_published_only'] = array(
    '#type' => 'checkbox',
    '#title' => t('Only allow published nodes to be shown as blocks.'),
    '#description' => t('By checking this box only published nodes will be available for selection and appear as blocks.'),
    '#default_value' => variable_get('node_block_published_only', 1),
  );
  $form['node_block_sql_order'] = array(
    '#type' => 'select',
    '#title' => t('Order autocomplete results by'),
    '#description' => t('Select the column name to order the autocomplete results by.'),
    '#default_value' => variable_get('node_block_sql_order', 'nid'),
    '#required' => TRUE,
    '#options' => array('nid' => t('Node ID'), 'title' => t('Node title'), 'type' => t('Node type')),
  );
  $form['node_block_sql_sort'] = array(
    '#type' => 'select',
    '#title' => t('Order of autocomplete results'),
    '#description' => t('The order in which autocomplete results will be ordered.'),
    '#default_value' => variable_get('node_block_sql_sort', 'ASC'),
    '#options' => array('ASC' => t('Ascending'), 'DESC' => t('Descending')),
    '#required' => TRUE,
  );
  $form['node_block_autocomplete_limit'] = array(
    '#type' => 'textfield',
    '#title' => t('Amount of results to display in autocomplete'),
    '#description' => t('Enter the amount of results to appear in the autocomplete when selecting a node.'),
    '#required' => TRUE,
    '#default_value' => variable_get('node_block_autocomplete_limit', 25),
    '#size' => 5,
  );
  return system_settings_form($form);
}

To get a list of nodes types, you can run your own custom SQL query, but it is a lot easier to use Drupal’s built in node_get_types() function. If you pass along ‘types’ as the first argument, you will get a lot more information, but all we need is the node type machine name and the display name. node_get_types(‘names’) does exactly this with an associative array with the key being the machine name and the value being the display name.

The rest of the form is very simple, giving the administrator full control over the ordering of the autocomplete which users will select their node from.

We now have our admin form set up, so now it is time to create the configuration form for the users when adding a new block. Again we hook in to the Block API, this time using hook_block_api_form($config, $edit).

function node_block_block_api_form($config, $edit) {
  if ($config['block_type'] == 'node_block') {
    $form['nid'] = array(
      '#type' => 'textfield',
      '#title' => t('Node ID'),
      '#description' => t('Start typing the title of the node and select it from the autocomplete list.'),
      '#required' => TRUE,
      '#default_value' => $config['settings']['nid'],
      '#autocomplete_path' => 'js/node_block/autocomplete',
    );
    $form['teaser'] = array(
      '#type' => 'select',
      '#title' => t('Show the Teaser or full node'),
      '#description' => t('Select whether you would like just the teaser displayed in the block or the full node.'),
      '#default_value' => $config['settings']['teaser'],
      '#required' => TRUE,
      '#options' => array(0 => t('Full node'), 1 => t('Teaser')),
    );
  }
  return $form;
}

Here we give the user two options. The first is an autocomplete field to select the node and the second being a simple checkbox allowing the user to select whether they want to show the teaser of the node or the full node.

To get the autocomplete working, we need to set up our autocomplete menu item and function to run the search query.

In your existing hook_menu(), add the following to create a menu callback for our autocomplete textfield.

$items['js/node_block/autocomplete'] = array(
    'page callback' => 'node_block_js_autocomplete',
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
  );

A very simple callback, no need for a title or description and access is open to everyone, although you could limit it to the users who are able to create blocks.

Next we need to set up the SQL query that will fetch the nodes based on the users input.

function node_block_js_autocomplete() {
  $str = $_POST['nid'];
  $sql = "SELECT nid, title FROM {node} WHERE LOWER(title) LIKE LOWER('%%%s%%')";
  foreach (variable_get('node_block_content_types', '') as $type => $value) {
    if (strlen($value) > 1) $types[] = '"'. $type .'"';
  }
  $sql .= " AND type IN (". implode(", ", $types) .")";
  if (variable_get('node_block_published_only', 1) == 1) {
    $sql .= " AND status = 1";
  }
  $sql .= " ORDER BY ". variable_get('node_block_sql_order', 'nid') ." ". variable_get('node_block_sql_sort', 'ASC');
  $sql .= " LIMIT 0, ". variable_get('node_block_autocomplete_limit', 25);
  $query = db_query($sql, filter_xss($str));
  $results = array();
  while ($data = db_fetch_object($query)) {
    $results[$data->nid] = check_plain($data->title);
  }
  print drupal_to_js($results);
}

We get the users current inputted text from $_POST and set up the basic SQL. As we gave the administrator the chance to limit the options available, we must now apply those filters. First we make sure the query only gets results for the right content types, then check for only published nodes if defined by the administrator. The next few lines are for the autocomplete ordering and limiting the amount of results.

We now have our two admin forms configured, the only bit remaining is showing the block on the page. This is done by using hook_block_api_view().

function node_block_block_api_view($config) {
  if ($config['block_type'] == 'node_block') {
    $node = node_load($config['settings']['nid']);
    if ($node->status == 0 && variable_get('node_block_published_only', 1) == 1) return FALSE;
    $output = node_view($node, $config['settings']['teaser'] == 1 ? TRUE : FALSE);
  }
  return array('content' => $output);
}

First, we load the node using the NID saved from our form by Block API. It is probably best to add some code in to make sure that a node ID has been saved either at view stage or when saving the block.

Next we make sure the node is not unpublished if the administrator has defined that only published nodes can be shown as blocks.

Then we use the function node_view() to display the node. The second argument is the $teaser argument. If TRUE it will display the teaser of the node, otherwise the full node will be published.

Click for larger image

You may also want to hide the node block if you are viewing the node page itself, so adding a line after the status line such as:

if (arg(0) == 'node' && arg(1) == $config['settings']['nid']) return FALSE;

And that is it. You will now be able to create blocks

Scenario

A user submits a piece of content, we will refer to this user as the author. The content is not published and is sent to another user for moderation, we will refer to this user as the moderator.

The moderator can then either set the content from a moderation state back to a draft state for the author to amend or through to a “to be published state”.

Once the moderator has checked the content and made amends they can mark the content as ready for publishing. At which point a third user which we will refer to as the publisher, can make further amends to the content and publish it, make further amends and send back to the moderator to check through the changes or mark the content as back to draft to allow the author to change it.

Required modules

A few contributed modules are required to get this process in place as well as a couple of core modules.

• Trigger (Core, optional)
• Profile (Core)
• Module Grants (Contrib)
• Smart tabs (Contrib)
• Revisioning (Contrib)
• Token (Contrib)
• Workflow (Contrib)
• Diff (Contrib, optional)

The Diff module is optional, but can be useful to easily see what parts of the content have changed from each revision.

Enable modules

Some of the modules have sub-modules which come with the main module, so be sure to check all the required modules, which are:

• Module Grants
• Module Grants Monitor (Optional)
• Node Tools
• User Tools
• Profile
• Trigger (Optional)
• Smart tabs
• Diff (Optional)
• Revisioning
• Token
• Token actions
• Workflow
• Workflow access

If you already have content on your site, you will also need to download and install Workflow Post Install, otherwise all old content may only be accessible by administrator.

Create user roles

You can have as many different roles to allow more fine grained control over who can create what content types, but to try and keep this tutorial as simple as possible, I will stick to the three main roles defined in the scenario.

• Author
• Moderator
• Publisher

It may be best to give your author role a different role name as the Workflow module automatically adds a line in the admin for “author” which applies to any role creating content.

Go to Administer > User management > Roles (admin/user/roles).

Then add your three roles, I will be using author role, moderator role and publisher role.

Set up workflow settings

Go to Administer > Site building > Workflow (admin/build/workflow).

Create a new Workflow and call it Moderation.

In the State name box, enter in draft and set the weight to -10. Save the state.

Once the state has saved, click the List tab and click the Add state link.

Add the following states:

• in moderation (weight: -2)
• is moderated (weight: 2)
• live (weight: 10)

Underneath your states, you can apply the workflow to separate content types. I will be applying it to both the default content types (Page and Story).

Next to the Moderation workflow, click the Edit link.

This page may seem a little daunting at first, but don’t panic. The first set of checkboxes allow you to set out which roles can transition the node between certain states. You will also see the extra “author” role that I refered to earlier.

The first row is for the original creation of the node. This is the transition from the (creation) state to the in draft state. The only role we are giving access to this is the Workflow defined author, note that this is not the author role that we created.

Click for larger version

The next transition is from being in draft to in moderation. For this transition, we want to set this to our author role as opposed to the workflow defined author.

Click for larger version

The next transition is from in moderation to is moderated. This is our moderation step where the content is moderated prior to being sent back to the author for further amends or to the publisher for final approval and publishing. We want to set the moderator role under in draft and is moderated.

Click for larger version

Next is the step from being moderated to going to the publisher. There are some optional transitions that you can put in here, depending on how you want to work. The one that everyone would need is the transition from is moderated to live. The one that will differ is for rejections. Some people will want it to go back to draft, whereas others will want it to go back to moderator, others will want both options. This way if there isn’t a major problem, the content can be sent back to the moderator for further moderation rather than having to go back to the author only to be sent back to the moderator.

Click for larger version

The final transition is from the live state. The only role that needs this is our author role (not the workflow author role) to be able to take the content back to in draft. This will not change the live copy, but create an unpublished revision which we will set up in the next part of the tutorial.

Click for larger version

After the checkboxes, in the Comment for Workflow Log section, make sure both boxes are ticked to show a comment form in the Workflow and node edit screens to allow the roles to add their comments for the next role to read to understand why the amends were rejected or what was changed.

In the Workflow tab permissions, check our three roles.

Next we have the Access control section. These permissions allow you to set permissions to certain roles based on the state of the content (in draft, in moderation, is moderated, live). Take in to account that these permissions will be overridden by some of the permissions in the User management > Permissions page which we will get on to later.

In the sections for each state, the anonymous user and authenticated user should stay ticked under Roles who can view posts in this state.

Under in draft, check our author role for Roles who can edit posts in this state.

Click for larger version

Under in moderation, check our moderator role for Roles who can edit posts in this state.

Click for larger version

Under is moderated, check our publisher role for Roles who can edit posts in this state.

Click for larger version

Leave the live state with only the default view options checked.

Press Save.

Configure content types

Go to Administer > Content management > Content types (admin/content/types).

Click the Edit link next to the content type you wish you apply the moderation workflow.

Under the Workflow settings, uncheck the Published box as we don’t want to publish the content until it has been moderated and approved.

Check both the Create new revision and New revision in draft, pending moderation (requires “Create new revision”) boxes to create a revision for each modification of the content.

Under Create new revision, it is up to you what setting you use, but remember to read the description text below the options.

Click here for larger version

If you have the Diff module enabled, you will get the additional option Show Preview changes button on node edit form which will allow you to see the difference between the current edits and the current revision.

Repeat this step for all content types that you wish to have moderation enabled for.

Set up user permissions

Go to Administer > User management > Permissions (admin/user/permissions).

Under the module_grants_monitor module section. Tick the boxes access All tab, access I Can Edit tab and access I Can View tab for the moderator role. For the publisher role, you can tick the same boxes plus access Published tab and access Unpublished tab.

Click for larger version

Under node module, make sure anonymous user and authenticated user are both checked for access content.

For author role, tick the boxes to allow them to create content of selected content types as well as being able to edit their own content.

For the moderator and publisher roles, allow them to edit any content as well as view or revert any revisions, but if you want further control over this, you can set this later on in the revisioning section.

Click for larger version

Under revisioning module, give the author role the ability to view revision status messages and to edit revisions of their own content. Moderators should have permission to access Pending tab, edit revisions and view revision status messages. The publisher role should have the same permissions as the moderator role, but should also have unpublish current revision and publish revisions.

Click for larger version

Press Save.

Set up email triggers

For information on setting up and using Triggers and Actions in Drupal 6, it is best to read the excellent page on the Drupal.org website at http://drupal.org/node/199254

Block API is a new module I have developed for Drupal 6 which gives greater control over block templates much like you do with nodes.

More information is available on my Block API page under Projects.

Developer information on how to use the module is available on the Block API Developer information page.

They offer very good VPS packages which are very fast for a very good price and allow a lot of customisation with some excellent backend configuration options.

Step 1: Create a new canvas and fill the background with black (#000000)

Open Photoshop and create a new canvas, whatever dimensions you want to use, I am using 500×500.

Fill the background layer with black (#0000000).

Step 2: Create the initial burst of light

Set the foreground colour to white (#ffffff) (you can do this by pressing d on the keyboard to reset the foreground and background colours then pressing x to switch the foreground and background).

Now select the Gradient tool and set the gradient to be foreground to transparent and set to a radial gradient.

Now draw a radial gradient from the center of the document on a new layer.

Next create another layer. Go to Filters > Render > Clouds. Set the layer blend mode in the layers panel to Soft Light.

With the same layer still selected, go to Filters > Artistic > Plastic Wrap. You will need to play around with the settings here to get your desired result, I will leave them as the defaults.

Next, go to Filters > Blur > Radial Blur. Set the Amount to 100 and the Blur Method to Zoom.

Click OK to apply the blur.

Step 3: Add colour to the burst

Create another layer and fill it with whatever colour you want the burst to be. I am using #8dc63f. Set the layers blend mode in the layers panel to Colour. Lower the opacity to 60-80% to get more detail from the burst.

Result

Step 1: Create a new canvas and create a new layer

In Photoshop, create a new canvas and add a layer. In this layer draw a rectangular shape using the marquee tool while leaving a small space around the canvas border.

Fill this shape with white on the new layer.

Step 2: Set the layer styles

Right click the layer and select Blending Options.

Tick Outer Glow and set the Blend Mode to Normal and the Colour to black (#000000) and lower that Opacity to 10%. In the Elements section, change the Size to 10px.

Next tick Inner Glow and set the Blend Mode to Normal and the Colour to white (#ffffff) and set the Opacity to 40%. In the Elements section, change the Size to 15px.

Next select Gradient Overlay, leave all the settings at their defaults, but change to the Gradient to the colour you want. In this example I have chosen #ec2f03 to #c02502.

Finally, tick the Stroke checkbox, and lower the Size to 2px and the Position to Inside. Set the Colour of the stroke to something slightly different than the gradient. I chose #ed1c24.

Step 3: Add a slight shine to the button

Create another layer on top of the button and select the Eliptical Marquee Tool and draw an elipse covering the top half of the button.

With the selection active, press and hold Ctrl, Alt and Shift and left click the layer preview of the button. This should limit the selection just to the area of where the selection meets the button.

On the new layer, Fill this with white (#ffffff) and set the Opacity of the layer to 15%.

Result

I will be doing this using WAMP on a Windows XP machine, so some of the steps won’t work if you are using IIS or will differ if you are using a different setup.

The result we will be aiming for is a shared user system allowing the user to log in/out of 3 sites which I will use the following domains:

• http://www.local.com
• http://community.local.com
• http://support.local.com

WAMP installation

Download and install the latest version of WAMP from the WAMP website. The latest version comes with PHP 5.3 which has problems with Drupal 6, so you will also need to download and install PHP 5.2.x from the WAMP Addons page once WAMP is installed.

Once WAMP and PHP 5.2.x have been installed and WAMP has restarted, left click the WAMP icon in the system tray and go to PHP > PHP Version and select the 5.2.x version you downloaded.

Left click the WAMP icon again and this time select Apache > Apache Modules and scroll down and select rewrite_module and vhost_alias_module.

WAMP Virtual Hosts set up

Again, left click the WAMP icon and go to Apache then select httpd.conf.

Scroll down to the bottom of this file and look for the following lines:
# Virtual hosts
# Include conf/extra/httpd-vhosts.conf

Remove the comment from the beginning of the second line to end up with this:
# Virtual hosts
Include conf/extra/httpd-vhosts.conf

Save and close the file.

Now in Explorer, navigate to the WAMP directory\bin\bin\apache\Apache2.2.11\conf\extra\ directory.

Open the httpd-vhosts.conf file with your favourite text editor.

Replace the contents of this file with the following:

NameVirtualHost *:80
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#
<VirtualHost *:80>
ServerAdmin webmaster@localhost
DocumentRoot "c:/wamp/www/"
ServerName www.local.com
ErrorLog "logs/local-www-error.log"
CustomLog "logs/local-www-access.log" common
<directory "c:/wamp/www/">
Options Indexes FollowSymLinks
AllowOverride all
Order Deny,Allow
Deny from all
Allow from 127.0.0.1
</directory>
</VirtualHost>
<VirtualHost *:80>
ServerAdmin webmaster@localhost
DocumentRoot "c:/wamp/www/"
ServerName community.local.com
ErrorLog "logs/local-com.localhost-error.log"
CustomLog "logs/local-com.localhost-access.log" common
<directory "c:/wamp/www/">
Options Indexes FollowSymLinks
AllowOverride all
Order Deny,Allow
Deny from all
Allow from 127.0.0.1
</directory>
</VirtualHost>
<VirtualHost *:80>
ServerAdmin webmaster@localhost
DocumentRoot "c:/wamp/www/"
ServerName support.local.com
ErrorLog "logs/local-sup.localhost-error.log"
CustomLog "logs/local-sup.localhost-access.log" common
<directory "c:/wamp/www/">
Options Indexes FollowSymLinks
AllowOverride all
Order Deny,Allow
Deny from all
Allow from 127.0.0.1
</directory>
</VirtualHost>

This sets up 3 virtual hosts all using the same directory for the files, as we are using a shared codebase. This is also set up to only allow traffic from the localhost. To make the site public to all, change the line:

Allow from 127.0.0.1

To:

Allow from all

Save and close the file.

HOSTS set up

The local.com domain already exist, so we need to overwrite the IP address where it points to be the local computer in the HOSTS file. We do this by editing the HOSTS file which on Windows is located in the following directory:

C:\WINDOWS\system32\drivers\etc

The HOSTS file has no file extension. So open it up in Notepad and add the following line at the very bottom:

127.0.0.1 www.local.com community.local.com support.local.com

Save the file, but make sure you don’t add a .txt extension.

You will need to close all your browser windows and in some cases restart the computer for the changes to take effect.

Open a new browser window and try to navigate to www.local.com, you should now get the WAMP welcome screen.

Create a database in MySQL

Using which ever MySQL admin tool you prefer, create a new database to use for Drupal. If using WAMP, you can use PHPMyAdmin by navigating to http://localhost/phpmyadmin/

By default MySQL has no password in WAMP.

Download and set up Drupal

Download the latest version of Drupal 6 which at the time of writing is Drupal 6.17.

Extract the files and subfolders to the C:\wamp\www directory overwriting the existing index.php when asked. If you are not asked to overwrite the index.php file, you have tried to extract the files at the wrong directory level.

Navigate to the /sites/ directory and copy the default directory twice and rename the 2 new directories support.local.com and community.local.com.

Navigate in your browser to www.local.com, you should get the Drupal installation screen. Follow the screens through and install Drupal how you normally would. Once installation has finished and you are at the Welcome screen, navigate to support.local.com.

During installation, add a database prefix as support_ and continue with installation.

Once at the welcome screen, do the same with community.local.com but this time using the prefix comm_.

Configure Drupal for multisite by modifying settings.php

In the /sites/ directory there are now 4 directories.

- all
- community.local.com
- default
- support.local.com

The default directory is used for www.local.com, the other 2 xxx.local.com directories should be self explanitory and the all directory is present for modules and themes.

Open up the settings.php file in the default directory.

Around a quater of the way down the file (around line 93 for most people) there is a line for $db_prefix, if you didn’t set one it should just say:

$db_prefix = '';

Scroll 3 quaters down (around line 169) and uncomment the line:

# $cookie_domain = 'example.com';

And change to:

$cookie_domain = '.local.com';

This will share the session cookie across all subdomains of local.com

Save and close the file.

Now open up settings.php from within the community.local.com directory.

Scroll down to line 93 and replace with the following:

$db_prefix = array(
'default' => 'comm_',
'users' => '',
'sessions' => '',
'role' => '',
'authmap' => '',
'users_roles' => '',
'profile_fields' => '',
'profile_values' => '',
);

Save and close the file.

And again, scroll 3 quaters down (around line 169) and uncomment the line:

# $cookie_domain = 'example.com';

And change to:

$cookie_domain = '.local.com';

Repeat the same for support.local.com, although this time set the default $db_prefix to support_.

Save and close the file.

Navigate to each site in the browser and log out of each site. Now log in to www.local.com. Now if you navigate to support.local.com, you should be logged in, same with community.local.com.

We now have 3 sites with a shared user base and a single signon. As you may be able to tell from the $db_prefix array above, we are sharing the users table as well as sessions which keeps the user data and log in data the same across all the sites. We also share the role and users_roles tables to be able to set multi-sitewide roles as well as the profile tables so that the user doesn’t have to type any information over and over again.

Cleaning up unneeded MySQL tables

Now in our database, we have redundant tables which aren’t doing anything and aren’t being used. We can now delete these to keep the database a bit tidier. Delete the following tables:

• support_users
• support_sessions
• support_role
• support_authmap
• support_users_roles
• support_profile_fields
• support_profile_values
• comm_users
• comm_sessions
• comm_role
• comm_authmap
• comm_users_roles
• comm_profile_fields
• comm_profile_values

find . -exec grep -l "string to find" {} \;

This will search all subdirectories from the current directory for the “string to find”.

Step 1: The basics behind grid systems

Grid systems allow you to create a quick framework using HTML and set CSS styles to set up div tags in to a grid like formation which saves you from having to worry about floating elements and margins etc.

This tutorial is going to focus on a very basic grid that allows you to easily create 1, 2, 3, 4 column layouts. If you are looking for something that has more depth to it and more flexibility, it will be better to look at 960.gs or Blueprint CSS, as they will provide you with a lot more options on how you want to display your content.

Step 2: The start of the CSS

We need to set up some basic CSS rules to set up our grid elements or cells so that they line up in a grid like we want them to.

.cell, .cell-2, .cell-3 {
  float: left;
  display: inline;
  margin: 0 10px;
  position: relative;
}
.alpha { margin-left: 0; }
.omega { margin-right: 0; }

Our first rule is setting the cell to float and display inline with a 10px margin on the left and right. The next two rules allow us to remove the margin if we need to from the first rule. So with the following HTML, the second cell would have no right margin.

<div class="cell"><p>Text</p></div>
<div class="cell omega"><p>Text</p></div>

To make sure our cells line up properly on different rows we need to wrap them with another div which we will give the class grid.

.grid, .grid-2, .grid-3, .grid-4 {
  clear: both;
  overflow: hidden;
  margin-bottom: 1.5em;
}

This makes sure that the div is a new row if the row above doesn’t use the full width.

Step 3: The mathematics

The basis of grid systems is some simple mathematics. If you look at the 960.gs size and the column counts available, you can see that they are divisable to a whole number. 960/12 = 80 and 960/16 = 60.

To be able to start off with the maths, you need to decide on the width of the wrapper of the whole page. Take in to account the different resolutions that people use. At the moment the majority of users are using 1024×768, so the width shouldn’t be any more than 1000px wide (also take in to account a scrollbar on the right).

For this tutorial I am going to show the maths for a grid system with a width of 960px.

So we need to set the CSS for this:

.container {
  width: 960px;
  margin: 0 auto;
}

To work out the width of a single cell that fills the full width of the wrapper we need to divide the width of the container by the number of columns (in this case 1) then minus 20 (due to the 10px margin on both the left and right).

So; (960 / 1) – 10 – 10 = 940

.grid .cell { width: 940px; }

That is the most basic cell in the grid which will fill up the whole width of the container with the margins.

Now lets work out the width needed for a 2 column layout.

(960 / 2) – 10 – 10 = 460

.grid-2 .cell { width: 460px; }

This would be displayed using the following HTML:

<div class="container">
  <div class="grid-2">
    <div class="cell"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
  </div>
</div>

Let’s work through it backwards to make sure the maths works out. 460 + 460 = 920. That is the total width of the available content areas. But on top of that we need to add our margins in, we have the 10px on the far left, then there are 2 lots of 10px margins in the very centre of the grid and the last 10px at the very far right side of the grid making a total of 960px.

A 3 column layout can container 3 cells or 2 cells where one of the cells is the size of 2 single cells. So lets see how that works.

(960 / 3) – 10 -10 = 300

.grid-3 .cell { width: 300px; }

So, 3 x 300px = 900px + (20px x 3) = 960px. That is the CSS needed for 3 single cells.

<div class="container">
  <div class="grid-3">
    <div class="cell"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
  </div>
</div>

There are 2 easy ways to find out the width of the 2 cell.

One way, is to take the result of the single cell which in this case is 300, then add that on again to make 600. We then need to add 20 to that to take in to account the margin that is no longer needed between the cells.

((960 / 3) – 20) + ((960 / 3) – 20) + 20 = 620

The other way is to do the original sum without taking the margins off until you have the full width of 2 cells, like so:

((960 / 3) * 2) – 20 = 620

So the CSS would like this:

.grid-3 .cell-2 { width: 620px; }

With the HTML like this:

<div class="container">
  <div class="grid-3">
    <div class="cell-2"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
  </div>
</div>

We then use exactly the same principles for the 4 column layout.

Single cell: (960 / 4) – 10 – 10 = 220
Double cell: (220 + 220) + 20 = 460
Triple cell: (460 + 220) + 20 = 700

.grid-4 .cell { width: 220px; }
.grid-4 .cell-2 { width: 460px; }
.grid-4 .cell-3 { width: 700px; }

Which would give you the following combinations available:

<div class="container">
  <div class="grid-4">
    <div class="cell-3"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
  </div>
  <div class="grid-4">
    <div class="cell"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
  </div>
  <div class="grid-4">
    <div class="cell"><p>Text</p></div>
    <div class="cell"><p>Text</p></div>
    <div class="cell-2"><p>Text</p></div>
  </div>
</div>

Step 4: The result

The result should be the following:

.container {
  width: 960px;
  margin: 0 auto;
  padding: 1.5em 0;
}
.grid, .grid-2, .grid-3, .grid-4 {
  clear: both;
  overflow: hidden;
  margin-bottom: 1.5em;
}
.cell, .cell-2, .cell-3 {
  float: left;
  display: inline;
  margin: 0 10px;
  position: relative;
}
.alpha { margin-left: 0; }
.omega { margin-right: 0; }
.grid .cell { width: 940px; }
.grid-2 .cell, .grid-4 .cell-2 { width: 460px; }
.grid-3 .cell { width: 300px; }
.grid-3 .cell-2 { width: 620px; }
.grid-4 .cell { width: 220px; }
.grid-4 .cell-3 { width: 700px; }

I have tidied up the code slightly, as the width for a 2 column cell is the same as a double cell in a 4 grid system.

If you look at the source code for this site, you will see that there are 2 sets of widths defined. This is to cater for larger screens. A piece of javascript is triggered as soon as the page has finished loading and any resizing of the browser window which applies a class called wide to the body of the HTML. If the window width is larger than 1200px then the site will be displayed in a larger grid system. You could do the same using a stylesheet switcher to be able to change from a narrow to wide theme.

Step 1

Open Photoshop and create a new image how ever big you want it.

Step 2

Create a black bar using the rectangular marquee tool on a new layer.

Step 3

Using the same selection go to the Select menu and select feather, set to 10px. On a new layer fill this with white.

Step 4

Press Ctrl + T to transform the layer. Drag the bottom slider up to the top to shrink the layer.

Step 5

Move the layer in to place and set the opacity to 30%.

Step 6

Select the Single Row Marquee tool and create a selection, press and hold Ctrl + Alt + Shift and click on the preview area of the black box in the layers panel.

On a new layer fill with #00adef do this again and make sure they are one on top of the other so it’s 2px high.

Step 7

Now we will add some shading over the clue bar so it isn’t so bright.

Press and hold Ctrl and left click the preview area of the blue bar in the layers panel.

On a new layer fill the selection with black.

Press Ctrl + D to deselect the selection.

Go to Filter » Blur » Gaussian Blur and set to 1px.

Set the layer opacity to 60%.

Press V and move up 1px.

Step 8

Add extra details to it such as text and reflection and you are finished.

Step 1: The HTML

For the HTML we will use an unordered list so the navigation is accessible and will still partly work without the CSS file such as in text browsers.

<div class="steps">
  <ul>
    <li class="step step-1">
      <a href="#"><strong>Step 1</strong><br />Some random text that describes the step</a>
    </li>
    <li class="step step-2">
      <a href="#"><strong>Step 2</strong><br />Some random text that describes the step</a>
    </li>
    <li class="step step-3">
      <a href="#"><strong>Step 3</strong><br />Some random text that describes the step</a>
    </li>
  </ul>
</div>

This will leave us with the following – view step 1 result.

Step 2: Style with CSS

We now need to make it pretty, firstly we reset the default CSS rules applied to unordered lists by the browsers.

.steps ul, .steps li {
  margin: 0;
  padding: 0;
  list-style: none;
}

This resets the margins and padding around each the list itself and each list element within the list as well as removing the list-style (i.e. the bullet).

To make the elements appear side-by-side rather than on top of one another, we need to float the list elements.

.steps ul { float: left; }
.steps li {
  float: left;
}

This will leave you with your list elements side-by-side. View the result of step 2.

Step 3: Make the steps in to arrows

The next step is to add in our arrows to be background images.

.steps li a {
  display: block;
  padding: 15px 20px;
  color: #fff;
  line-height: 1.5em;
  text-decoration: none;
}

This makes the anchor tags act like block level elements so that they fill out in to their parent item which is the <li>. We also add some padding and set the line-height to make it look nicer.

Next we add in the background images for our list elements. You can use these images for the time being to speed up the process, just right click them then save them in the same folder as your CSS file. Normal & Hover. The images are basic PNGs with transparent sections on the end of arrow. There is also a 1px stroke to the right which gives you the seperator between the steps. The images should be as wide as your container, the reason for this is mentioned in step 5.

.steps li.step a { background: transparent url(step.png) center right no-repeat; }
.steps li.step a:hover { background: transparent url(step_over.png) center right no-repeat; }

This adds in the images to our steps with the hover state. View result of step 3

Step 4: Setting the width and aligning the steps

As you can tell from the result of step 3, we have a bit of a mess now. So now we can clear it up. My example is wrapped in a container which is 960px wide, so what I am going to do, is divide that by 3 as I have 3 steps. That means each step should be 320px wide. So alter the CSS for .steps li to the following:

.steps li {
  float: left;
  width: 320px;
}

This now lines our steps side-by-side again with the text wrapped to fit in the width, but the arrows are stop start and aren’t covering each other.

To get around this, we use a negative margin to pull the element to the left, although we only apply this to the 2nd and 3rd steps.

.steps li.step-2, .steps li.step-3 { margin-left: -30px; }

Now you will notice a new problem. The later steps are covering the earlier steps so the arrow isn’t visible. To get around this, we will use the CSS property z-index to change the layering on the z-axis.

For z-index to be effective though, we also need to change the positioning type of the list element and child anchor.

.steps li.step, .steps li.step a {
  position: relative;
  z-index: 3;
}
.steps li.step-2, .steps li.step-2 a { z-index: 2; }
.steps li.step-3, .steps li.step-3 a { z-index: 1; }

Once again we have created more problems. The first one being that some of the text is now hidden beneath the arrow of the preceeding step. We can get around this by adding some extra padding.

.steps li.step-2 a, .steps li.step-3 a { padding-left: 50px; }

The 50px comes from the -30px which is the left negative margin + the extra 20px of padding we defined earlier on for each anchor element.

The negative margins also made the total width of our stepped element less than 960px so we have a gap at the end. With some simple maths we can work out the new width that each list element must be to fit the 960px width. We have a 960px container with 2 elements with negative margins of 30px, so 960px + 60px = 1020px. Now we divide that by 3 to get our new width which is 340px.

.steps li {
  float: left;
  width: 340px;
}

This then leaves us a lot closer to our goal. View result of step 4.

Step 5: Fix the background position of the last step

The arrow is showing on the 3rd step although it doesn’t go anywhere, it is the end. To fix this, we just need to change the background position for step 3, this is the reasoning for our images being long.

.steps li.step-3 a { background-position: center left; }
.steps li.step-3 a:hover { background-position: center left; }

We change the background image to be aligned to the left so it is solid colour, as we made the images longer than the content, unless there is only 1 step (why would you be doing this tutorial if you only had 1 step?) the arrow won’t be seen.

Then you have a finished stepped navigation. View result of step 5.

Then with a little extra CSS for text formatting and some borders on the parent element you are left with the final result.

Unfortunately from what I can tell Drupal’s pagination function only works with SQL queries so we are unable to use the existing data available in the node object. But due to Drupal’s nice database schema, it is very simple to write some simple SQL to give us the pager.

Below is the full code and below the code I will explain what each part does.

<?php
$count = count($node->field_images);
if ($count > 0):
	$images_per_page = 9;
	$sql = "SELECT f.fid, i.field_images_data, f.filepath FROM content_field_images i JOIN files f ON f.fid = i.field_images_fid WHERE nid = ". $node->nid;
	$count = "SELECT COUNT(f.fid) FROM content_field_images i JOIN files f ON f.fid = i.field_images_fid WHERE nid = ". $node->nid;
	$query = pager_query($sql, $images_per_page, 0, $count);
	while ($data = db_fetch_object($query)) {
		$images[$data->fid] = array(
			'filepath' => $data->filepath,
			'data' => unserialize($data->field_images_data),
		);
	}
	$rows = array();
	$images_per_row = 3;
	$i = 0;
	$row = 0;
	foreach ($images as $image) {
		$rows[$row][$i] = '<a class="gallery-thumbs" title="'. htmlspecialchars($image['data']['description']) .'" rel="lightbox[photo_gallery-'. $node->nid .']" href="'. imagecache_create_url('lightbox', $image['filepath']) .'">'. theme('imagecache', 'thumbnail', $image['filepath'], $image['data']['title'], $image['data']['title']) .(trim($image['data']['description']) != '' ? '<br /><small>'. $image['data']['description'] .'</small></a>' : '');
		$i++;
		if ($i == $images_per_row) {
			$row++;
			$i = 0;
		}
	}
	?>
  <table class="views-view-grid">
    <tbody>
      <?php foreach ($rows as $row_number => $columns): ?>
        <?php
          $row_class = 'row-' . ($row_number + 1);
          if ($row_number == 0) {
            $row_class .= ' row-first';
          }
          elseif (count($rows) == ($row_number + 1)) {
            $row_class .= ' row-last';
          }
        ?>
        <tr class="<?php print $row_class; ?>">
          <?php foreach ($columns as $column_number => $item): ?>
            <td class="<?php print 'col-'. ($column_number + 1); ?>">
              <?php print $item; ?>
            </td>
          <?php endforeach; ?>
        </tr>
      <?php endforeach; ?>
    </tbody>
  </table>
  <?php print theme('pager', array(), $images_per_page, 0); ?>
<?php else: ?>
  <p>No images in album</p>
<?php endif; ?>

First thing we do is check to see if there are any images. Rather than doing a SQL query to get the result, I have chosen to use the already existing array of images in the node object.

$count = count($node->field_images);

Then as before we check to make sure we have images, then create our query to generate the pager.

$images_per_page = 9;
	$sql = "SELECT f.fid, i.field_images_data, f.filepath FROM content_field_images i JOIN files f ON f.fid = i.field_images_fid WHERE nid = ". $node->nid;
	$count = "SELECT COUNT(f.fid) FROM content_field_images i JOIN files f ON f.fid = i.field_images_fid WHERE nid = ". $node->nid;
	$query = pager_query($sql, $images_per_page, 0, $count);
	while ($data = db_fetch_object($query)) {
		$images[$data->fid] = array(
			'filepath' => $data->filepath,
			'data' => unserialize($data->field_images_data),
		);
	}

In the query, we are gathering the file id (fid) of each individual image, the field_images_data which is a serializd array of the title, description and alt text of the image from when it was uploaded and the filepath of the image. The count isn’t necessarily needed, but I have found the pager can act oddly when the $count part of pager_query() is missing.

pager_query() also requires 2 other elements. The first after $sql, is the amount of rows to be taken out the database. The next number is the element number. This is needed for pages with multiple pagers on them. If you have got multiple pagers and experience trouble then you will need to change this.

Then from this we recreate the $images array that we had before, although it is missing some information which is provided through the $node object, it provides everything that we need to display the image on the page.

The whole table HTML section remains untouched, but it is followed by an extra line:

<?php print theme('pager', array(), $images_per_page, 0); ?>

This prints out the Drupal pager below out table of images. This can be used multiple times on a page, so you can have some pagination below and above the table of images.

If the page you are displaying the albums on already has pagers, you may need to change the 0 in both the theme_pager() and pager_query().

You should now have a fully working grid with pagination.

Edit: As pointed out by dukat in the comments, you can change the original SQL query to the following to keep the images in the order defined in the node.

$sql = "SELECT f.fid, i.field_images_data, f.filepath FROM content_field_images i JOIN files f ON f.fid = i.field_images_fid WHERE nid = ". $node->nid ." ORDER BY i.delta ASC";

Obviously you can change the order between ASC or DESC.

Kotick was also offered the chance to buy Blizzard in the 1990s for $7 million, and then in the early 2000s for $700 million.

[12:10] “I took a look at World of Warcraft and I thought, ‘Who would want to buy a subscription to that?’”

[12:10] “So, of course we ended up merging with them in 2008 when they were worth $7 billion.”

You can buy World of Warcraft for just £4.99 from Amazon.

Activision Blizzard owns the following gaming brands:

Crash Bandicoot series
Guitar Hero series
Call of Duty series
Tony Hawk franchise
Spider-Man series
Spyro the Dragon series
Warcraft series
StarCraft series
Diablo series

The Logitech G7 went down the route of 2 seperate batteries that could only be used in the G7. Only one battery could be used at a time, so while that was in use the other could be recharged in the charging dock, which also had a USB port for the USB receiver. It worked well, but could be a bit annoying when the battery ran out of juice mid-way through a game or work, but it only took a couple of seconds to swap. At first the batteries lasted around 7-8 hours each between charges which was more than enough generally for 2-3 days of use. But over the years the battery life has shrunk to less than an hour on both which made the mouse more and more frustrating. Unfortunately as good as the mouse was, very comfortable and with a relatively good sensitivity (2000dpi), new batteries for the mouse would of cost around the same as what the moues is worth second hand. So for the second time since owning the G7 I went out looking for a new mouse. My first outing resulted in buying the corded Razer Lachesis. That didn’t last long though, the feel of the mouse was wrong, the mouse was too light and the shape of the buttons never felt right as well some issues with the mouse not being usable upon Windows start up which I imagine was down to drivers.

So now the Microsoft Sidewinder X8 is in, same price as both the Razer Lachesis and the Logitech G7 but is packed with a lot more features.

It comes with one standard rechargable AA battery, so the battery can be charged using a standard battery recharger or the more useful and usable charger that also acts as a receiver. In what looks like a hockey puck is a small wire wrapped around the middle with a small pad with 3 metal elements on it. This attaches magnetically to the bottom of the mouse but in such a way as not to pull off easily. This provides a charging facility over USB which is great as when the battery is running low, you can just plug the cable in and carry on as normal, then when the battery is charged up, just take the cable out and carry on, no changing batteries required here.

Another nice touch is that in the hockey puck like receiver is a set of 2 feet for the mice with different levels of slipperiness to go with the standard feet on the mice, so you have 3 sets of feet.

The mouse has different resolution settings like the G7 and Lachesis but like the Lachesis goes all the way to 4000dpi. The Lachesis and G7 have 2 buttons below the scroll wheel to go up and down the sensitivity settings, the X8 offers 3 buttons allowing 3 different settings. The X8 also features a nice LED screen next to the thumb which tells you the DPI as well as the battery charge state, I feel it would of been better to be more like the G7 and allow more than 3 settings and to be able to scroll through as you would easily be able to tell which sensitivity you are on by looking at the LED screen.

The scroll wheel on the X8 feels very solid with a textured metal finish allowing good grip which although I think it shouldn’t, actually feels better than the rubber used on both the Lachesis and G7 and gives a reassuring click sound when pressed.

So far I highly recommend the X8 at the moment I would say it is a better mouse than the G7 and definately better than the Lachesis from my experiences, but only time will tell.

The result

Tutorial

Step 1: Create new document

Open Photoshop and create a new document at whatever size you wish, I will be creating mine at 400×240.

Step 2: Set the background colour

Set your foreground colour to #b7e0ff and fill the background by either pressing Alt + Backspace or going to Edit > Fill (Shift + F5) and selecting the foreground colour.

Step 3: Create the cloud shape

Select the elliptical marquee tool and draw multiple circles on the canvas, creating the shape of the cloud. To add to the initial selection, hold Shift while drawing the additional circles.

Create a new layer and fill the cloud selection with #79b4e0. With the selection still active, create another layer and fill with #cde9ff. Move this layer up 3 or 4 pixels.

Step 4: Add some additional depth to the cloud

With the selection still active, create another layer. This time select the gradient tool and set the foreground colour to white. Then for your gradient settings, set the gradient to go from foreground to transparent.

Go to Select -> Modify -> Contract and set to 2 or 3px, press OK.

Now draw a gradient from just above the top of your cloud shape to the bottom of the cloud shape.

You cloud is now complete.

Result

Before we delve in to HTML and CSS, you need to understand the basic structure of the page to know how to write your HTML. To do this, on paper or Photoshop draw out the basic layout.

With the basic wireframe of the site you can now write out the basic HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>2 Column Layout</title>
</head>
<body>
  <div id="wrap">
    <div id="header">
    	<h1>Site name</h1>
    </div>
    <div id="navigation">
      <ul>
      	<li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div>
    <div id="content_area">
      <div id="content">
        <h2>Heading</h2>
        <p>Mauris sit amet lectus at sem fringilla tincidunt. Phasellus ornare mollis egestas. Donec a sapien metus, sit amet faucibus dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nec tortor nec velit dapibus elementum. Fusce blandit accumsan sagittis. Suspendisse sodales gravida risus rutrum facilisis. Vestibulum at velit id arcu egestas condimentum. Aenean laoreet leo sit amet eros eleifend pretium condimentum ac arcu. Vestibulum volutpat hendrerit urna, sit amet laoreet eros volutpat et.</p>
      </div>
      <div id="sidebar">
        <div class="block">
          <h3>Block header</h3>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
            <li>Item 10</li>
          </ul>
        </div>
      </div>
    </div>
    <div id="footer">
    	<p>Copyright somerandomsite 2010</p>
    </div>
  </div>
</body>
</html>

This gives the bare markup needed for the layout.

For the CSS we will go through each separate HTML element.

Wrapper

We start the document off with a div with an id of wrap. This gives us a container that we can set a width to as we can’t set a width to the body tag.

#wrap {
  width: 980px;
  margin: 0 auto;
}

This sets the width of the container to 980px. Setting the margin to 0 auto means that the top and bottom margins are set to 0 and the left and right margins are set to automatically generate. The browser will then set the left and right margins to be the same which results in the container being centered in the body.

Header

For the header, we will need to style the header div itself as well as the h1 tag inside it.

#header { background: #c00; }
#header h1 {
  color: #fff;
  margin: 0;
  padding: 30px 10px 10px 30px;
  font-size: 6em;
  font-weight: normal;
}

With this CSS we are making the background color of the div with id header to #c00 which is a dark red. As divs are block level elements it will automatically fill the width of it’s parent which is our div with the id wrap. So we have a div with a red background which is 980px wide.

Within our header div we have an h1 tag. For this we change it to white by using color: #fff. We then remove any margins on the h1 tag which are applied automatically by the browser then set some padding around the text so that it doesn’t touch the edge of the div. To make it stand out we make the font-size 6x bigger than the standard font-size of the page which you can specify in the body CSS, and make the font-weight normal rather than bold.

Navigation bar

The navigation bar is made from an unordered list which allows internet robots (search engines) and screen readers (browsers for blind/hard of sight users) to navigate the site properly. You could make it using a p tag with spaces between the links but that wouldn’t be good for accessibility or SEO.

#navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  background: #00c;
  width: 100%;
}
#navigation ul li {
  float: left;
  width: auto;
}
#navigation ul li a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
  font-size: 1.4em;
  font-weight: bold;
}
#navigation ul li a:hover {
  color: #00c;
  background: #fff;
}

The first thing we do is to reset the default styling given to unordered lists (the bullet points etc) by resetting the margin, padding and list-style (bullet points). Then we float the whole list to the left so that the ul element takes the height of the children list elements. We also set the background colour and set the width to 100% so that it takes the whole width of the container, otherwise the background colour would stop after the last list element.

Each list element within the unordered list is floated to the left so they all line up next to each other. We also define the width as auto, if you don’t do this the CSS validator will mark your code as invalid CSS.

Each anchor tag with in the list is giving some padding to give space to each link. We have to define the display of each anchor tag as block so that we can apply vertical padding to each link, this also allows better hover styling as the cursor doesn’t have to be on the text and can be anywhere within the padded area. As well as the padding the colour is changed to make the text contrast the background and we remove the default text-decoration of anchor tags which is the underline by setting it to none. I also made the font slightly bigger and bold.

As well as the default state of the anchor tags, we can also define the hover attribute using a pseudo class called :hover. When the user hovers their mouse over the HTML element defined by the selector the browser will pick up on these CSS changes and will be reverted as soon as the mouse stops hovering over the element. Here we are just changing the colour and background so that the user can see that it has a click-able action.

Content area

Our content area div is a minor container div to enclose the main content and sidebar. You don’t have to use this, but it makes it a lot easier to style and line up elements in all the browsers.

#content_area {
  clear: both;
  padding-top: 10px;
}

The clear attribute makes sure that any floating elements are cleared, so essentially the div will appear on the next free line below any floating elements and allows us to put some padding between the navigation and our content. With out the clear attribute, the padding would have no effect.

Content

#content {
  float: left;
  width: 75%;
}
#content h2, #content p {
  padding: 0 10px 0 20px;
}
#content h2 {
  font-size: 3.0em;
  margin: 0;
}
#content p {
  font-size: 1.2em;
}

The first thing we do is set the width of our content div and float it to the left, this allows the sidebar to go along side it.

We also apply some standard CSS rules to add padding and change the font size of elements within the content div.

Sidebar

#sidebar {
  margin-left: 75%;
}
#sidebar h3 {
  font-size: 1.6em;
  margin: 0;
}
#sidebar li {
  font-size: 1.2em;
}
.block {
  border: 1px solid #000;
  padding: 10px;
  margin: 5px;
}

To get the sidebar to move up to the right of the content we need to make sure that it isn’t trying to display on top or behind it. To do this, we apply a left margin to the sidebar, the left margin should be the same or bigger (if you want to include a space between your sidebar and content) than your content width. You can also do this by setting the width and floating it to the left or right, but this can cause complications especially when you have more than 2 columns.

As with the content we apply some basic styling to the elements within the sidebar.

Footer

#footer {
  clear: both;
  background: #aaa;
}
#footer p {
  padding: 10px 20px;
  color: #fff;
  font-size: 1.3em;
}

Much like the content area we need to clear any floating elements above it. I have also change the background colour to a light grey.

A class can be applied to any HTML element to allow you to easily target it using CSS to add styling and change the way it is presented to the user. In CSS classes are selected using a full stop followed by the name of the class.

HTML

<div class="classname">
  <p>This is some text in a paragraph tag.</p>
</div>

CSS

p { font-size: 12px; }
.classname { border: 1px solid #ddd; }
.classname p { font-size: 14px; }

This would display like this:

The original p selector in the CSS is overwritten by .classname p, so the font size of any p tag within a parent with a class of classname will be 14px.

If you were to have two paragraph tags within the div but wanted them styled slightly differently, then you could add a class to one of the paragraph tags.

HTML

<div class="classname">
  <p class="large">This is slightly larger text.</p>
  <p>This is some text in a paragraph tag.</p>
</div>

CSS

p { font-size: 12px; }
.classname { border: 1px solid #ddd; }
.classname p.large { font-size: 14px; }

As you can see the first paragraph is larger than the second paragraph. This is because the second paragraph is picking up the default font-size that we specified in the CSS file. The first paragraph is using a larger font size due to the CSS rule .classname p.large.

Classes can be reused as many times as you like in an HTML document. If you have a constant style that you wish to apply on elements through the page, you can create a single CSS class and reuse it.

Id’s

Id’s can be styled in much the same way a class can, but rather than using a full stop as a selector, we use the hash tag (#). Unlike CSS classes though, an Id can only be used once per page. The benefit of using Id’s is that you can link to them with anchor tags.

HTML

<div id="tut_header"><p>Site name</p></div>
<!-- Insert random HTML -->
<p><a href="#tut_header">Back to header</a></p>

So if you had a long page of content, clicking the link will make the page move up so that the div with the id tut_header will be the top most point. Using ids can be useful for creating ‘Back to Top’ buttons.

As Open Atrium is a Drupal installation profile, it runs using PHP and MySQL, which means other than hardware cost it is free to get started and run. It features a few familar modules to any Drupal user such as Views and Organic Groups but also introduces some lesser known modules such as Features and Spaces.

It is currently in beta and is currently at beta 3.2 which can be downloaded the from Open Atrium website.

You can install it like you would any Drupal installation, but during installation you are given the choice to install Drupal standalone or Drupal with Open Atrium’s modules and configuration preinstalled.

Features include a blog for updates, a calendar for events, documents which uses the books module to produce a hierachial display of all the documents you want to store, a shoutbox and a case tracker which is ideal for development teams. Each feature can be turned on or off within each organic group which means you can easily divide internal teams in to different groups to keep the intranet a bit tidier than it would if it was all in one place.

Introducing Open Atrium from Development Seed on Vimeo.

Taken from the Zen project page:

Zen is the ultimate starting theme for Drupal. If you are building your own standards-compliant theme, you will find it much easier to start with Zen than to start with Garland or Bluemarine. This theme has fantastic online documentation and tons of code comments for both the PHP (template.php) and HTML (page.tpl.php, node.tpl.php).

Why use Zen?

Zen gives a great framework for you to work from as a lot of the hard work in making the default Drupal CSS rules easier to customise as well as having a starter kit for you to modify giving you the basics to create your own theme without needed to mess around with the in’s and out’s of Drupals theming system.

Where do I get Zen?

You can download Zen from the project page on Drupal.org. As of writing there are 2 versions available for Drupal 6; Zen 6.x-1.1 and Zen 6.x-2.0-beta1. We will be using Zen 6.x-1.1 as it isn’t a good idea to use modules or themes that are in alpha, beta or RC on a production site.

How do I install Zen?

Once you have downloaded the file from Drupal.org you will need to extract the zen folder and place it in your /sites/all/themes directory. You will need to create a directory called themes within the /sites/all directory if it doesn’t already exist.

If you need a program to extract the file from Drupal.org, I recommend you use 7-zip which is a freeware application.

How do I start using Zen?

Within the Zen directory is a directory called STARTERKIT. Copy this folder and return to the /sites/all/themes directory. Paste the STARTERKIT directory from your clipboard into this directory. You should have a tree structure like the below:

+ sites
|-+ all
| |-+ themes
| | |-- zen
| | |-- STARTERKIT

Rename the STARTERKIT directory to the name you wish to give your theme. This is the machine name that is used in the backend so you have to use lowercase characters and use underscores (_) instead of spaces.

For this tutorial we will name the theme drupal_theme, which gives us the following tree structure.

+ sites
|-+ all
| |-+ themes
| | |-- zen
| | |-- drupal_theme

Navigate within your drupal_theme directory and rename the file STARTERKIT.info.txt to yourthemename.info, in my case it will be drupal_theme.info.

Open the file in your editing program.

Change the name from name = Zen Sub-theme Starter Kit to name = Your Theme Name and change the description to a description of your theme.

Also change the STARTERKIT.css text to yourthemename.css, in my case it will be drupal_theme.css.

Save and close the file.

You need to make a choice as to whether you would like your theme to be a liquid layout, i.e. it will stretch the width of the browser so there is no whitespace on either side of the site or a fixed layout site where the site is a fixed width dependant of the browser window.

Liquid/adaptive width

Copy the file layout-liquid.css from the /sites/all/themes/zen/zen directory to the /sites/all/themes/yourthemename directory. Then rename the file layout.css

Fixed width

Copy the file layout-fixed.css from the /sites/all/themes/zen/zen directory to the /sites/all/themes/yourthemename directory. Then rename the file layout.css

Copy over the following CSS files from /sites/all/themes/zen/zen to your /sites/all/themes/yourthemename directory.

• zen.css
• print.css
• html-elements.css

Rename the zen.css to yourthemename.css, in my case it will be drupal_theme.css.

In your theme folder, open and edit the files template.php and theme-settings.php, replacing all instanced of STARTERKIT with your theme name, so I replaced all instances of STARTERKIT with drupal_theme.

While logged in as a user with rights to the admin pages, navigate to Administer > Site building > Themes (admin/build/themes) and set your theme to default and save.

How do I customise the theme?

The structure of the page as in the way the sidebar, header, content, footer is layed out is mostly in the php files within the Zen theme and the CSS files we copied over to our theme folder allows us to change the styling of these items to make them appear the way we want.

Change the font size

The default font size is defined in the html-elements.css file.

  #page
  {
    /*
     * To use a 12px font size on the page, delete the 14px declarations.
     * to use a 14px font size on the page, delete the 12px declarations.
     */

    /* Use a 12px base font size with a 16px line height */
    font-size: 0.75em; /* 16px x .75 = 12px */
    line-height: 1.333em; /* 12px x 1.333 = 16px */

    /* Use a 14px base font size with a 18px line height */
    font-size: 0.875em; /* 16px x .875 = 14px */
    line-height: 1.286em; /* 14px x 1.286 = 18px */
  }

The #page rule is the wrapper that surrounds all the code. So anything we apply to this will be applied to all elements under it unless they are overwritten later on in the CSS file. By default the font size is set to 14px as it is the latter rule of the two. If you wish to reduce the font size to 12px, simply delete the last three lines (you can also delete the additional comments at the top of the rule), so you get the following:

  #page
  {
    /* Use a 12px base font size with a 16px line height */
    font-size: 0.75em; /* 16px x .75 = 12px */
    line-height: 1.333em; /* 12px x 1.333 = 16px */
  }

How do I change the background colour?

In the yourthemename.css file, change the body rule from:

body
  {
    margin: 0;
    padding: 10px;
  }

To:

body
  {
    margin: 0;
    padding: 10px;
    background-color: #c00;
  }

Where you change the colour to what ever you want. If you don’t know the hex value for the colour you want to use, you can use the RGB colour in the following format:

body
  {
    margin: 0;
    padding: 10px;
    background-color: rgb(204, 0, 0);
  }

Or you can find the hex colour in this hex colour reference chart.

How do I add an image to use as my background?

In the yourthemename.css file, change the body rule from:

body
  {
    margin: 0;
    padding: 10px;
  }

To:

body
  {
    margin: 0;
    padding: 10px;
    background: #fff url(background.jpg) top center repeat;
  }

Place the image in your theme folder. Alternatively if you want to keep your theme folder as tidy as possible, you can create a folder called images within your theme folder and change the CSS code to:

body
  {
    margin: 0;
    padding: 10px;
    background: #fff url(images/background.jpg) top center repeat;
  }

If you chose a background image that makes the text hard to read, you can change the background colour of the #main element, which is the wrapper of all the main content excluding the header and footer, to white.

#main
  {
    background-color: #fff;
  }

You can continue editing your theme by editing the CSS rules within the main CSS file (yourthemename.css). For more references on CSS, check out the Top HTML/CSS resources for beginners post.