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.

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.

W3 Schools

Tizag

HTML Dog

SitePoint HTML/CSS Reference

Search engines (Google, Bing, Yahoo) all rank your site based on your content. You need to make sure your content has the keywords that you expect people to search to find you are in your content.

This text has to be in HTML. A common problem on the web especially from people using things like MrSite (or any other site builder/WYSIWYG editor) is that they find the font they want to use doesn’t work on multiple computers. To get around this, they will create images with the text in the image. As far as the search engines are concerned, there is no text there, so it has zero content to index.

Page structure

The actual HTML structure of the page is important. The search engines bots are getting more and more inteligent in finding what it thinks is the main content on your page. So rather than thinking your navigation is your content, they will generally find your first paragraph. This makes it importantant to make sure your content is wrapped properly in paragraph tags (<p> </p>), otherwise you are just hurting your SEO score.

Grammar and spelling

As well as search engines looking at your site, you also have potential customers coming to your site. Pictures will help grab their attention intially, but they will want to read what you have to say. Simple mistakes, such as brought instead of bought, can be very off putting and scare some customers away.

Accessibility

Test your site in all the major browsers. Just because you don’t like Internet Explorer, doesn’t mean everyone else has switched to Firefox. IE still accounts for around 60-70% of browsers worldwide. Do you really want to throw away a percentage that big?

Also make sure that your text is readable. Colour contrast is extremely important, not everyone will have the same vision as you. Putting white on yellow or yellow on white will be hard to read, make sure there is a clear contrast, so when using white text, the background must be dark. To test your colours, you can use this handly little tool to see if they are accessible or not. Ideally you want to pass AAA specifications.

Remove the gimmicks

What do I mean by gimmicks? That analogue clock that you have thrown in to fill up that space that you didn’t know what to do with.

Hit counters. Hit counters are beyond useless, no one really cares about how many hits your site has had, but it is useful for your competitors to know how well (or bad) you are doing. If you want analytics to see how many people are visiting your site, there are free tools available to you. Google Analytics and GetClicky are two of the most popular.

Mouse cursor trails has some blue bars chasing the mouse around the screen. Do you know something Microsoft, Google, Apple, BBC etc don’t know? You are a professional business, not a 12 year old girl telling the world about your pet cats.

Learn about your audience

The first thing to do is learn who is currently visiting your site. Get yourself set up with either Google Analytics and GetClicky which are free analytics packages that can tell you how many visits you are getting and where these visits come from. This will include keywords that are used in searches to get to your site.

Once you have the keywords you are being found on, enter them in to the Google Keywords Tool. This will produce a list of synonyms that you can use in your content to attract a wider range of clients that may not use the same search terms as you are currently using.

Background images

Background images are fine, as long as they are done properly. It may look alright on your 17″/19″ monitor, but when the image stops and you get half a white screen when looking on a 24″ monitor, it doesn’t look very good.

Have a background that blends to a solid colour, or use a repeating background, but don’t have repeated large images as they don’t look very good. Examples: 1, 2, 3

Spread yourself

Expand yourself across social media platforms. Exposure on the web is good, even if people don’t read it, the search engines will see it and think that your website is important as there are a few other websites linking to it.

Examples being Twitter, Facebook (if set to public with the new privacy settings) as well as setting up an external blog.

For the blog, although it does look better to have a built in blog for consistency with design, the links to the site back from an external blog such as Wordpress.com or Blogger.

YouTube is currently the second biggest search engine in the UK. It gets more searches than all the main search engines (Google main search excluded). Even if your video is just a simple slideshow of images of a write up with your company name. Keyword the video, add your website URL to the video description.

Images need context

It is all very well having lots of images on your site but without context the images mean nothing to a search engine and may not necessary be clear to a user. But how do you expect people to find these images on your site? You need to make sure that your images are caption or have some sort of description text with them so that they are searchable. Unfortunately the search engines aren’t at a stage where they can search within images yet, so you have to use words to describe them.

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.