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.

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

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.

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.

In my case it was caused by the Secure Pages module. To fix this add the following line to your Secure Pages configuration under Ignore pages:

*ajax*

imce*

Go back to your node add/edit page and you should now have the add button in IMCE.

Create a new module, I will call mine node_publish.

The first thing I will do is create a callback function that will be used to publish the node. To do this, I will first create a menu item using hook_menu().

function node_publish_menu() {
  $items['node/%/publish'] = array(
    'title' => 'Node published',
    'page callback' => 'node_publish_publish',
    'page arguments' => array(1),
    'access arguments' => array('administer nodes'),
    'type' => MENU_CALLBACK,
  );
  return $items;
}

This uses the menu path of node/<nid>/publish, much the same way that node/<nid>/delete and node/<nid>/edit work. This will call the function node_publish_publish.

function node_publish_publish($nid) {
  if (is_numeric($nid)) {
    db_query("UPDATE {node} SET status = 1 WHERE nid = %d", $nid);
  }
  if (isset($_REQUEST['destination'])) {
    drupal_goto($_REQUEST['destination']);
  }
  else {
    drupal_goto('node/'. $nid);
  }
}

This function takes the nid out of the path and checks to make sure it is numeric, if it is we set the status to published for that node.

Once the node is published, we will redirect the user to another page. In this case I have looked to see if a destination is already set, if so go to it, otherwise return to the node view.

Now you can create a link to node/<nid>/publish in any of your other modules or views which will publish the node. But this tutorial is going to expand to adding a button on to the node edit form to allow you to publish, rather than having to check the Published box then press Submit.

function node_publish_form_alter(&$form, $form_state, $form_id) {
  global $user;
  global $base_url;
  if (strstr($form_id, '_node_form') && $form['nid']['#value'] != '' && $form['options']['status']['#default_value'] == 0) {
    if (user_access('administer nodes')) {
      $form['buttons']['publish'] = array(
        '#type' => 'button',
        '#value' => 'Publish',
        '#submit' => FALSE,
        '#attributes' => array(
          'onclick' => 'return false;',
          'style' => 'display:none;',
        ),
      );
      drupal_add_js('$(document).ready(function() {
        $("#edit-publish").show();
        $("#edit-publish").click(function() {
          window.location = "'. $base_url .'/node/'. arg(1) .'/publish";
          return false;
        });
      });', 'inline', 'footer');
    }
  }
}

The above should be self explanatory to most people, but for those that it isn’t:

First we get the data for the $user object and the $base_url of the site. Then we check to make sure the form_id ends with _node_form as this will cover all nodes. We then make sure that the $form array doesn’t have an empty nid value, if it does then the form is for a new node and shouldn’t feature the publish button. We then check to make sure that the node isn’t already published, if it is there is no point in showing the publish button.

We then perform a check to make sure the user has access to publish nodes. If they have then we add in a simple button with an onclick attribute of return false, which will stop it acting like a submit button for users with javascript. For users without javascript the style attribute will remove the button from view allowing the user to use the checkbox and press submit.

The jQuery that we have firsts shows the button, as it is hidden by default, then set up a click function for the button. We direct the user to the publish page which will then take them to the node view. Alternatively you can modify the jQuery to do a POST action and publish the node in the background and also check the published box allowing further modification of the node.

Update: I have written an updated tutorial with code to allow you to have pagination on your grid of images.

In your content type, go to Display fields and set the Full node to <Hidden>. This will take the images out of the $content variable.

Then in your theme, copy the existing node.tpl.php and create a new identical file called node-album.tpl.php (the album part with be the content type name that you used from the tutorial.)

Below the content section, add the following PHP code:

<?php
$images = $node->field_images;
if (count($images) > 0):
  $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 else: ?>
  <p>No images in album</p>
<?php endif; ?>

The table code is a direct copy from views-view-grid.tpl.php so the code should look identical to the Album view.

Replace the following with your own settings:

imagecache_create_url('lightbox', $image['filepath'])

Change lightbox for the name of the imagecache preset that should open up within the lightbox.

theme('imagecache', 'thumbnail', $image['filepath'], $image['title'], $image['title'])

Change thumbnail to the name of the imagecache preset that should be displayed.

To add more columns to your grid, change the $images_per_row variable.

Update: I have written an updated tutorial with code to allow you to have pagination on your grid of images.

This tutorial was written with the following versions of Drupal and module:

• Drupal 6.11
• CCK (Content Construction Kit) 6.x-2.2
• Views 6.x-2.5
• Filefield 6.x-3.0
• Imagefield 6.x-3.0
• ImageAPI 6.x-1.6
• Imagecache 6.x-2.0-beta9
• Lightbox2 6.x-1.9

