Create a simple image gallery in Drupal 6 using CCK and Views

This tutorial will guide you through how to create a simple gallery within Drupal 6 using CCK, Views and a few more custom modules.

This tutorial was written with the following versions of Drupal and modules:

Update: Modules have been updated to the latest versions as of 20 April 2009, version numbers are in brackets after the links above.

Installation

Install Drupal as you normally would and extract each of the modules to the /sites/all/modules directory. You should have a directory structure like the following:

directory_structure

When logged in go to /admin/build/modules and enable the following modules:

  • Content
  • Filefield
  • Imagefield
  • ImageAPI
  • ImageAPI GD2 (unless your server is configured for Imagemagick, then enable the ImageMagick module instead)
  • ImageCache
  • ImageCache UI
  • Lightbox
  • Views
  • Views UI

Once you have ticked the modules, press Save configuration.

Imagecache

We need to create 2 presets for our images, one will be a thumbnail to show in the gallery and a second to show within the lightbox.

Navigate to /admin/build/imagecache and click Add new preset.

Set the preset Namespace to thumbnail. Click Add Scale and Crop, set the width to 180 and the height to 120.

Then create a new imagecache preset with the name lightbox. This time select Add Scale and set the width to 800 and the height to 600.

CCK Imagefield

First we will set up a new content type for our images which we will call Image. Navigate to /admin/content/types and click Add content type.

Set the name to Image and the type to image.  You may enter a description if you wish.

Under Submission form settings, delete the text from the Body field.

Depending on how you want to set up the gallery, you can change the Workflow settings so that images aren’t automatically added but are added to an approval list, for this tutorial we will make all images published, so untick Promoted to frontpage and leave Published ticked.

Under Comment settings, set comments to disabled.

Save the content type.

Next to the Image content type click manage fields. In the Add New field area, set the label to Image and the field name to image (to make it field_image), for the Type of data to store, select File then for Form element select Image.  Press Save.

content_type

Under Global settings, tick the Required box and set the Number of values to 1.  Leave the List field and Description field to Disabled.

imagefield

Then press the Save field settings button.

Now click the Display fields tab at the top of the page.

Set the Label to Hidden and set both the Teaser and Full node to Lightbox2: thumbnail->lightbox.

imagedisplay

Now under /node/add/image we can add an image to go in to our gallery.

newimage

For now create 3 or 4 images.

Under /admin/content/node you should now have some nodes.

nodes

Now we will set up a view to display these nodes in a gallery.

Views

Navigate to /admin/build/views and click the Add tab at the top of the page. Set the view name to something like gallery. Leave View type set to Node.

Set the title to Gallery. For Style set to Grid then chose 4 columns and set Alignment to Horizontal.

For Use pager set to Full pager.  Then for Items per page, set to a multiple of 4, I am going to use 16 to give us a 4x4 grid of images. If you wish, you can set Use AJAX to Yes to stop the whole page being loaded on the pager.

Add the following Filters:

  • Node: Published = On
  • Node: Type = Image

Under Fields select Content: Image (field_image). Set Label to None and change Format to Lightbox2: thumbnail->lightbox.

Under Sort criteria you can set this to what you want.  I am going to set them to newest first. Select Node: Post date and set to Descending.

galleryunsaved

On the left select Page from the drop down and click Add display.

Under Path set to gallery.

viewpage

Press Save.

Now if you navigate to /gallery you can see your gallery in action.

gallery

Once you upload more than 16 images which we set our Items per page to, a pager will appear.

full_gallery

Update: There may be cases where the image isn't uploaded to the image type when a user submits the node add form without uploading the image. This will show up as an empty section within the gallery and the node will be submitted with no image, but Imagefield will not tell the user that this is a problem even if it is a required field.

To stop these empty image types showing in the gallery, you will need to add a relationship for the image and set it to a required relationship. This way the image node will not appear in the gallery unless there is an image attached. You could then set up an additional view to find out which image nodes don't have an image attached.

