Planet Drupal

read more

So, as promised, here's the full write up on the Lhmdesign redesign. I'll cover the whole site, but focus mainly on the blog section as it incorporates the more complex setup and theming.

Firstly, then, a few details:

• I built the site in Firefox, with frequent use of the ever awesome Firebug extension.
• IE7 corrections were handled using conditional comments placed in the page.tpl.php file.
• IE6 fixes were handled via a secondary style sheet - a process which I outlined previously here.
• Safari and Opera corrections are a straight up hack:

  @media screen and (-webkit-min-device-pixel-ratio:0) {
  #divid {
    rules: here;
  }
}

• Blog posts are story nodes which, by default, are promoted to the front page and have comments enabled.
• Blog post tags are a vocabulary (admin/content/taxonomy/add/vocabulary).

The entire site is built on Drupal 5.7. I would have liked to build it on 6.x, but a number of the contributed modules used don't yet have 6.x support, so for now it's 5.7 all the way.

And speaking of modules (smooth eh ;) the ones I've used (excluding core required modules) are:

THEMING:

Due to the site being built on Drupal 5.7 the theme is also tailored for Drupal 5.x, so just be aware that all following references are as such.

REGIONS:

The theme incorporates six regions - header, topbar, content, right sidebar, recommended, and footer.

Custom regions can easily be added to a theme - check out a previous post about creating custom regions in a Drupal theme for an explanation of how to do so.

PAGE.TPL.PHP:

The page.tpl.php file is both structurally and semantically correct. CSS is then used to visually position the primary links so that they appear at the top of the page, and the skip to content link so that it appears in the upper right-hand corner.

SKIP TO CONTENT LINK:

To get the skip to content link in position I first need to have an id on the main content area I want the link to skip to, like so:

<div id="main"></div>

Then I add the actual skip to content link code at the top of my page.tpl.php file:

<div id="skiplink"><a href="#main" title="Skip to the main content">Skip to content</a></div>

Finally, I use CSS to position it in the upper right-hand corner and include the background image:

#skiplink a {
padding: 6px 15px;
position: absolute;
right: 0;
top: 3px;
background: url(images/skiptocontent_bg.png) no-repeat;
}

PRIMARY LINKS:

Primary links are output via the following code in the page.tpl.php file:

<?php
print theme('links', $primary_links)
?>

This generates classes on both the list items and the links within the list items to allow for easy theming. The whole primary links section is then positioned visually at the top of the page using CSS.

SIDEBAR BLOCKS:

There are currently four sidebar blocks on the blog - 'Hello', 'Most Popular', 'Subscribe via E-mail', and 'Categories'.

HELLO:

This is just a basic custom block, containing some text, an image, and the Technorati button. The button is custom code which is generated from within your Technorati account.

MOST POPULAR:

'Most Popular' items are rated by how many comments they have. To create the block you'll first need to install the views module and then add a new view (admin/build/views/add) with the following settings:

Basic Information

• Name: most_popular

Block

• Check 'Provide block'
• View type: List View
• Title: Most Popular
• Nodes per Block: 10

Fields

• Node: Title - As link

Filters

• Node: Published - Yes

Sort Criteria

• Comment: Comment Count - Descending

Save the view, and you should then find it has appeared in your blocks page (admin/build/block) ready to be enabled.

SUBSCRIBE VIA E-MAIL:

