An obvious feature you often need on a website are previous and next navigation links, especially when building something like a picture gallery. Preferably with image thumbnails as in Flickr galleries. Out of the box, this basic functionality can be a challenge to realize in Drupal but it’s perfectly possible with a bit of understanding how the next previous API module works and some code.

This nice module eliminates the need to build expensive queries for finding out which node should be shown next because everything is stored in a table.  One minor drawback (which usually isn’t a problem) is that the node order is only indexed during cron runs, which means a newly added gallery should be manually followed by a cron job – or you can schedule cron jobs more often.

This howto assumes you’re building your image galleries the Drupal way with CCK, Views, ImageField and ImageCache and not with something like the Image module. A demonstration can be seen on the Blushuis website which we launched last week (click on ‘Fotoboeken’). You will find an overview of galleries, if you enter one of those, you will see a screen similar to the image below.

Next and Previous Flickr-like-navigation in picture galleries

Next and Previous Flickr-like-navigation in picture galleries

After installing the prev_next_api module you will have to configure it’s settings for your specific content-type. And don’t forget to run cron.

Next you will need to have some extra variables available in your theme layer. A nice and clean way to do this would be creating a small custom.module with this piece of code.  Alternatively, if you don’t know how to build modules, you could use this code in your theme’s template.php (replacing custom with your theme name of course).

function custom_preprocess_page(&$vars) {
  // Declare variables.
  $vars['prev_node'] = '';
  $vars['next_node'] = '';
  if (!empty($vars['node'])) {
    // Load the previous node.
    $prev_node_nid = prev_next_nid($vars['node']->nid, 'prev');
    if ($prev_node_nid) {
      $vars['prev_node'] = node_load($prev_node_nid);
    }
    // Load the next node.
    $next_node_nid = prev_next_nid($vars['node']->nid, 'next');
    if ($next_node_nid) {
      $vars['next_node'] = node_load($next_node_nid);
    }
  }
}

Now you can use the variables $prev_node and $next_node in your page.tpl.php.

Extra tip: if you want to use ImageCache generated thumbnails, you can use the theme_imagecache function to set this up easily. An example for the previous image could be:

l(theme_imagecache('default_teaser', 'sites/default/files/' . $prev_node->field_your_imagefield_name[0]['filename'], $prev_node->title, '', TRUE), 'node/' . $prev_node->nid,
  array(
    'html' => TRUE,
    'attributes' => array('title' => t('Go to the previous image.')),
  ));

You should however preprocess this even more and customize for your own paths (in case you use dynamic paths) content-types and/or imagecache presets in your template.php so your .tpl files are kept clean.

That’s it! Don’t forget to have cache cleared and drupal_rebuild_theme_registry() enabled when testing ;)

I mentioned features a couple of times before on this blog, but didn’t have a good opportunity to take them out for a spin. But then Open Atrium was launched this summmer, and this Drupal intranet package makes extensive use of features, context and spaces. So I decided to take a closer look at Atrium – also because I was looking earlier into ways to use a Drupal setup as a collaboratice project management tool, like Basecamp.

My goal was to see how customizable Atrium is by using features and of course without touching any Atrium files to keep upgrading possible. As it turns out, this is perfectly possible and not that hard.

So, what are ‘features’?
Features is a Drupal module which allows you to export certain functionality to code. For example, a combination of content-types, views, filters and imagecache presets. This screencast show this proces very well. The feature doesn’t include the modules it depends upon, but does show all dependencies.

If you use Features, all that those differents configurations you need for a bundled piece of functionality (like an Image gallery) which are scattered all over the place in Drupal get bundled in nice little packages. And, last but not least, they are reusable on other Drupal sites.

The use of features becomes very clear once you start using it. However, if you really want to leverage its power, you should also understand two related modules Context and Spaces as these three work closely together. It can be pretty hard to grasp at first. The best way to understand how this al works is just by start playing around with it.

Adding an extra feature 'tab' to Open Atrium

Adding an extra feature 'tab' to Open Atrium

Adding a custom feature to Atrium
For example by adding an extra feature ‘tab’ to Atrium. In fact, all other tabs in Atrium are such features, and you can easily see how they are configurated. Just don’t forget to turn on the UI for context and spaces (which are turned of by default when you install Arium).

