Drupal for Web Designers – Part II

Categories Articles, Drupal, Web Design

This is the second part of the new Drupal for Web Designers series written by Idan Arbel of Arbel Designs. After covering the intro to design (here’s the link to the Introduction in case you missed it) we’ll now discuss the second aspect Arbel loves about Drupal:


The things you can do with a Drupal site:

I love drupal for the simple fact that you don’t need to be a php guru to create e-commerce sites, directory sites, portfolios, blogs or almost any type of website, you can do almost anything without writing a single line of code with drupal.

This is possible because of a large amount of great modules that add to Drupal functionality. But it’s not really about a huge amount of modules, it’s more about the basic ones that give you the freedom to do what you want.

CCK ““ Content Construction Kit

Drupal CCK screenshot

This module which is actually part of Drupal 7 (currently in beta) core is what gives you the freedom to create any piece of content you want.

What does it do? Well CCK allows you to create new content types, to these content types you can add all sorts of fields. Sounds pretty straight forward and it is, but let me give you a few examples of real life use.

Let’s plan our new web design studio portfolio website. We want to display our works to prospective clients so we need to have a “Portfolio Item” Content type. Let’s add a few fields to “Portfolio Item”:

  1. Title ““ this will be a text field that will hold the title of the website.
  2. Description ““ this will be a text area field that will hold the description of our website.
  3. Pictures ““ we have to show off the design, so this will be an Image upload field that will display the picture.
  4. Link ““ a link to the live website.
  5. Category ““ Lets add a category field, that will have a selection of different categories, such as website, print, logo, etc.

Now our website had a Portfolio Item content type, and we can add as many of them as we want to display in the website.

Basic Drupal install comes with the Page content type, this has just a Title, and Body field. So it’s mostly used for generic purposes (About us, Privacy Policy..etc), but with CCK you can easily customize the Page content type by adding any fields you want ““ or even adding the ability to add Comments to each page (or only selected ones).

CCK lets you define the different entities in your website, that allow you to create complex and simple websites a like using the same tools ““ its complete freedom to construct the website as you wish.


Drupal Views

This second crucial module that is a must in every drupal site is the Views module.

If CCK is the tool that lets you create any type of content on your website, Views is the tool that lets you fetch it and display it.

Drupal content is based on “Nodes”, a “Node” is the content you create using drupal (it’s a bit more complicated than that but for now let’s work by examples). Each “Portfolio Item” we create is a node, each “Page” we create is a node. These are nodes of different types and have different properties and fields, but they are both nodes.

Using Views you can select specific nodes, and display them on a page. Not only can you select the nodes to display, you can also select which fields you want to display, in what order, and how each field should be displayed. Let’s go back to our portfolio site for a few examples: we’ve added lots of designs to our portfolio but how do we display them? We create a View, this view will select/fetch all the nodes that are of the “Portfolio Item” type, and display them as a list. Each item on the list will contain the Title, the Image, and the description. But let’s have the Title be a link to the full Page (to the actual Node) with all of the information. The Image will be a thumbnail of a specified size (using the imagecache module for this), and have it link to a modal window with the full size (lightbox2 module for this). The description will be display just the first 150 characters, with a read more link to the full node. That’s an example of a view, we can create more views that show the nodes as a grid, or a slideshow, or a table, and each with different filters and different fields. So we can create a view of only the featured items, or the last three items added.

Here’s a site I completed recently ““ http://www.bloombaby.co.il ““ let me list the places I used views:

  1. The main banner, it’s created of a view using the amazing Views Slideshow module of a the the product content type, but it only uses one of the main product images, and links to the product page.
  2. The three products to the bottom left, they are a view of random three products. This time I’m taking a different image, but still linking to the product page.
  3. This page ““ http://www.bloombaby.co.il/מוצרים has a a list of products and rotating banner ““ Both created by Views.
  4. Another add-on module for views ““ Views Carousel allows you to display images using the jquery ““ jcarousel plugin-in.

Bloom Baby Views Example

These are only a few examples of the uses of views and cck: The Views module simply lets you retrieve the content from the site and display only what you want in any way you want it displayed.

Next up: SEO. Feel free to share your thought on CMSes, Drupal or anything else in the comments section.

We offer guaranteed success for CCIE-LAB exam with help of latest 642-524 and 642-145 practice questions and the exams of 640-460 & 350-001.

Idan has been designing websites since 2001. Has a Bachelor's degree in Industrial Design and has been using drupal as his CMS of choice for the past 4 years.