My Drupal blog uses the FeedBurner service to burn the two blog feeds (you'll need to enable the feedburner module first to do so.)

It made sense, therefore, to use the e-mail subscription service also provided by FeedBurner, so this block contains the code which FeedBurner generates when you sign in (to FeedBurner) and choose Publicize > Email Subscriptions. I've then edited the code slightly to change some of the text and styling.

CATEGORIES:

This is a custom block with the following PHP code in the block body which generates the categories list (remember to set the input type to PHP and make sure that your vocabulary id is correct):

<?php
$vid = 1; /* <---- put correct vocabulary ID here */
$terms = taxonomy_get_tree($vid);
print "<div class=\"item-list\">";
print "<ul>";
foreach ( $terms as $term ) {
$tcount = taxonomy_term_count_nodes($term->tid);
print "<li>".
l($term->name." (".$tcount.")",'taxonomy/term/'.$term->tid, array('title' => $tcount." posts in ".$term->name)).
"</li>";
} /* end foreach */
print "</ul>";
print "</div>";
?>

SOURCE: I originally found the code for this block in a comment (#5 by xacro) on a post over at tela-web.

RECOMMENDED:

This is a region containing a custom block, which itself contains an un-ordered list with each recommended item being one list item. The whole list is then styled to achieve the layout.

The links within this block are Amazon affiliate links. Setting up an Amazon affiliate account is pretty straightforward, and it's then just a case of using your affiliate account to generate the necessary code for the links which you can put in the list.

TOPBAR:

I was originally planning to have this region contain a bottom section with all of the sidebar blocks in and then split the main blog posts out across the whole width of the page, but decided upon reflection that this would be a bit too much stuff at the top!

RSS LINKS:

By default Drupal generates a main RSS feed for your site posts (at /rss.xml), and I used the comment RSS module to generate the comments RSS (cunning eh ;)

I was then able to write and style an unordered list which contained links to both feeds like so:

<ul>
    <li><a href="/rss.xml" title="Blog posts">Posts</a></li>
    <li><a href="/crss" title="Blog comments">Comments</a></li>
</ul>

ACCESSIBILITY LAYOUT OPTIONS:

I was keen to try and incorporate accessibility features into the theme, but actually found it quite difficult to find any comprehensive documentation about how such features should be implemented from a design point of view.

In the end I created two alternate themes - a high contrast layout, and a high visibility layout. I then used the switchtheme module which, once enabled, allows you to write a simple link into your theme to facilitate the actual theme switching. In my case the theme switching links are just an un-ordered list like so:

<ul>
<li><a href="?theme=mydrupalblog" id="default" title="Switch to the DEFAULT layout">Default layout</a></li>
<li><a href="?theme=highcontrast" id="high_contrast" title="Switch to the HIGH CONTRAST layout">High contrast layout</a></li>
<li><a href="?theme=highvisibility" id="high_visibility" title="Switch to the HIGH VISIBILITY layout">High visibility layout</a></li>
</ul>

How simple is that!

SEARCH:

Search is handled by the core optional search module (which you'll need to enable as it's not 'on' by default). The search button is styled in the same manner as outlined in a previous post.

POSTS:

HEADINGS:

The main post h2s are dynamically generated by the dynamic rendering module which uses sifr to replace the default h2 with an embeded flash file containing the new heading. The advantage of this method is that you can use any font to render the heading and it remains accessible (I'm using Helvetica Neue Medium for the blog post headings). The disadvantage is that you can't right-click and open in a new tab, although I'm looking into the possibility of an overlay hack to get around this.

SOCIAL NEWS / BOOKMARKING LINKS:

I think I get more email about how to generate these links than anything else on my blog! (is that a good thing? ;) But, sadly, there's no secret - I simply use the service links module, and set the links to be images only.

META INFO:

I decided to stick all of the meta info at the bottom of the posts to save cluttering up the headline.

The meta info is generated via the following code which I place in the theme's node.tpl.php file:

<?php if ($submitted or $taxonomy): ?>
  <div class="meta">
    <?php if ($submitted): ?>
    <div class="submitted"><?php print t('Posted by ') . theme('username', $node) . t(' @ ') . format_date($node->created, 'custom', "h:iA") . t(' on ') . format_date($node->created, 'custom', "F jS Y"); ?></div>
    <?php endif; ?>
    <?php if ($taxonomy) : ?>
    <div class="taxonomy">Tags:<?php print $terms ?></div>
    <?php endif; ?>
  </div>
<?php endif; ?>

COMMENTS:

Comments are an often overlooked area of design, so I've tried to make them a bit more interesting:

Firslty, I added the following to the theme's comment.tpl.php file and styled it with some CSS:

<div class="comment <?php print $comment_classes; ?>">
    <div class="comment_id"><?php print $id; ?></div>
    <div class="comment_body">
        <div class="comment_info">
            <span class="comment_name"><?php print theme('username', $comment); ?></span><span class="datetime"><?php print format_date($comment->timestamp, 'custom', "F jS Y") . t(' @ ') . format_date($comment->timestamp, 'custom', "h:iA"); ?></span>
        </div>
        <?php if ($new != '') { ?><span class="new"><?php print $new; ?></span><?php } ?>
        <div class="content"><?php print $content; ?></div>
    </div>
</div>

Secondly, to remove the '(not verified)' from comments by non-verified users I implemented this solution as explained by Matt Farina.

FINISHED!

...and that's it! - I think :)

Any questions etc. please leave a comment. Thanks.

This weekend WorkHabit shall be participating in the Minnesota search sprint. I am very excited to put my skills to work on such an important project. I know that most people know "search" is pretty important, but to me, it can be the bread-and-butter of a site/application. When one thinks of search, usually some little white box comes to mind in which you type some arbitrary input into, and you get a list of outputs; however, search is so much more.

read more

This article explores the process of taking HTML content from Drupal nodes and indexing it for the purpose of search and text retrieval at a later time. The code examples apply to Drupal 6.

read more

Acquia has been selected as a finalist in the Collaboration and Social Networking category for the 2008 MITX Technology Awards. This is the fifth year MITX has offered the awards to recognize innovative companies and technologies in the New England region across nine categories:

read more

I ran into an annoying problem today where members of a certain administrative role could not edit nodes on a Drupal site.

I checked the following:

• The role had administer nodes, which should have given members the ability to edit any node.
• The role had the edit foo permission and the edit own foo permission.
• I tried getting rid of edit own foo in case it was conflicting with edit foo.
• I reset the node_access table.
• I emptied the cache.

Nonetheless, some nodes were editable, and some were not. Normally Drupal is very robust, and I just couldn't figure out why things were not working.

read more

read more

Following Robert Douglass' lead, I figured I would jot down a few things I'd like to focus on for the next few days while in Minneapolis. No doubt this list will get thrown out the window tomorrow when we actually down together, but here is my attempt, posted from the YVR airport departure lounge at 9:00AM.

Distributed search and oauth

• Research and compare distributed search modules
• Document use cases for distributed search
• Design and start implementation of oauth enabled distributed search

User / Profile search

• Current profile module and user-as-node (CCK) approaches
• Research and compare existing user-search modules
• Investigate combining different search methods for different
  fields (e.g. soundex or metaphon for names, geo for location, full
  text for expertise) - present via Faceted search?

Additional strategies for full-text search

• Example: different approaches for handling punctuation, stemming,
  phrases (NLP handling of phrases?), stop words
• need to let preprocess, e.g., know if it is being called in
  indexing or retrieval

Search testing / benchmarking

• Examine existing tests, prioritize additional test development
• Examine benchmarking frameworks, write/extend if required

Many folk don't know that the ACLU has a TV series called "The Freedom Files". Season 2 can be seen on PBS stations throughout the country. Episodes can also be viewed online at aclu.tv which we re-launched for the new season recently.

read more

One of the interesting new opportunities - and thus pitfalls until you understand them - is Drupal 6's built in block caching. As a developer, I'm generally used to creating hook_block by just specifying the 'info' data in hook_block, and letting the other options be set by the admin via the blocks page. However, you can't set the caching level there, and more troublesome, you can't change the caching level of a block once it's been put into your site.

That can be a real problem, given that the default for the cache flag is 'BLOCK_CACHE_PER_ROLE'. If the block in question is customized to a user, then Bob's going to see George's data, and that's no good. Additional problems result with javascript or css that are linked to the block - if drupal_add_js or drupal_add_css are invoked in the block, their effects aren't included in the cache.

So what to do? From now on, you've got to plan out your blocks with a little more care than before. Is the block going to change quickly? Is the block using javascript or css that you can't (or don't want to) include as in-line data in the block's returned data? Then you may need to go with BLOCK_NO_CACHE. Is the block's information personal? Then BLOCK_CACHE_BY_USER. On the other hand, if you've got something that shows up on every page and doesn't change much, you might want to go with BLOCK_CACHE_GLOBAL.

But it's important in Drupal 6 to take a few moments when laying out a new block and consider how you want it to be cached, because once you've created it you'll need to dig into the blocks table to change it.

Jeff Robbins interview Earl Miles about his work on Views, Panels, Node Queue, Drupal core, and so much more.

This Drupal Amazon EC2 AMI builds on our first released drupal Ec2 Ami.

read more

The Sydney Morning Herald has a nice article about Lullabot that came out yesterday. James Walker and I did an interview with the newspaper as part of the media blitz surrounding Lullabot's workshops in Melbourne Australia last month. The article talks a bit about how Lullabot came into being, our philosophy, what we do, and (apparently) how much value we put in the hug. We try not to get too gushy about it, but I guess when it comes right down to it, I guess this really does separate us from most other companies.

By the way, the Melbourne workshops were fantastic! We're in the middle of another week of Drupal workshops in Minneapolis right now. And Toronto is coming up next month. Three countries in three months. I think that makes us global!

Read the whole article about Lullabot from the Sydney Morning Herald right here.

Have a great idea that can lower technical barriers in Drupal? Want to help provide powerful tools for digital publication? Have a way to encourage people to improve their communities by supporting the free exchange of information and ideas?

Want a GRANT to make it happen?

Digital publishing can help people improve their communities by giving them tools to connect people and ideas.

The Knight Drupal Initiative is a grant program designed to foster development in the Drupal project. Knight Foundation is a Miami-based non-profit grant making organization. Since 1950, the foundation has invested more than $300 million to advance quality journalism and freedom of expression worldwide.

Anybody who wishes to apply for funding can start the process at http://groups.drupal.org/knight-drupal-initiative by reviewing the guidelines and submitting an application. Your project must be Drupal-specific. You don't have to be a US resident to apply, but there may be cases where, due to US regulations, funding may not be available in specific countries.

Once your application has been submitted, there is a two stage process. First there is an open community review. Projects that make it through the community review will be passed to the Knight Foundation for final review.

Check out the Program Goals, FAQ, Application Tips, and the Application Process.

What is one of the best tips to get out of the creative slump? Need to find that extra juice for your Drupal theme?

It may be simple, but I love to use Flickr for my inspiration!

Flickr has millions of photos, and thousands of groups to showcase amazing work.

Vandelay Design has compiled a list of 99 Flickr groups to help get you unstuck, such as:

http://flickr.com/groups/webdesign-inspiration/
http://flickr.com/groups/illustrationnow/
http://flickr.com/groups/psdtuts/
http://flickr.com/groups/photoshop/
http://flickr.com/groups/designtype/
http://flickr.com/groups/yourvector/

Inspired! That's the way we work!

read more

We'd like to officially welcome a new member of our theming team, Jay Wolf!

Yes, we have stolen him away from his plans for world domination, and perhaps delayed his efforts toward contributing a theme starting with every letter of the alphabet to Drupal.org. Jay has recently joined our team as a full time themer and the fruits of his labour are just starting to show.

Jay is a long time member of the Drupal community, and you may remember him from such themes as Amadou (which I have often recommended to people as an awesome theme), Barron, Celju, and Golden Hour. He'll be assisting us in turning our designs into awesome, feature rich Drupal themes.

Thanks Jay, for joining us, and for being just as picky about your CSS as we are!

At DrupalCon Sunnyvale 2007, Rasmus Lerdorf chided Drupal on spending over half of its request time on just the bootstrap process. As a GHOP Task , Cornil did a performance analysis of Drupal and found its two largest performance drains were the bootstrap process and the theming layer. Quite simply, Drupal spends too much time including code.

Drupal 6 has the beginnings of a solution. Page handlers, the most unused code in Drupal, can now be split out into conditional include files and the menu system is able to conditionally load just the file it needs for a given page request. Based on earlier benchmarks, just that code shuffling netted Drupal 6 a 20% performance boost. The downside, however, is that it does require the module author to explicitly specify file to be included, and the syntax for it is just a little bit annoying what with the file name and file path being separate keys on the menu handler.

Fortunately, Drupal 7's self-learning code registry system has just landed, which should obliterate most of the wasted bootstrap cost.

read more

In the spirit of the "Data Sprint," and the "Testing Sprint", Friday 5/9 through Sunday 5/11, we are meeting in what is being dubbed the "Search Sprint" at the University of Minnesota.

The good news is that CivicActions is busy! The bad news is that I had hoped to prepare more, but this date has really snuck up on me. My plane leaves tomorrow, and I've neglected preparing at all. I was asked to write this blog several weeks ago (sorry).

read more

In the same way that the Internet itself would not have achieved greatness without the ability to search it easily and efficiently, Drupal’s greatness will always be tied directly to the effectiveness of its core search solution. Improving core search for Drupal 7 will be no small task, however. The current implementation is both elegant but complex, robust yet inflexible. The seven coders participating in the Minnesota Search Sprint this weekend have a great challenge as well as a great opportunity. Here are some of the things we hope to achieve:

• Identify the most important weaknesses in Drupal search and create a project plan for fixing them.
• Identify the most important new features currently missing from Drupal search and clear the roadblocks for implementing them.
• Increase the test coverage for Drupal search.
• Increase general developer awareness and knowledge of search.

A large part of what we will be doing is evaluating and planning. Without a roadmap and common understanding of what search is to become, little progress will be made in the Drupal 7 development cycle. However, a coding sprint is all about code, and we’ll be writing some of that, too. Specifically I’m hoping that we’ll be able to fix one of the top-five bugs, increase search module’s test coverage, and come up with a first attempt at one of the top-five new features.

That’s a lot! No matter what we manage to code during the three days together, we’ll walk away with a high level of agreement about our goals for the next months, and plenty of homework to do.

We’ll post regular updates that you can follow on Planet Drupal, as well as in the search group, and we’re all ears if you have suggestions or wishes. For anyone wanting to catch up on their search related reading, here are some links:

read more