How to build an image gallery using CCK, views and jCarousel

Despite the dozens of available modules to create an image gallery, I decided to build it using cck, views, jcarousel, some other modules and one evening. You can see it in action on my image gallery.

The basic idea is that I have one node per album, which contains all images in just one filefield. The node view displays the carousel with the thumbnails, which links to the bigger images using a lightbox. Then I have to make a page displaying the gallery nodes. At last I use the nodequeue module, which enables me to manually order the galleries on my gallery page.

I have build it in Drupal 6, but you can follow the same steps for 5. Install & enable the following modules, if you don’t already have them:

• cck
• filefield (dependency for imagefield)
• imageapi (dependency for imagecache)
• imagefield
• imagecache
• jcarousel
• nodequeue
• thickbox
• views

The first thing I did was creating a new nodetype using CCK. I disabled the body field (empty the body name field to do so) and comments. Then I added a field named “images” which is from type file with the image widget. Be sure to set the maximum values selector to “unlimited” and enable the description field.

It’s best to create some galleries at this point. You already have nodes displaying your fullsize images, so you’re done, if we live in the eighties… But I promised a working jcarousel, so we go on.

Next thing is setting up the imagecache presets. I created two presets, called “thumbnail” and “large”. The latter isn’t required. You may link the thumbnails to the full image, but will result in large and possibly slow downloads if you upload images directly from your cam. Thickbox, however, downscales the images to fit the browser window.

Configure the “thumbnail” preset so that the result is always from the same size (“scale and crop” action in imagecache). I used 75 by 75px. My large images scales down to 800 by 500px.

Add the following code to the node template for the gallery nodes.

<?php
 
$items = array();
foreach ($node->field_images as $image){
  $url = imagecache_create_url('large', $image['filepath']);
  $img = theme_imagecache('thumbnail', $image['filepath'], $image['data']['description']);
  $items[] = l(
    $img,
    $url,
    array(
      'html' => true,
      'attributes' => array(
        'title' => $image['data']['description'],
        'class' => 'thickbox'
      )
    )
  );
}
 
echo theme('jcarousel', $items, $options);
 
?>

Check that the fieldname and preset names are correct.

This code loops through the images. First we set the URL of the large image in $url. Just use $image[‘filepath’] if you want to link to the full images. The next lines creates the image tag for the thumbnail. We use the description from the imagefield as alt texts. The “thickbox” classname is all we need to do to make the thickbox work. It even displays the alt text in the box without any effort! The last thing we need to do is call the jcarousel theming function (the old jcarousel_add function has been replaced by this lately),

Now take a look at your node. Your carousel should work now. Changes are great that it doesn’t fit your design. Now comes the real theming work; creating a jcarousel skin.

Copy the jcarousel/skinks/tango directory from the jcarousel module to your theme dir and give it your own name. I called it just “jcarousel”, so I have themedir/jcarousel/skin.css.

To make our own theme work, change the code mentioned earlier to:

<?php
 
$items = array();
foreach ($node->field_images as $image){
  $url = imagecache_create_url('large', $image['filepath']);
  $img = theme_imagecache('thumbnail', $image['filepath'], $image['data']['description']);
  $items[] = l(
    $img,
    $url,
    array(
      'html' => true,
      'attributes' => array(
        'title' => $image['data']['description'],
        'class' => 'thickbox'
      )
    )
  );
}
 
$options = array('scroll' => 3);
$skin = 'SKIN_NAME';
$skin_path = drupal_get_path('theme', 'YOUR_THEME') .'/jcarousel/skin.css';
 
echo theme('jcarousel', $items, $options, $skin, $skin_path);
 
?>

Change YOUR_THEME to the name of your theme. You may use the same name for SKIN_NAME. The skin name is used in the CSS code of the skin (which is skin.css). I also added the scroll option to let you set the number of images you slide at a time. Lets edit that file and first find & replace “tango” by your skin name.

Check your node again. It should still work, without any visible changes. Now you can change skin.css and the associated images to your needs.

We’re almost done. Last thing we have to do is create the gallery page itself. Go to the nodequeue admin page and add a queue (drupal_goto(‘admin/content/nodequeue/add/nodequeue’) that means :)). Give it a title, check the gallery type and save it. Now go to the views admin page, where a view based on the queue is already created. Click the display mode “page” and change the title and path. Also set “Row style” to “Node”.

It is possible to create your gallery without nodequeue. The advantage is that you can order your galleries on your gallery page by yourself. If you always wanted to have them ordered chronologically or alphabetically you would better go with just a normal view.

Now add your galleries to the queue. To do this, go to the gallery nodes and click “add to queue” on the “Nodequeue” tab.

You’re done. Get yourself a beer and take a look at the new gallery page!