Note: These were the latest versions as of writing this tutorial.

Installation

Install Drupal as normal and extract each of the modules to /sites/all/modules directory.

Navigate to /admin/build/modules and enable the following modules:

• Content
• Filefield
• Imagefield
• ImageAPI
• ImageAPI GD2 (unless your server is configured for Imagemagick, then enable the ImageMagick module instead)
• ImageCache
• ImageCache UI
• Lightbox2
• Views
• Views UI

Once you have ticked all the modules, press Save configuration.

Imagecache

You may wish to create more presets, but for this tutorial we will just create 2, a thumbnail for each image and a larger lightbox image.

Navigate to /admin/build/imagecache and click Add new preset.

Set the preset Namespace to thumbnail. Click Add Scale and Crop, set the width to 300 and the height to 200.

Then create a new imagecache preset with the name lightbox. This time select Add Scale and set the width to 800 and the height to 600.

CCK Imagefield

We will need to create a content type that we will use for our albums.  To keep this simple, I am calling mine Album with the machine name album.

Navigate to /admin/content/types and click Add content type.

Under Submission form settings, set the Title field name to Album name and set the Body field label to description.

Save the content type.

Next to the Album content type click manage fields. In the Add New field area, set the label to Images and the field name to images (to make it field_images), for the Type of data to store, select File then for Form element select Image.  Press Save.

You may need to set the Permitted upload file extensions.  By default mine was set to txt.  Change this to jpg gif jpeg png.

Under Global settings, tick the Required box and set the Number of values to Unlimited.  Leave the List field disabled and set the Description field to Enabled.

Then press the Save field settings button.

Now click the Display fields tab at the top of the page.

Set the Label to Hidden and set both the Teaser and Full node to Lightbox2: thumbnail->lightbox.

Now under /node/add/album we can add some images to go in to our album.

For now create 3 or 4 albums.

Under /admin/content/node you should now have some nodes.

Views

Navigate to /admin/build/views and click the Add tab at the top of the page.  Set the view name to something like albums, leave the View type set to node and click Next.

Set the title to Albums. For Style set to Grid then chose 3 columns and set Alignment to Horizontal.

For Use pager set to Full pager.  Then for Items per page, set to a multiple of 3, I am going to use 9 to give us a 3×3 grid of images. If you wish, you can set Use AJAX to Yes to stop the whole page being loaded on the pager.

Add the following Filters:

• Node: Published = On
• Node: Type = Album

Under Fields select Content: Images (field_images), Node: Body and  Node: Title.

Set Label to None and change Format to thumbnail image and set the Show value to 1 value. Tick the box that says Link this field to its node, this will allow the image to be clickable. Press Update.

For node body, delete the text in the Label field and press Update.  If you have used long descriptions for your albums, you may wish to use the Trim this field to maximum length to limit the length of the description.

For title, delete the Label text and tick the box next to Link this field to its node, press Update.

At the moment Drupal has these fields in the wrong order, so you will need to click the up and down arrow next to the + button on fields.

And reorder the fields in to the following order: Image –> Title –> Body or if you wish you can keep them how they are.

Under Relationships, click the + button and select Content: Images (field_images) – fid.

Tick the box that says Require this relationship and set the Delta to 1.  This will check to make sure that the album contains at least 1 image.  Setting Delta to all will result in odd behaviour in the album due to duplicates.

If you wish you can add some sort criteria so that the newest albums appear first etc.

On the left select Page from the drop down and click Add display.

Under Path set to albums.

Press Save.

Now if you navigate to /albums you can see your gallery in action.

For your album nodes, you can modify them however you want to get the display you are looking for, whether you use Panels or create a custom node-album.tpl.php is up to you.

Update: I have now written a tutorial on creating a grid of images within an album using the node-album.tpl.php method.

You can fix this without hacking the email_registration.module file.

Fix

