the fantastic four - drupals unofficial core
using the term "content management system" to describe the drupal cms understates it's full potential. i prefer to consider drupal a web-application development-system, particularly suitable for content-heavy projects.
what are the fantastic four?
drupal's application development potential is provided in large-part by a set of "core" modules that dovetail to provide an application platform that other modules and applications build on. these modules have become a de-facto standard: drupal's fantastic four. our superheros are cck, views, panels and cck field types and widgets. if you are considering using drupal to build a website of any sophistication, you can't overlook these. note that cck field types and widgets isn't a real module, but rather a set of related modules.
flying with the four
getting a feel for how these modules work and interact isn't trivial, so i'll give you a brief introduction to the super-powers of each of them, and then take you step-by-step through an example, with enough detail that you can easily get it working on your system. or, if you want to see a professional implementation built on the same principles, check out the zicasso photo competition.
meet our herosthe content construction kit or as it's more commonly referred to, cck, provides point-and-click attribute extensibility to drupal's content-types. for example, if you site is about photography, you could define a type of page on your site called "photograph" and then add typed attributes to it, shutter-speed (integer), flash (boolean) etc. cck then automagically creates forms for you (or your users) to create and edit these types of pages, providing suitable validation, gui controls etc.
the cck fieldtype modules each define a new type of field that can be used in your cck content types. one example is the imagefield module, allowing your cck types to have fields of type image. this allows your "photograph" page to contain the actual photograph itself. there are many more types that you can find in the cck modules download area.
the views module allows simple point and click definition of lists of drupal nodes, including your cck nodes. you can control not only what is in the list, but how the list is displayed, including sorting, pagination etc. these lists can be conveniently displayed as blocks, full blown pages or even rss feeds. for example, you could define a list of photographs that had been highly rated by users on your photography site.
the panels module allows you to create pages divided into sections, each section containing a node, block, view or any custom content. so without any knowledge of html or css you can create complicated and powerful layouts. for example, you could create a page with two views, one showing a list of recently submitted photographs and one showing a list of highly ranked photographs. this module is currently undergoing a huge facelift and panels2 is in alpha at the time of writing
an exampleto illustrate how the fantastic four can be put to good use, let's continue with our photography theme and create a simple photo-competition application. this application (shown to the right) allows the creation of a simple photo competition entry using a form. the main page shows two lists, one of recent entries and of "featured" entries. the application also has a detail page for each photograph where anonymous users can leave comments.
step one - install the modulesi'm going to assume that you've got a basic drupal install up-and-running. if you haven't, please refer to one of my previous blogs, easy-peasy-lemon-squeezy drupal installation on linux. once you've done this, you should install 6 modules. cck, views, panels2, imagefield, email field and imagecache. on linux, you can do this as follows.
cdto your drupal directory (the one containing
cron.phpetc.), create the directory
sites/all/modulesif necessary, and download the modules:
# wget http://ftp.drupal.org/files/projects/panels-5.x-2.0-alpha14.tar.gz \
# for file in *.gz; do tar xvfz $file; done
# chown -R www-data.www-data *
finally, now go to http://example.com/drupal/admin/user/access and grant access to the panels and views module features to the role you are using e.g. "access all views" to "authenticated user" and "administer views" to your "developer" or "admin" roles. also grant "post comments without approval" and "post comments" and "access comments" to the anonymous user.
note we're using the alpha panels version, panels2. it's not quite ready for prime time, but it's hard to resist. it kicks ass.
step two - create a new content typenow it's time to create a new content type. navigate to the content types page at http://example.com/drupal/admin/content/types, and create the "photo competition entry" as shown below.
now let's add two new custom fields to our photo competition type:
photograph. these fields make use of the new cck field type modules we just installed.
create the email field as follows:
create the photograph field as follows:
now go to http://example.com/drupal/admin/user/access and allow anonymous users to "create photo_entry content" and "edit own photo_entry content"
step three - setting our themes
because i'm bored with garland, let's change the default theme to "minnelli" in http://example.com/drupal/admin/build/themes, change the administratin theme http://example.com/drupal/admin/settings/admin back to garland.
step four - create some contentnow that we've defined our new content type, we can go ahead and create some new content. navigate to http://[...]/node/add/photo-entry and fill out a few entries. you can see your new create form in action, complete with validation (shown to the right).
it's best to do this as the anonymous user to see the usual user experience. it's convenient to stay logged in as admin and use another browser e.g. internet explorer (bleah) for your regular (anonymous) user.
step five - configure imagecachethe imagecache module allows you to define an arbitrarily large number of image transformations (presets) including scaling, resizing and cropping. let's define two transformations, one
previewto create a 200px wide scaled down preview. the second transformation,
thumbnailis slightly more complex, and creates a square image, 120px by 120px that is a scaled, centered crop of the original. rockin.
create the thumbnail preset as follows:
create the preview preset as follows:
you should now be able to test your presets with the content you created e.g. if you uploaded an image called
myImage.jpg, you can view your transformed images at:
step six - create our viewsthe views module allows you to create lists of nodes. we're going to create two views:
recent_photo_entries, a list of the five most recently submitted entries. the list shows a thumbail of the image and the email address of the creator.
featured_images, a list of the two most recently commented on images. this list shows a preview of the image, the image title and the email address of the creator.
create the recent view as follows:
create the featured view as follows:
step seven - create the panel pagethe last step is to create the panel page to host our content and views. go to http://example.com/drupal/admin/panels/panel-page and create a new "two column stacked" layout, as shown below:
put custom content in the top panel, your recent view in the left panel and the featured view in the right panel. for the views, be careful to select a "view type" of block.
the following image shows the custom content you should create in the top panel:
the final image shows the configuration screen for the recent view (left panel). the right panel is very similar:
finally go to the "site information" administrative section: http://example.com/drupal/admin/settings/site-information and set your new panel as the home page i.e. put "photo-competition" in the default front page box.
you are done and your site should look something like:
further workthere is a lot that you could simply do to enhance this example, for example:
- creating a view that implements an rss feed for photo competition entries.
- using css to style your views and nodes.
check out a professional drupal photo competition based on these same principles at zicasso