There is a tutorial available which explains setting it up accurately, even to the point howto replace the icon (in above screenshot the default question mark) with your own icon. Also, check out the features documentation on drupal.org.

Some important things to keep in mind: just adding modules to Atrium won’t do the trick. You have to make Atrium ‘aware’ of them by building features. When you build a feature in Atrium, you need to associate it with one or more contexts. Then you use Spaces to activate those features in the site. The extra lines which you currently have to add in your features’  .info file are because of the branch 2.0 changes to the Spaces module.

Sharing features
I mentioned features are reusable, just like modules, and therefore it’s possible to share your features with others. Plans for distributed feature servers seem to be nearing completion, which will allow for public or private (within your organisation) servers to host features. This won’t give you version control on your own server, but it all still sounds like A Very Good Idea to me.

  • Check out this related video in case you missed the session about  at Drupalcon Paris two weeks ago.

Related groups:

While full HTML 5 support still is years away, it is coming. And with it, some very nice improvements. One of my favourites new elements in HTML 5 is the canvas element. And the nice part about this one is you can actually already use it with todays browsers. Yes. Even with IE6.

BeautyTips
This JQuery library allow you to have dynamically created tooltips (or sometimes called balloons or bubbles) with additional information. This is a great usability improvement often used in image galleries or other overviews where you want to provide some details about items the user is viewing without requiring to actually click on anything. And you won’t need to mess around with any images for the balloons because they are actually drawn on demand.

The plugin is developed by Jeff Robbins, one of the guys at Lullabot (we wrote about their podcasts earlier). Lullabot provides training and consultancy, mostly about Drupal, and this plug-in works great with Drupal (which has JQuery built-in in core).

An example using a grid view with thumbnails

An example using a grid view with thumbnails

Howto use Beautytips with Drupal
The best way is to start at this page where the 0.9 version is released (the most recent version up to this date). There you will find some overview information and a link to the demo page.  This is a great place to look at some of the possible configurations. From the most simple tooltip to full ajax-calls, drop shadows and other eye-candy.

Setting your scripts up for an example as above includes:

However, you do want to pay attention at which version you use. Drupal 6 natively has support for JQuery 1.2.6 and if you want to keep using this version of JQuery, you should use version 0.9.1 of BeautyTips. The 0.9.5 version is for JQuery 1.3.x. Be careful with upgrading JQuery in Drupal, there might be scripts in your site (from contributed modules) which rely on JQuery 1.2.x and aren’t compatible with the newer one.

  • Include the scripts in the right order (JQuery first, then Hoverintent, then Beautytips).
  • Create a grid View with thumbnail previews.
  • In the Views fields box, also choose content like (in our example)  nid, title, number of comments, username. But exclude these from display (checkbox).
  • Setup the thumbnail in the final field at the bottom (order is important or you won’t be able to use the variables in the previous step). In our case, an imagecache preset.
  • Now, still in views, in the options of this thumbnail field, check “Rewrite the output of this field” and in the textarea underneath, use something like below:

<div id=”foto-[nid]” class=”img-thumbnail” title=”[title] by [name] – [comment_count] reactie(s)”>[field_gallery_pictures_fid]</div>

This makes sure the extra info we want to display in the balloon is put in the title attribute.

  • As a last step, you need to call the script on the bottom of your page, like below:
$('div.img-thumbnail').bt({ hoverIntentOpts: { interval: 0, timeout: 0 } });

A clean way to do this without hardcoding it in your page.tpl.php is to use the page_preprocess function in your template.php and the drupal_add_js() function (using the footer as scope).

There are far more advanced configurations possible, as you can see on the demo page, but this is a very easy one which requires almost no coding.

Note about Internet Explorer 8: it seems the 0.9.5 version with JQuery 1.3.x works fine with IE8, but if you use the 1.2.x version you might run into issues where the canvas element isn’t drawn (text still appears). Forcing IE8 to treat the website as a IE7 browser using this meta tag.

Sep
5

What we need next

Gepost in DrupalCon Paris 2009 door Albert

This week we’ll be posting from DrupalCon Paris, where this year’s European Drupal conference is being held from 1 – 5 September.