relationship

Comments

Hi,
Thanks for the tutorial.
I set up the gallery following all the steps and I can see it when I'm logged in as admin, but it doesn't show up in public view, only the pagination appears. I must have something set as not published, but I can't see it.
I appreciate your help on this.
Regards,
Anna

Make sure anonymous users can see the imagecache images under the Permissions page.

How do i use multiple image fields instead of one?
How do i make a good slide show out of the gallery?
what do i do to have every register user with his own separate gallery and slide show?

please help me out : my email is mikeizev@yahoo.co.uk,
thanks once more for the tutorial.

For users to get their own gallery read this follow up tutorial.

For multiple image fields (I assume you mean upload more than one image at a time) use Image FUpload.

Hi
I have done all steps as per your tutorial but the anonynmous users can't see the uploading the images & administrator can see the images what is the problem
I have given all permissions

There is obviously a permissions problem somewhere.

Make sure that the necessary imagecache presets are checked on your permissions page for anonymous and authenticated users. Do you have any CCK access modules enabled? If so you will need to give access for anonymous users to see the imagefield.

Firstly, thank you for a simple follow through tutorial compared to the many others.

Everything is working however I have a few questions.

When you click on the image you have "View Image Details", how do you remove this?

Also is there a way to make albums for these photos? For example I have a set of photos of me in Greece and another of me in Italy and I wanted to make an album for each to be displayed on the same page.

And finally how do I add the Gallery to the primary links?

Again many thanks!

Only users with the correct permissions will see the "View images details" link.

As for your second question, read the Create an album based image gallery in Drupal 6 using CCK and Views

Which module do I edit the permission?

Thanks for the link.

Anonymous users won't see it (I don't think). It will be under Lightbox2 permissions.

I have stopped using Lightbox2 as I think Colorbox is a better module all round and looks nicer as well as a working Drupal 7 release.

Hi..Dear Friend I am doing same thing what you gave in this link but it doesnot shows any images after navigate the gallery.I corrrectly follow everything what you told.I set in the view relationship also.Please any body help me.
Thanks,
Shashikala BR

  1. Check clean URLs are enabled
  2. Make sure all users have permission to see the imagecache presets
  3. If it still doesn't work you may have to enable the private file system

after one day frustration i have found this tutorial very nicely done.
Thanks

Without one code line... and works fine!

Eric, french Drupal beginner

Helped a lot............thanku

First I would like to thank author for an wonderful tutorial. I followed all the steps. At the end in gallery page I am unable to see thumbnail view of images. I am getting links , if i click on link then i can see the images. please help in this regard to get thumbnail view.
Thanks in Advance

Make sure your imagecache directory is writable.

Some people have found that on their hosting, it only works with private file system.

Hello James Tombs,
I finaly found a good tutorial about inserting a gallery, thanx for that. I am a complete newbie about Drupal, and I agree with some other people that Drupal is a complex system with a lot of modules. I have spend a lot of hours and sleep to manage how things work.
My question is: How do I put the gallery in a node with a link to a, by myself made menu, or to the navigation menu. For example: Home, Contact, Gallery.
Greetings from The Netherlands.

Go to Site Building > Menus and add the link to your Primary links menu to your gallery node.

thanks for this tutorial in views.

Mr. James Tombs ... why when I come to Display fields and Set the Label to Hidden and set both the Teaser and Full node.... I can't find Lightbox2: thumbnail->lightbox .... but I just see :
Generic Files
Path to file
lightbox image
lightbox image linked to modul
lightbox image linked to image
lightbox file path
lightbox URL
Thumbnail image linked to node
Thumbnail image linked to image
Thumbnail file path
Thumbnail
Image linked to node
Image linked tofile
Link Image
Link Image - Just Link
Lightbox Link Image
Thumbnail Link Image

.... in the Teaser and Full Node. Which one I must choose it for Teaser and Full node....
Thank you for your help....

Sounds like you haven't installed the Lightbox module.

Pages