While logged in as an admin (if you can’t get in to the site to login, go to http://www.domain.com/user, as this will only load up the main user login form and not the block), go to Admin –> Site Building –> Blocks.  Click Configure next to User login.  Under Block type, select the radio button that says Standard. Then save the block.  Now try to visit the site as an anonymous user and it should be working.

Hack fix

Within the email_registration.module file, you will need to add some code to the module.

On lines 59-62, you will find the following:

case 'user_login_block':
  $form['name']['#title'] = t('E-mail');
  $form['#validate'] = array('email_registration_user_login_validate' => array()) + $form['#validate'];
  break;

You need to change it to this:

case 'user_login_block':
  if (!empty($form[‘#validate’)) {
    $form['name']['#title'] = t('E-mail');
    $form['#validate'] = array('email_registration_user_login_validate' => array()) + $form['#validate'];
  }
  break;

Save the module and it should work as expected.

The problem

Logintoboggan adds the ability to change the appearance of the user login block to show just a link rather than the form that Drupal usually ships with, this in turn means that there are no $form array elements for hook_form_alter to use.

HTTP request status

Your system or network configuration does not allow Drupal to access web pages, resulting in reduced functionality. This could be due to your webserver configuration or PHP settings, and should be resolved in order to download information about available updates, fetch aggregator feeds, sign in via OpenID, or use other network-dependent services.

It took a while to find the solution, but I eventually found it on drupal.org. The solution was posted by mrSjoerd.

1. Open up the hosts file which is located at C:\Windows\System32\drivers\etc in notepad
2. You should find a line like the following at the bottom:
   ::1             localhost
3. Add a # in front of it to make it look like this:
   #::1             localhost
4. Save the file and close notepad.
5. Refresh the status page in Drupal and the error should be gone.  This should work without a restart, but if it doesn’t work without a restart it is worth a try.

This tutorial was written with the following versions of Drupal and modules:

• Drupal 6.10
• CCK (Content Construction Kit) 6.x-2.1 (6.x-2.2)
• Views 6.x-2.3 (6.x-2.5)
• Filefield 6.x-3.0-beta1 (6.x-3.0-rc1)
• Imagefield 6.x-3.0-beta1 (6.x-3.0-rc1)
• ImageAPI 6.x-1.5 (6.x-1.6)
• Imagecache 6.x-2.0-beta8 (6.x-2.0-beta9)
• Lightbox2 6.x-1.9

Update: Modules have been updated to the latest versions as of 20 April 2009, version numbers are in brackets after the links above.

Installation

Install Drupal as you normally would and extract each of the modules to the /sites/all/modules directory. You should have a directory structure like the following:

When logged in go to /admin/build/modules and enable the following modules:

• Content
• Filefield
• Imagefield
• ImageAPI
• ImageAPI GD2 (unless your server is configured for Imagemagick, then enable the ImageMagick module instead)
• ImageCache
• ImageCache UI
• Lightbox
• Views
• Views UI

Once you have ticked the modules, press Save configuration.

Imagecache

We need to create 2 presets for our images, one will be a thumbnail to show in the gallery and a second to show within the lightbox.

Navigate to /admin/build/imagecache and click Add new preset.

Set the preset Namespace to thumbnail. Click Add Scale and Crop, set the width to 180 and the height to 120.

Then create a new imagecache preset with the name lightbox. This time select Add Scale and set the width to 800 and the height to 600.

CCK Imagefield

First we will set up a new content type for our images which we will call Image. Navigate to /admin/content/types and click Add content type.

Set the name to Image and the type to image.  You may enter a description if you wish.

Under Submission form settings, delete the text from the Body field.

Depending on how you want to set up the gallery, you can change the Workflow settings so that images aren’t automatically added but are added to an approval list, for this tutorial we will make all images published, so untick Promoted to frontpage and leave Published ticked.

Under Comment settings, set comments to disabled.

Save the content type.

Next to the Image content type click manage fields. In the Add New field area, set the label to Image and the field name to image (to make it field_image), for the Type of data to store, select File then for Form element select Image.  Press Save.

Under Global settings, tick the Required box and set the Number of values to 1.  Leave the List field and Description field to Disabled.

Then press the Save field settings button.

Now click the Display fields tab at the top of the page.

Set the Label to Hidden and set both the Teaser and Full node to Lightbox2: thumbnail->lightbox.

Now under /node/add/image we can add an image to go in to our gallery.

For now create 3 or 4 images.

Under /admin/content/node you should now have some nodes.

Now we will set up a view to display these nodes in a gallery.

Views

Navigate to /admin/build/views and click the Add tab at the top of the page. Set the view name to something like gallery. Leave View type set to Node.

Set the title to Gallery. For Style set to Grid then chose 4 columns and set Alignment to Horizontal.

For Use pager set to Full pager.  Then for Items per page, set to a multiple of 4, I am going to use 16 to give us a 4×4 grid of images. If you wish, you can set Use AJAX to Yes to stop the whole page being loaded on the pager.

Add the following Filters:

• Node: Published = On
• Node: Type = Image

Under Fields select Content: Image (field_image). Set Label to None and change Format to Lightbox2: thumbnail->lightbox.

Under Sort criteria you can set this to what you want.  I am going to set them to newest first. Select Node: Post date and set to Descending.

On the left select Page from the drop down and click Add display.

Under Path set to gallery.

Press Save.

Now if you navigate to /gallery you can see your gallery in action.

Once you upload more than 16 images which we set our Items per page to, a pager will appear.

You can see a working example of the gallery in action at http://gallery.jamestombs.co.uk/gallery

Update: There may be cases where the image isn’t uploaded to the image type when a user submits the node add form without uploading the image. This will show up as an empty section within the gallery and the node will be submitted with no image, but Imagefield will not tell the user that this is a problem even if it is a required field.

To stop these empty image types showing in the gallery, you will need to add a relationship for the image and set it to a required relationship. This way the image node will not appear in the gallery unless there is an image attached. You could then set up an additional view to find out which image nodes don’t have an image attached.

www.i-wax.co.uk was founded in January 2009 as a place for consumers to freely share deals for valeting and detailing products while saving you and others money. The purpose of the site is to escape from the marketing messages and ads and collate all the best that the web has to offer and get us genuine deals.

Self-promotion

The basis of the site is that it is for best deals from other people who don’t stand to gain. But merchants who are self-promoting are also welcome as long as it’s a genuine deal where the consumers will save £££’s.(items may be removed without notice)

Anyone can share, public or trade

www.i-wax.co.uk has no-registration and open to everyone. The more users we have sharing and contributing their savings on detailing and valeting equipment, the more everyone gains! You can help build this community by sharing deals you’ve found.

The site is displaying offers on:

Meguiars, Pinnacle, polish, glaze, wax, Poorboys, Menzerna, Sonus, Swissol, Swizol, Zymol, pakshak, Chemical Guys, Collinite, Einszett, Gliptone, P21s, Sonus, Clearkote, Harley wax, Klasse, Mothers, Autoglym, Belgom, Wheelwax, Renovo, Eurow, Muc off, 3m, Bilt Hamber, Smartwax, Wolfgang, Four star, Optimum, Dp, 303, Lexol, Corbra, Oxo, Blackfire, Lake Country, Jeffs Werkstatt, Zaino, Concept chemicals, Dominique France Concours, Visomax, Duragloss, Prima, Hosecoil, Car cleaning, Carwash, Shampoo, Victoria wax and many more.

All can be seen at www.i-wax.co.uk.

The following code requires 2 variables, the amount of rows to delete each time and the content type.

$amount = 100;
$type = 'node_type';
$result = db_query("SELECT nid FROM {node} WHERE type = '%s' LIMIT %d", $type, $amount);
if (db_num_rows($result) && user_access('administer nodes')) {
  $n = 0;
  while ($data = db_fetch_object($result)) {
    set_time_limit(5);
    node_delete($data->nid);
    $n++;
  }
  if ($n == $amount) {
    drupal_goto($_GET['q']);
  }
}else {
  drupal_set_message(t('No entries found for node type @type, or you do not have permission to modify nodes.', array('@type' => $type)));
}

This will go through all the nodes of the type you define and delete the node. Once finished doing the batch, the page is then redirected back to the same page to delete another batch.

This can be placed in a node with an Input format of PHP code or through a module.

function modulename_menu($may_cache) {
  $items = array();
  if (!$may_cache) {
    $items[] = array(
      'path' => 'this/is/the/path',
      'callback' => 'modulename_delete',
      'access' => user_access('administer nodes'),
      'title' => t('Delete Nodes'),
    );
  }
  return $items;
}

Then wrap the above deletion code into a function such as:

function modulename_delete($type = 'node_type', $limit = 100) { }

Then you can navigate to the path in the hook_menu function and start the batch deletion. To delete other types of nodes, add the content type to the end of the url. For events it would be:

http://www.domain.com/this/is/the/path/event

Depending on what modules you have enabled, this can take a long time as the node_delete function calls a module_invoke function for any module to interact with it. If you have a lot of modules this will take a long time.

Alternatively you can download and install the Delete all module which serves the same function.

New Features:

• Change language text within Drupal
  Within the admin screen of FPSS you can now add the language text for the slideshow within Drupal which is stored in variables. By default the module has the English text in. If you want the French text, then you will have to open up the french.php file and copy paste each item in to the form and save it.
• Change javascript location
  Within the admin screen as well as being able to turn off the javascript library and optimize the javascript you can now selected if you want the javascript to be inserted in to the footer of the page rather than the header. This is tested and works on a default Drupal installation of 5.12.

Fixes

• Optimize JS and Disable JS both work as expected now and any configuration of the 2 settings should work, although some javascript packages may conflict causing problems.
• Fixed the admin settings access, missing array item in hook_perm.

You can download the fpss for drupal module at the Google Code site and you can view the demo of the Front Page Slideshow for Drupal demo at http://drupal.jamestombs.co.uk.

If you have any problems or find any bugs please submit them on the FPSS for Drupal Issue Queue on the Google Code site. Alternatively leave a comment to this post or email at jtombs1987@gmail.com.

Frontpage slideshow is a script by Joomlaworks.

The module requires that the script is purchased from Joomlaworks as it contains important files for it to work.

The module which is currently in development can be found at http://code.google.com/p/fpss-drupal/.

The code is still in an early stage but is working and usable, but I would recommend not using it on a production site.

There are a few issues with the module at the moment.

• Module depends on jquery_update
• Module uses the upload module to upload the image for the slide, but this allows any file to be uploaded, so requires some further work.

How does it work

The module adds in 2 new node types (slide, slideshow). Each slideshow node creates a new block which can be used anywhere in your site.

Slides are then assigned to a slideshow. The slideshow node contains most of the important settings such as dimensions and timings but as well as this there is an admin settings page which controls the default settings across the whole site such as the language of the text and the javascript engine.

I have developed the module purely with jQuery in mind. Mootools may work, but is likely to be unstable and buggy.

Where can I download this module?

Go to http://code.google.com/p/fpss-drupal/ and download it from the right hand side. If you find any issues with the module please do so by leaving an issue on the Google Code site.

Useful Drupal Module Development Book

Pro Drupal Development is a very good book published by Apress. The new second edition covers Drupal 6.

The code will return a list view of 5 (changeable with $num_nodes) in an unordered list in a random format.

If you want to order the items you can edit the code to order the data in the SQL statement and take out lines 18 and 19.

$num_nodes = 5;
$nid = arg(1);
$terms = taxonomy_node_get_terms($nid);
$items = array();
foreach($terms as $term) {
  $sql = "SELECT DISTINCT n.title, n.nid
    FROM {node} n
    INNER JOIN {term_node} tn ON n.nid = tn.nid
    WHERE n.status =1
    AND tn.tid =".$term->tid."
    AND n.nid !=".$nid."
    LIMIT $num_nodes";
  $result = db_query(db_rewrite_sql($sql));
  while ($node = db_fetch_object($result)) {
    $items[$node->nid] = l($node->title, 'node/'. $node->nid);
  }
}
srand((float)microtime() * 1000000);
shuffle($items);
return theme('node_list', $items);

For Drupal 6, although I haven’t tried this code, it should be the same except for line 3 which should be like this:

$terms = taxonomy_node_get_terms(node_load($nid));

In Drupal 6, taxonomy_node_get_terms requires the whole node object rather than just the node ID (nid).

If you do not have a webserver yet but wish to set up your personal computer as a testing environment, please read through and complete the following guide on Setting up your PC as a test environment using Apache, PHP and MySQL.

Download Drupal

For this tutorial we will be using Drupal 6.  You will be able to follow through a fair amount using Drupal 5 but some features may be new.

Go to the Drupal website and click the link on the right hand side to download Drupal 6.  As of writing the latest version is Drupal 6.4.

Once downloaded, right click the file and extract.  This should produce a folder called drupal-6.4.  Rename this folder to drupal. Move this folder to the public web folder of your web server set up (public_html, www, htdocs, httpdocs).

Setup MySQL server

Depending on the setup that you are using, you will have to create a database using whatever tools are available to you.

PHPMyAdmin

The most common bit of software is PHPMyAdmin which is generally accessible through http://www.domain.com/phpmyadmin/.

On the homepage, type the name of the new database in the box and press Create. I will call my database drupal, although on a public website it is best to give the database an obscure name.

Command Line

Open up a command prompt, change directory to the mysql/bin folder. Type the following to login to the MySQL server:

mysql -h localhost -u root -p

Then type your password in.

Then type the following:

create database drupal;

The database is now set up.

Drupal Installation

In your browser navigate to http://localhost/drupal/. This should present you with the Choose language screen of the Drupal installer.

Click Install Drupal in English.

If you get an error like the following:

Then you need to navigate to the drupal/sites/default folder. Copy the file default.settings.php and paste it, rename it to settings.php. Then click try again.

Now the installer will ask you for your database settings.

Fill these in and press Save and continue.

On the next page fill in all of the required information and press Save and continue.

If you are on a local test environment you may get a message about being unable to send an email, ignore this message, it will be OK once put on a proper server.  Just remember that no emails will be sent from the server from this point unless you fix it.

Then click the link to view the site. You will then see the frontpage to your new website.