As I write this, I’m sitting in the Thalys, travelling back to the Netherlands and watching the landscape roll by at 300 km/hour. Like last year, it’s been an inspiring week and we’ve got a lot of new stuff to process and work out. New developments to try out and see what we need next. The project Drupal itself is also figuring out ‘what we need next’. Drupal 7 is nearing completion but what’s next?

Keynote: Social + media what we need next
Great talk by Chris Heuer about Social Media, Drupal, and the future of the web in general. You might call Chris Heuer a social media expert but he won’t agree: according to him, social media is still way too new. Nobody can be an expert at this point because everybody is still learning.

He’s also a frustrated Drupal customer and clearly pointed out Drupal’s reputation problem. When he put the question  “What is Drupal?” on Twitter, he got back a lot of replies, but not a single clear picture. This touches at the core of Drupal. What is it’s goal? Is it a framework or a product? According to the opening keynote by Dries, Drupal moving beyond the framework and becoming a product, but according to Chris, that doesn’t go far enough.

Chris Heuer and his view on the direction in which Drupal is moving

Chris Heuer and his view on the direction in which Drupal is moving

Another great quote:

“This is the real opportunity for Drupal to serve, at it’s core , the common need for all companies to behave like media companies.”

I agree. All companies are made out of people and people are social beings. Now, companies finally have the opportunity to communicate with their audience, have real conversations through social media. And Drupal is an excellent platform to leverage these possibilities.

Chris also gave a big thumbs up to Mark Boulton’s blog post titles “Design in Open Source“. An excellent article and must-read for anyone who’s involved with open-source and webdesign. It also covers the friction between developers and (ux) designers. Designers -  generally the new kids on the block – tend to get little or no respect by hardcore coders. That’s a problem. But at least, at this Drupalcon, the problem is acknowledged and that’s a first step in getting there. These are the growing pains.

In the next weeks, I’ll be posting some other topics which I attended, in the meanwhile you can check the official site. Video’s of all sessions should appear shortly on that site.

http://paris2009.drupalcon.org/session/staging-drupal-managing-your-project-multiple-environments
Sep
2

Drupalcon Paris

Gepost in Drupal, DrupalCon Paris 2009 door Albert

This week we’ll be posting from DrupalCon Paris, where this year’s European Drupal conference is being held from 1 – 5 September.

Inside the DrupalCon venue

Inside the DrupalCon venue

The second day of DrupalCon Paris was actually the first day with sessions and the traditional kick-off keynote ‘State of Drupal‘ by Dries Buytaert. The question on everybody lips this year was “Will there be a code freeze for Drupal 7?”

Short answer: yes. but not entirely.

The freeze is extended one week so everybody at the DrupaCon can work on it during the conference and patches might still get in. Then there will be a 5 week period “code slush” where so-called specially selected projects still might get into core, but won’t affect functionality if they are let out. These include:

  1. imagefield
  2. field translations
  3. convert profile module to field API
  4. convert taxonomy to field API
  5. Overlays
  6. Edit anywhere
  7. Shortcuts
  8. Dashboard
  9. Plug-in manager
  10. RDF/RDFa

The community is being asked to help out – and the following presentation by Drupal maintainer webchick explains how you can help:

Drupal 7 - How you can help

Drupal 7 - How you can help

Other sessions I attended were about a multisite showcase and Aegir, which I wrote an article about earlier. Last but not least was a session about workflow automation with the Rules module.

The Rules just got better
The two main developers behind this project, Klaus Purer and Wolfgang Ziegler from Germany, are the guys behind this brilliant project which can save you from writing a lot of custom code. I suspect there are a lot of developers and site-builders out there which still write their own code to perform tasks which can easily be done with this Swiss Drupal Army Knife. Page redirections, email sending (with tokens) based on conditions and many, many more events are possible. Take a look at this tutorials to get a quick impression.

This summer, the project got a lot better because it was a Google of Code project. For a complete list of improvements, take a look here. One of the highlights is the new forms support which allows you to alter forms depending on conditions. For example, you could hide, validate or change the order of certain fields depending on conditions!

Pretty cool stuff so far. And of course there are the evening activities which Paris has plenty to offer!

More pictures

And by the way, the location for the next DrupalCon is also announced: San Francisco in april 2010.

http://blog.merge.nl/2009/08/19/aegir-drupal-hosting-system/